Merancang Untuk Web Tanpa Browser

Apa yang terjadi ketika kita mengeluarkan browser web dari penjelajahan web? Fitur "Tambahkan ke Layar Beranda" baru Google menghadirkan pengalaman web yang cepat dan terfokus yang tidak dapat dibedakan dari aplikasi asli. Apa yang dapat dipelajari desainer dari keberhasilan pengguna awal seperti Twitter, dan bagaimana kami dapat memanfaatkan pola desain seperti aplikasi untuk mengatasi serangkaian tantangan pengalaman pengguna yang baru ini?

Kami telah melihat perdebatan tentang topik pengalaman asli versus pengalaman web. Keduanya memiliki pro dan kontra, tetapi sangat sering kelemahan terbesar dari pengalaman dalam browser adalah tidak terasa andal, cepat, dan imersif seperti pengalaman aplikasi asli.

Pada artikel ini, kami akan membahas tips dan trik untuk merancang dan mengembangkan aplikasi web progresif (PWA), khususnya yang ditambahkan ke layar beranda di perangkat Android. Tapi pertama-tama, mari kita lihat beberapa contoh dan membuat kasus untuk PWA.

Bangkitnya Pengalaman Seperti Aplikasi

PWA adalah, sederhananya, situs web yang terlihat dan terasa seperti aplikasi asli. Dalam ceramahnya di konferensi pengembang Google I/O, VP Produk Google, Rahul Roy-Chowdhury, menggambarkannya sebagai "pengalaman web yang jauh lebih baik… yang disukai dan lebih banyak digunakan pengguna."

Angka-angka tersebut mendukung klaim Rahul. Forbes telah melihat keterlibatan penggunanya dua kali lipat sejak peluncuran PWA-nya. Angka tersebut juga terus menunjukkan pertumbuhan di sektor e-niaga, dengan Lancome melihat peningkatan besar dalam rasio konversi setelah peluncuran PWA barunya.

Pengguna tidak peduli apakah teknologi itu asli, aplikasi web yang diinstal, atau situs web. Apa yang membuat pengguna terlibat dan membuat pembeli berkonversi adalah pengalaman itu sendiri.

“

Jenis pengalaman seluler yang cepat, lancar, seperti aplikasi ini adalah apa yang diinginkan dan diharapkan oleh pengguna seiring dengan semakin banyaknya PWA yang muncul di pasar arus utama. Salah satu fitur yang tampaknya akan mempercepat gelombang ini adalah "Tambahkan ke Layar Beranda", yang pada dasarnya adalah proses instalasi PWA. Untuk pengguna akhir, menambahkan PWA ke layar beranda memulai pengalaman seperti aplikasi itu.

Apa Itu "Tambahkan Ke Layar Beranda," Dan Apakah Itu Layak?

“Tambahkan ke Layar Beranda” adalah fitur yang memasang PWA ke layar beranda Android, membuat PWA dapat diakses secara instan tanpa pengguna perlu membuka browser dan mengetik URL atau menggunakan mesin pencari. (Catatan tambahan: Meskipun fitur serupa telah tersedia di iOS Safari sejak iPhone paling awal, pengguna tidak ditawari banyak untuk mensimulasikan perilaku aplikasi. Untuk alasan ini, versi Safari bukan bagian dari artikel ini.)

Sebagaimana tercermin dalam daftar periksa Mercusuar Google, PWA dengan kemampuan ini mendapat skor lebih tinggi dan, sebagai hasilnya, cenderung berperingkat lebih baik dalam hasil pencarian.

Ambil Twitter Lite, sebuah PWA. Secara tradisional, Twitter merasa sulit untuk melibatkan kembali jutaan penggunanya di web seluler. Sejak memperkenalkan prompt "Tambahkan ke Layar Beranda" ke PWA Twitter Lite-nya, 250.000 pengguna harian unik meluncurkan aplikasi web dari layar beranda rata-rata empat kali sehari.

Sektor ritel juga melihat keberhasilan. Alibaba telah melaporkan tingkat interaksi empat kali lebih tinggi setelah pengguna menambahkan PWA ke layar beranda perangkat mereka, dan Flipkart telah melihat peningkatan 70% dalam tingkat konversi di antara pembeli yang datang melalui ikon layar beranda.

