Membantu developer membangun aplikasi web yang canggih dan dapat diinstal

Pengantar

Pada awal tahun 2020, tim Chrome di perangkat seluler dan desktop menguraikan rencana untuk meningkatkan visibilitas dan engagement aplikasi web yang diinstal. Pekerjaan kami menghasilkan peningkatan penginstalan dan engagement PWA lebih dari 100%. Kami mencapai hal ini dengan meneliti fitur yang ada, menjalankan eksperimen pengujian A/B, dan mewawancarai pengguna untuk mendapatkan insight tentang persepsi dan ekspektasi pengguna. Artikel ini membahas cara kita sampai di sana.

Bahasa penginstalan terpadu

Pesan ajakan (CTA) yang memicu penginstalan PWA tidak konsisten di seluruh platform web. Untuk Chrome di Android, kami telah menetapkan Tambahkan ke layar utama, tetapi di Platform Desktop, kami menekankan Instal. Alasan perbedaan ini berasal dari studi yang dijalankan tim pada tahun 2016 yang membandingkan berbagai string. Tim mendapati bahwa Tambahkan ke layar utama berfungsi lebih baik, meskipun hanya sedikit, di perangkat seluler.

Studi lebih lanjut tentang taksonomi pada tahun 2019 tidak menemukan perbedaan, sehingga tim yang ingin menyatukan pengalaman penginstalan PWA, memutuskan untuk memperbarui label menjadi Instal di Android. Studi lebih lanjut pada tahun 2021 membandingkan bahasa, Instal, Dapatkan, dan Download, dan kami menemukan bahwa pengguna memahami Instal sebagai proses yang sedang berlangsung. Pengguna merasa bahwa mengetuk tombol dengan label Dapatkan akan mengarahkan mereka ke situs, dan dengan Download, mereka berasumsi bahwa file akan berakhir di folder download atau yang setara.

Dengan mempertimbangkan semua hal ini, kami menyimpulkan bahwa label Instal paling cocok untuk PWA. Sebaiknya developer di seluruh platform web menggunakan Instal sebagai string pilihan ke depannya.

Ikon instal di desktop

Di platform desktop, kami memiliki pola desain bahwa setiap kali situs memuat PWA, Chrome akan menampilkan pil yang muncul di sisi kanan omnibox yang berisi ikon dan label Instal. Setelah itu, saat pengguna mengunjungi situs, hanya ikon yang akan muncul. Mengklik pil ini akan memicu penginstalan PWA desktop.

Ikon plus penginstalan asli.
Ikon plus penginstalan asli.

Ikon ini awalnya berupa simbol plus, sebagian karena metafora Tambahkan ke layar utama yang digunakan di perangkat seluler. Namun, seperti yang disebutkan, bahasa yang kami gunakan adalah Instal. Masukan yang kami terima dari komunitas developer adalah bahwa ikon ini membingungkan. Selain itu, jika pengguna menggunakan fungsi zoom untuk memperbesar teks, ikon untuk zoom akan terlihat sangat mirip, sehingga semakin membingungkan pengguna.

Bug omnibox dengan ikon zoom dan instal.
Bug omnibox dengan ikon zoom dan instal.

Saya memutuskan untuk menyelidiki persepsi pengguna kami, karena sebagian besar masukan bersifat anecdotal. Bersama peneliti UX, kami menjalankan studi dengan 10.000 pengguna di Amerika Serikat dan Indonesia untuk menentukan pemahaman pengguna tentang ikonografi penginstalan. Kami menguji lima desain yang berbeda, termasuk desain yang ada, dan menanyakan kepada pengguna arti "Instal". Kami menemukan bahwa ikon saat ini, simbol plus, adalah yang paling membingungkan bagi pengguna kami. Banyak orang yang salah mengira simbol tersebut dengan "obat", "pertolongan pertama", dan "baterai".

Kami juga mendapati bahwa pengguna terutama mengaitkan gambar seperti panah dan perangkat dengan penginstalan. Berdasarkan kesimpulan ini, kami menjalankan pengujian A/B/C di Chrome, yang membandingkan desain yang ada dengan dua alternatif. Kami memilih panah yang mengarah ke bawah ke monitor, yang berperforma jauh lebih baik daripada dua lainnya. Kami juga melihat penurunan penutupan UI penginstalan dengan ikon baru ini.

