UI penginstalan PWA yang lebih lengkap

Pengantar

Perangkat seluler dan pengenalan app store vendor perangkat telah mengubah pengalaman pengguna model mental tentang cara menemukan, mengevaluasi, dan menginstal perangkat lunak. Pengguna sekarang sangat akrab dengan {i>app store<i}, dan informasi tambahan yang disediakan melalui {i>app store<i} seperti konteks tentang aplikasi, masukan sosial, rating, dll. sehingga metafora app store muncul di desktop termasuk ChromeOS, Mac, dan Windows.

Tantangan pada platform penginstalan saat ini

Saat ini, jika pengguna ingin menginstal PWA, kolom info dan overlay modal akan muncul dengan tidak akurat atau tidak sesuai. Jika mereka terus menginstal, proses akan berakhir terlalu cepat tanpa memberi konteks tambahan kepada pengguna. Hal ini bertentangan dengan ekspektasi mereka untuk menginstal aplikasi dan dapat membiarkan mereka agak bingung dengan apa yang terjadi.

Contoh UI penginstalan PWA.
Contoh UI penginstalan PWA.

Untuk memungkinkan developer memberikan pengalaman penginstalan yang setara dengan pengalaman native Chrome memperkenalkan permukaan penginstalan baru, Richer Install, yang memungkinkan developer menambahkan deskripsi dan screenshot ke file manifesnya dan membuatnya muncul dalam dialog bottomsheet dalam Chrome untuk Android.

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

Hal ini memberi developer kesempatan untuk membuat proses penginstalan yang lebih menarik yang lebih sesuai dengan harapan pengguna dan meniru model mental yang sudah ada pengalaman terinstal.

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

Kompatibilitas mundur

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

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, mereka 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 tindakan ini akan didasarkan pada masukan dari pengembang dan pengguna.

Dalam beberapa bulan mendatang, kami ingin melihat bagaimana developer mengeksplorasi pola UI baru ini dan kami ingin mendapatkan umpan balik dari Anda. Hubungi kami dengan mengisi formulir ini