Pengantar
Pada awal tahun 2020, tim Chrome di perangkat seluler dan desktop menyusun rencana untuk meningkatkan visibilitas dan interaksi aplikasi web yang diinstal. Upaya kami menghasilkan peningkatan lebih dari 100% dalam penginstalan dan interaksi PWA. Kami mencapai hal ini dengan meneliti fitur yang ada, menjalankan eksperimen pengujian A/B, dan wawancara pengguna untuk mendapatkan insight tentang persepsi dan ekspektasi pengguna. Artikel ini membahas bagaimana kita sampai di sana.
Bahasa instal terpadu
Pesan ajakan (CTA) yang memicu penginstalan PWA tidak konsisten di seluruh platform web. Untuk Chrome di Android, kami telah menentukan Add to home screen, tetapi di Platform Desktop, kami menekankan Instal. Alasan perbedaan ini berasal dari sebuah studi yang dilakukan tim pada tahun 2016 yang membandingkan {i>string<i} yang berbeda. Tim menemukan bahwa Add to home screen berfungsi lebih baik, jika hanya secara marginal, 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. Sebuah studi lebih lanjut pada tahun 2021 membandingkan bahasa, Instal, Dapatkan, dan Download, dan kami menemukan bahwa pengguna memahami Instal sebagai proses yang sedang terjadi. Pengguna merasa mengetuk tombol dengan label Get akan mengarahkan pengguna ke situs, dan dengan Download, mereka berasumsi bahwa file akan muncul di folder download atau yang setara.
Dengan mempertimbangkan semua ini, kami menyimpulkan bahwa label Instal paling cocok dengan PWA. Ke depannya, sebaiknya developer di seluruh platform web mengadopsi Instal sebagai string pilihan.
Ikon instal di desktop
Di platform desktop, kami memiliki pola desain yang setiap kali situs memuat PWA, Chrome akan menampilkan pil yang muncul di sebelah kanan omnibox yang berisi ikon dan label Instal. Setelah itu, saat pengguna mengunjungi situs, hanya ikon tersebut yang akan ditampilkan. Mengklik pil ini akan memicu penginstalan PWA desktop.
Ikon ini awalnya berupa simbol plus, sebagian karena metafora Add to home screen yang digunakan di perangkat seluler. Namun, seperti yang disebutkan, bahasa yang kami gunakan adalah Install. Masukan yang kami terima dari komunitas developer adalah ikon ini membingungkan. Selain itu, jika pengguna menggunakan fungsi zoom untuk memperbesar teks, ikon zoom akan tampak sangat mirip, sehingga semakin membingungkan pengguna.
Saya memutuskan untuk menyelidiki persepsi pengguna kami, karena sebagian besar masukan adalah anekdot. Bekerja sama dengan peneliti UX, kami melakukan studi dengan 10.000 pengguna di AS dan Indonesia untuk menentukan pemahaman pengguna tentang ikonografi instal. Kami menguji lima desain yang berbeda, termasuk yang sudah ada, dan bertanya kepada pengguna apa arti "Instal". Kami menemukan bahwa ikon saat ini, simbol plus, adalah yang paling membingungkan bagi pengguna. Banyak yang mengartikan simbol tersebut dengan "obat-obatan", "pertolongan pertama", dan "baterai".
Kami juga mendapati bahwa pengguna terutama mengaitkan gambar seperti tanda 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 menemukan panah yang menunjuk ke bawah ke monitor, yang berperforma jauh lebih baik daripada dua lainnya. Kami juga melihat penurunan penutupan UI penginstalan dengan ikon baru ini.
Hasilnya adalah desain yang Anda lihat saat ini, yang telah meningkatkan rasio penginstalan PWA lebih dari dua kali lipat untuk situs. Kami juga telah menambahkan ikon ini dan versi seluler yang setara dengan kumpulan ikon Desain Material, sehingga komunitas dapat menggunakan ikonografi yang menurut kami paling menarik.
Tentu saja, satu ikon tidak akan mengubah dunia, yang akan membawa kita ke fitur berikutnya.
Bantuan dalam produk
Bantuan Dalam Produk adalah tooltip balon biru yang memandu pengguna menggunakan fitur-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 mendukung desain ulang ikon baru lebih jauh.
Saat pengguna mengunjungi situs secara rutin, Chrome menggunakan layanan yang dikenal sebagai Interaksi Situs.
Elemen ini memberikan informasi tentang seberapa besar engagement pengguna dengan situs. Dengan
mengunjungi chrome://site-engagement/, Anda dapat melihat situs yang sering
Anda gunakan. Dengan menggunakan skor ini, kita dapat menentukan
apakah pengguna tertarik dengan suatu {i>website<i}. Jika situs adalah PWA dan pengguna berinteraksi, kami akan menampilkan penginstalan UI Bantuan dalam Produk kepada mereka.
Artinya, kita hanya berfokus pada pengguna yang aktif berinteraksi dan tidak mengganggu pengguna
yang mungkin mengunjungi situs satu kali.
Dengan menggunakan bantuan dalam produk di desktop, kami melihat peningkatan lebih dari 100% dalam penginstalan PWA, yang menunjukkan bahwa berfokus pada pengguna yang aktif berinteraksi meningkatkan kemudahan penginstalan aplikasi web.
UI Penginstalan yang Lebih Lengkap
Paradigma penginstalan bagi sebagian besar pengguna adalah toko. Sejak pertengahan tahun 2000-an, kami telah memberi tahu pengguna bahwa setiap kali mereka menginstal aplikasi, mereka akan melihat deskripsi, screenshot, dan metadata lainnya untuk membantu mereka memutuskan apakah suatu aplikasi merupakan sesuatu yang mereka inginkan.
Dengan PWA, UI yang kami tampilkan ketika pengguna memutuskan untuk menginstal aplikasi web jumlahnya relatif sedikit. Jadi, tim memutuskan untuk mengeksplorasi pengalaman penginstalan yang lebih kaya yang akan memberikan konteks kepada pengguna kami tentang aplikasi web dan memungkinkan developer menikmati PWA yang setara dengan pengalaman native.
Awal tahun ini, kami meluncurkan Richer Install, 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 diperlukan. Berkat UI yang lebih baru ini, kami melihat rasio penginstalan untuk beberapa PWA dua kali lipat, yang menunjukkan bahwa pengguna lebih percaya diri dalam menginstal aplikasi web saat kami memberikan lebih banyak konteks dan pengalaman yang lebih kaya. Versi desktop UI ini sedang dalam proses.
Kesimpulan
Tim telah menghabiskan dua tahun terakhir menjelajahi dan bereksperimen dengan fitur-fitur baru di Chrome yang telah mengaktifkan dan mendukung 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 dan terus mendukung web terbuka.