Meskipun basis pengguna "Tambahkan ke Layar Beranda" terbatas pada Android Chrome, fitur ini memberi penghargaan kepada minoritas yang sangat terlibat ini dengan pengalaman yang lebih mendalam dan eksklusif — peran yang secara tradisional dimainkan oleh aplikasi asli.

Bukankah Aplikasi Web Progresif Hanya Situs Web yang Dibungkus Sebagai Aplikasi?

Pada dasarnya, ya, dan mengapa tidak? 90% menit seluler dihabiskan di aplikasi, dengan rasio konversi 120% lebih baik di sektor ritel.

Ini adalah jenis statistik yang akan mengarahkan pengecer mana pun ke jalur pengembangan aplikasi asli. Namun, dengan biaya rata-rata aplikasi asli sekitar $270.000, "Tambahkan ke Layar Beranda" menawarkan alternatif keuangan yang menarik.

Pengguna tidak peduli apakah teknologi itu asli, aplikasi web yang diinstal, atau situs web. Apa yang membuat pengguna terlibat dan membuat pembeli berkonversi adalah pengalaman itu sendiri:

• Apakah itu memuat dengan cepat?
• Apakah itu bekerja secara offline?
• Apakah navigasi instan?
• Apakah itu terintegrasi dengan mulus dengan perangkat?

Ini adalah karakteristik desain seperti aplikasi yang harus disertakan jika "Tambahkan ke Layar Beranda" ingin memberikan jenis statistik keterlibatan tinggi yang umumnya dikaitkan dengan aplikasi asli.

Apa yang Membuat Pengalaman Seperti Aplikasi?

"Tambahkan ke Layar Beranda" menciptakan pengalaman yang hanya berfokus pada aplikasi yang dimaksud. Situs web diluncurkan melalui ikon aplikasi, tanpa bilah URL peramban atau bilah alat navigasi apa pun yang menawarkan tautan ke situs web eksternal.

Ini adalah titik awal yang baik, tetapi kita juga harus mengenali dan memenuhi harapan tertentu dari pengguna aplikasi asli jika pengalaman ingin benar-benar terasa seperti aplikasi, termasuk:

• transisi halaman instan;
• kinerja yang dirasakan tinggi;
• aksesibilitas offline;
• integrasi perangkat penuh;
• navigasi gaya aplikasi;
• tombol kembali;
• berbagi tindakan;
• salin URL, cetak, dan lanjutkan.

Siap untuk menyelam? Mari kita lihat masing-masing.

Transisi Halaman Instan

Pengguna berharap dapat masuk dan menggunakan aplikasi dengan cepat, tanpa menunggu konten baru dimuat setelah setiap interaksi.

Diselesaikan Dengan PWA

Agar PWA lulus daftar periksa Lighthouse, PWA harus mengikuti pedoman peningkatan kinerja tertentu. Konten harus di-cache di belakang layar, dan halaman baru harus dimuat dengan sangat cepat sehingga terasa seperti tidak ada acara pemuatan.

Kinerja yang Dirasakan

Hebatnya, tingkat stres yang disebabkan oleh penundaan seluler sebanding dengan menonton film horor! Pengguna yang mengunduh aplikasi tidak berharap harus menunggu konten mereka. Mereka juga tidak mau mengalami pengalaman terputus-putus yang disebabkan oleh elemen yang muncul secara tidak sinkron saat dimuat.

Diselesaikan Dengan PWA

Transisi peluncuran PWA "Tambahkan ke Layar Beranda" (lihat contoh Flipkart di bawah) menyediakan jembatan visual antara memuat dan memuat konten. Ini adalah contoh bagaimana "status yang dimuat sebelumnya" dapat meningkatkan persepsi kecepatan dan kelancaran. PWA yang dirancang dengan baik akan membangun ide ini dengan menggunakan placeholder (kerangka) yang meniru status akhir halaman dan dengan menggunakan pemuatan lambat untuk menghilangkan prioritas elemen yang tidak terlihat, membuat pemuatan awal tampak lebih cepat.

Bekerja Offline

Pengguna yang mengunduh aplikasi asli tidak berharap harus bergantung pada koneksi Internet agar aplikasi berfungsi dengan baik.

Diselesaikan Dengan PWA

