UI penginstalan PWA yang lebih lengkap

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 dari media sosial, rating, dll. sehingga Anda melihat metafora app store muncul di sistem operasi Desktop termasuk ChromeOS, Mac, dan Windows.

Tantangan pada platform penginstalan saat ini

Saat ini, jika pengguna ingin menginstal PWA, infobar dan overlay modal akan muncul dengan sedikit informasi. Jika pengguna terus menginstal, proses akan berakhir terlalu cepat tanpa memberikan konteks kepada pengguna. Hal ini bertentangan dengan ekspektasi pengguna untuk menginstal aplikasi dan dapat membuat mereka agak bingung dengan apa yang terjadi.

Contoh UI penginstalan PWA.
Contoh UI penginstalan PWA.

Agar developer dapat memberikan pengalaman penginstalan yang setara dengan pengalaman native, Chrome memperkenalkan platform penginstalan baru, Richer Install, yang memungkinkan developer menambahkan deskripsi dan screenshot ke file manifes mereka 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 yang lebih sesuai dengan ekspektasi pengguna dan yang meniru model mental pengalaman penginstalan yang sudah ada.

Richer Install UI Diperluas.
UI Penginstalan yang Lebih Kaya Diluaskan.
Richer Install UI Diciutkan.
UI Instal yang Lebih Kaya Diciutkan.

Kompatibilitas mundur

Situs yang tidak menyertakan setidaknya 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 dari Chrome 94 di Android, dan Chrome 108 di desktop.

Fitur ini diaktifkan di squoosh.app dan dapat dipratinjau di sana.

Penerapan

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

Misalnya, developer dapat menggunakan kolom description untuk menyoroti fitur aplikasi yang mendorong pengguna untuk menyimpannya di perangkat, dan dengan screenshots, developer dapat menyajikan tampilan dan nuansa aplikasi web sebagai aplikasi web yang berdiri sendiri, 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

Di masa mendatang, 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 mendatang, kami ingin melihat cara developer menjelajahi pola UI baru ini dan kami ingin mendapatkan masukan dari Anda. Hubungi kami dengan mengisi formulir ini