UI penginstalan PWA yang lebih lengkap

Adriana Santoso
Adriana Jara

Pengantar

Perangkat seluler dan pengenalan app store vendor perangkat telah mengubah model mental pengguna tentang cara menemukan, mengevaluasi, dan menginstal software. Pengguna kini sangat familier dengan app store, dan informasi tambahan yang diberikan melalui app store seperti konteks tentang aplikasi, masukan media sosial, rating, dll., sehingga Anda melihat metafora app store muncul di sistem operasi Desktop termasuk ChromeOS, Mac, dan Windows.

Tantangan pada platform penginstalan hari ini

Hari ini, jika pengguna ingin menginstal PWA, kolom info dan overlay modal akan muncul dengan informasi minimal. Jika pengguna terus menginstal, prosesnya akan berakhir terlalu cepat tanpa memberikan konteks kepada pengguna. Hal ini bertentangan dengan ekspektasi mereka menginstal aplikasi dan dapat membuat mereka sedikit bingung dengan apa yang terjadi.

Contoh UI penginstalan PWA.
Contoh UI penginstalan PWA.

Untuk memungkinkan developer memberikan pengalaman terinstal yang setara dengan pengalaman native Chrome memperkenalkan platform penginstalan baru, Richer Install, yang memungkinkan developer menambahkan deskripsi dan screenshot ke file manifes dan menampilkannya di dialog bottomsheet dalam Chrome untuk Android.

Contoh UI bottomsheet di Chrome.
Contoh UI bottomsheet di Chrome.

Hal ini memberi developer peluang untuk membuat proses penginstalan yang lebih menarik dan lebih selaras dengan ekspektasi pengguna serta meniru model mental pengalaman terinstal yang sudah ada.

UI Instal yang Lebih Kaya Diperluas.
UI Penginstalan yang Lebih Kaya Diperluas.
UI Instal yang Lebih Banyak Diciutkan.
UI Penginstalan yang Lebih Kaya Diciutkan.

Kompatibilitas mundur

Situs yang tidak menyertakan minimal satu screenshot ke file manifesnya akan terus menerima perintah yang ada. Hal ini dapat berubah di masa mendatang, bergantung pada penyerapan komunitas developer dan reaksi pengguna.

Melihat pratinjau UI

UI ini berfungsi mulai dari Chrome 94 di Android, dan Chrome 108 di desktop.

Fitur ini diaktifkan di squoosh.app dan dapat dilihat pratinjaunya di sana.

Penerapan

Guna menampilkan dialog UI penginstalan yang lebih lengkap, developer perlu menambahkan setidaknya satu screenshot untuk faktor bentuk yang sesuai dalam array screenshots. Kolom description tidak wajib, tetapi direkomendasikan. Dialog konten dibuat menggunakan konten kolom screenshots dan description untuk membuat pengalaman lebih mirip dengan penginstalan app store. UI ini membantu pengguna mengidentifikasi bahwa mereka menambahkan aplikasi ke perangkat, dan dengan lebih banyak ruang, developer dapat memberikan konteks tertentu kepada pengguna saat penginstalan.

Misalnya, developer dapat menggunakan kolom description untuk menyoroti fitur aplikasi yang mendorong pengguna untuk tetap menggunakannya di perangkat mereka, dan dengan screenshots mereka dapat menyajikan tampilan dan nuansa aplikasi web sebagai aplikasi mandiri, dengan semua akses mudah yang dimiliki aplikasi platform.

Untuk mengetahui spesifikasi mendetail dan panduan untuk menambahkannya ke aplikasi Anda, buka Pola UI Instal yang Lebih Kaya.

Masukan

Ke depannya, kami akan mempertimbangkan untuk menambahkan data lain seperti kategori dan rating aplikasi, tetapi hal ini akan didasarkan pada masukan dari developer dan pengguna.

Dalam beberapa bulan ke depan, kami ingin melihat cara developer menjelajahi pola UI baru ini dan kami ingin mendapatkan masukan dari Anda. Hubungi kami dengan mengisi formulir ini