Pekerja layanan (teknologi yang meningkatkan pengalaman offline) dapat digunakan untuk langsung menampilkan konten online di area dengan konektivitas rendah atau tidak ada sama sekali. Konten halaman di-cache di belakang layar, memungkinkannya untuk diakses di mana jika tidak ada jeda dalam pengalaman menjelajah, seperti saat memasuki terowongan di kereta.

Integrasi Perangkat Penuh

Ada lokasi tertentu di perangkat tempat pengguna berharap menemukan dan mengelola aplikasi mereka.

Solusi PWA

PWA yang ditambahkan ke layar beranda sekarang muncul di mana pun Anda mengharapkan aplikasi Android muncul. Ini termasuk peluncur aplikasi, pengalih tugas, dan pengaturan sistem. Ini juga memastikan bahwa aplikasi lain yang tertaut ke halaman di PWA, seperti pencarian Google atau tautan media sosial, akan membuka aplikasi dan bukan browser. Pemberitahuan push bahkan muncul seolah-olah berasal dari aplikasi asli.

Navigasi Gaya Aplikasi

Aplikasi berbagi pendekatan umum untuk navigasi. Bilah tajuk biasanya menunjukkan judul bagian saat ini di tengah; tombol kembali ada di kiri atas; dan tindakan kontekstual apa pun (memfavoritkan, berbagi, dll.) ada di kanan atas.

Belum ada Solusi PWA

Pola ini tidak umum di web seluler. Sebagai gantinya, tindakan ini ditemukan di fungsionalitas bawaan browser (misalnya, tombol kembali browser). Web bekerja dengan cara ini karena suatu alasan. Sebuah aplikasi biasanya akan mulai dari layar yang sama setiap kali, sedangkan pengguna web seluler sering dirujuk dari pencarian atau media sosial — halaman apa pun bisa menjadi halaman arahan mereka. Untuk alasan ini, logo dan tindakan global lainnya menjadi pusat perhatian di bilah header dan tetap ada di sana sepanjang pengalaman.

Harapan ini harus diatasi jika PWA dengan "Tambahkan ke Layar Beranda" benar-benar terasa seperti aplikasi. Untuk melakukan ini, desainer harus mencari cara untuk memulihkan pola navigasi utama yang sekarang hilang dengan browser.

Tombol kembali

Beberapa orang mungkin berpendapat bahwa karena Android menyediakan tombol kembali melalui perangkat itu sendiri, maka tidak perlu mengganti fungsi kembali browser. Padahal, kedua interaksi itu melakukan hal yang berbeda. Sebagian besar aplikasi terus menawarkan tombol kembali di header sebagai tindakan "naik", untuk menavigasi dalam hubungan hierarkis antar halaman. Fungsionalitas kembali sistem mungkin menutup jendela modal atau menavigasi ke aplikasi yang sama sekali berbeda.

Larutan

Salah satu solusi yang mungkin adalah mengganti tombol menu di kiri atas dengan tombol kembali setelah pengguna melewati halaman awal. Ini divalidasi ketika kami menempatkan pola ini di depan pengguna. Setelah peserta maju melalui halaman beranda awal (dan ikon menu tidak lagi terlihat), kami meminta mereka untuk menavigasi ke bagian baru. Enam dari enam secara intuitif menggunakan tombol kembali untuk menavigasi ke halaman beranda, tempat mereka dapat membuka menu.

Berbagi Tindakan

Dibangun ke dalam antarmuka pengguna browser web apa pun adalah kemampuan untuk berbagi halaman di media sosial dan melalui aplikasi lain yang diinstal pada perangkat.

Larutan

Desainer harus memberikan lebih banyak petunjuk untuk membagikan konten yang dibagikan secara umum di dalam halaman. Kami menemukan selama pengujian bahwa pengguna biasanya akan mencari tombol berbagi di sekitar kepala halaman atau gambar produk sebelum membuka menu apa pun. Jika fungsionalitas tidak ditemukan, peserta diharapkan menemukan ikon berbagi di bilah header.

Ikon "Lainnya" adalah pola mirip Android yang digunakan untuk menunjukkan pilihan yang melimpah. Coba tambahkan aksi berbagi di balik menu seperti ini. Bahkan dimungkinkan untuk memicu dialog berbagi asli Android menggunakan Web Share API (yang, pada saat penulisan, adalah fitur khusus Chrome dan masih belum dilacak standar).