Instal varian ikon dari kumpulan ikon Desain Material.
Varian ikonografi penginstalan yang dapat Anda download dari kumpulan ikon Desain Material kami.

Hasilnya adalah desain yang Anda lihat saat ini, yang telah meningkatkan tingkat penginstalan PWA lebih dari dua kali lipat untuk situs. Kami juga telah menambahkan ikon ini dan ikon seluler yang setara ke set ikon Desain Material, sehingga komunitas dapat menggunakan ikonografi yang kami anggap paling menarik.

Tentu saja, satu ikon tidak akan mengubah dunia, yang mengarahkan kita ke fitur berikutnya.

Bantuan dalam produk

Bantuan dalam Produk adalah tooltip balon biru yang membantu pengguna menggunakan fitur baru yang mungkin menarik bagi mereka berdasarkan kriteria tertentu. Kami memutuskan untuk meluncurkan pola desain ini untuk memberi tahu pengguna tentang fitur penginstalan dan lebih mendukung desain ulang ikon baru.

Balon bantuan dalam produk.
Bubble tooltip bantuan dalam produk yang mengedukasi pengguna tentang fitur.

Saat pengguna mengunjungi situs secara rutin, Chrome menggunakan layanan yang dikenal sebagai Engagement Situs. Metrik ini memberikan informasi tentang tingkat interaksi pengguna dengan situs. Dengan mengunjungi chrome://site-engagement/, Anda dapat melihat situs yang Anda buka secara rutin. Dengan skor ini, kita dapat menentukan apakah pengguna tertarik dengan situs. Jika situs tersebut adalah PWA dan pengguna berinteraksi, kami akan menampilkan UI Bantuan Dalam Produk penginstalan kepada mereka. Artinya, kami hanya berfokus pada pengguna yang berinteraksi dan tidak mengganggu pengguna yang mungkin mengunjungi situs satu kali.

Dengan menggunakan bantuan dalam produk di desktop, kami melihat peningkatan penginstalan PWA lebih dari 100%, yang menunjukkan bahwa berfokus pada pengguna yang berinteraksi meningkatkan kemampuan penginstalan aplikasi web.

UI Penginstalan yang Lebih Kaya

Paradigma penginstalan untuk sebagian besar pengguna adalah app store. Sejak pertengahan tahun 2000-an, kami telah mengedukasi pengguna bahwa setiap kali mereka menginstal aplikasi, mereka akan melihat deskripsi, screenshot, dan metadata lainnya untuk membantu mereka memutuskan apakah aplikasi adalah sesuatu yang mereka inginkan.

Dengan PWA, UI yang kami tampilkan setelah pengguna memutuskan untuk menginstal aplikasi web relatif sedikit. Jadi, tim memutuskan untuk menjelajahi pengalaman penginstalan yang lebih kaya yang akan memberikan konteks kepada pengguna tentang aplikasi web dan memungkinkan developer untuk merayakan PWA yang setara dengan pengalaman native.

UI penginstalan yang lebih kaya.
UI Penginstalan yang lebih kaya, status diciutkan dan diluaskan.

Awal tahun ini, kami meluncurkan Penginstalan yang Lebih Lengkap, UI penginstalan yang diperluas di Chrome di Android yang memungkinkan developer menambahkan screenshot ke manifes mereka. Developer juga dapat menambahkan deskripsi, yang direkomendasikan tetapi tidak wajib. Karena UI yang lebih baru ini, kami melihat rasio penginstalan untuk beberapa PWA meningkat dua kali lipat, yang menunjukkan bahwa pengguna lebih yakin untuk menginstal aplikasi web saat kami memberikan konteks yang lebih banyak dan pengalaman yang lebih kaya. Versi desktop UI ini saat ini masih dalam proses.

Kesimpulan

Selama dua tahun terakhir, tim ini telah menjelajahi dan bereksperimen dengan fitur baru di Chrome yang telah mengaktifkan dan memberdayakan developer PWA serta membantu mengedukasi pengguna tentang manfaat pengalaman web. Masih banyak pekerjaan yang dapat kami lakukan, tetapi secara kolektif kita dapat meningkatkan dan memperkaya kehidupan pengguna serta mendukung web terbuka lebih lanjut.