Salin URL, Cetak, Maju

Tindakan yang kurang umum, seperti menyalin URL dan mencetak, adalah fungsi dasar browser dan tidak boleh diabaikan.

Larutan

Cara mudah untuk menawarkan fungsi salin-URL dan cetak adalah dengan menggunakan Web Share API (sekali lagi, pada saat penulisan, hanya didukung di Google Chrome). Atau, mereka dapat disajikan sebagai opsi terpisah di menu luapan. Menu ini kemudian dapat diperluas untuk menyertakan tindakan maju atau apa pun yang akan mendapat manfaat dari lokasi tetap di bilah header (masuk dan keluar, misalnya).

Cara Membuatnya Bekerja Di Dunia Nyata

Butuh waktu untuk "Tambahkan ke Layar Beranda" untuk berkembang menjadi kelompok pola yang diterima. Berikut adalah beberapa praktik terbaik yang dapat membantu dalam pengembangan ini.

Tajuk Lengket, Tindakan Persisten

Pengadopsi awal "Tambahkan ke Layar Beranda" Flipkart dan AliExpress sama-sama menyadari pentingnya kemampuan belajar saat memperkenalkan pola baru. Mereka memastikan bahwa pengguna selalu tahu di mana menemukan tindakan global yang penting (kembali, troli, cari): di bilah header yang menempel di bagian atas layar.

Prompt dengan Cerdas

Sejak tim Google Chrome mengumumkan bahwa mereka akan memberikan kontrol penuh kepada PWA kapan harus meminta pengguna, penginstalan "Tambahkan ke Layar Beranda" telah meningkat. Flipkart melihat peningkatan tiga kali lipat dalam keterlibatan saat mendorong pengguna setelah mereka melakukan pembelian.

Stres dan Ujian

Bagian dari proses validasi untuk setiap pola baru adalah dengan mengujinya di berbagai aplikasi. Kami menemukan bahwa polanya sesuai dengan kasus tepi yang paling edgy. Bilah tajuk di PWA Lancome berisi banyak ajakan bertindak. Lancome mengidentifikasi menu overflow sebagai peluang besar untuk menyederhanakan antarmuka penggunanya, sambil menawarkan eksklusif kepada pengguna yang diharapkan untuk menggunakan "Tambahkan ke Layar Beranda", eksklusif seperti tautan ke program loyalitasnya.

Di mana "Tambahkan Ke Layar Beranda" Didukung?

Apple telah mengumumkan akan mendukung pekerja layanan, tetapi juga telah membuat komitmen untuk menjadikan App Store tempat yang menarik bagi pengembang aplikasi asli untuk menghabiskan waktu dan uang mereka. Ini bisa menjadi alasan mengapa browser Safari iOS lambat mengadopsi PWA dan penjelajahan web tanpa browser, meskipun ada kemajuan dari pesaing.

Peramban Internet Samsung telah mengembangkan permintaan "Tambahkan ke Layar Beranda" yang terus-menerus di dalam bilah peramban, sehingga pengguna selalu tahu di mana menemukannya.

Windows mengambil "Tambahkan ke Layar Beranda" satu langkah lebih jauh. Setiap PWA dengan kemampuan ini sekarang akan terdaftar di Windows Store sebagai aplikasi yang dapat diunduh. Aplikasi ini ringan dan dapat diinstal pada perangkat desktop dan tablet dengan cepat, menjalankan situs web sebagai pengalaman yang nyaman dan tanpa browser.

Kesimpulan

"Tambahkan ke Layar Beranda" menawarkan pengalaman eksklusif dan imersif bagi pengguna yang sangat terlibat dan berkonversi. Sementara adopsi tumbuh, baik di basis pengguna dan perangkat yang mendukung fitur tersebut, validasi dapat ditemukan di kisah sukses awal, seperti Twitter Lite. Kisah-kisah ini menunjukkan bagaimana web seperti aplikasi yang lebih modern dapat memiliki efek positif pada interaksi ketika memenuhi harapan pengguna akan kinerja dan desain.

Harapan ini dipenuhi dengan menggabungkan peningkatan kinerja PWA dengan pola desain intuitif dalam navigasi dan pengalaman pengguna seperti aplikasi. Dengan ini, kita dapat membuka jalan bagi era baru penjelajahan web tanpa browser.