Pola untuk mempromosikan penginstalan PWA

Penny McLachlan
Penny McLachlan

Menginstal Progressive Web App (PWA) dapat memudahkan pengguna untuk menemukan dan menggunakannya. Bahkan dengan promosi browser, beberapa pengguna tidak menyadari bahwa mereka dapat menginstal PWA, jadi sebaiknya berikan pengalaman dalam aplikasi yang dapat Anda gunakan untuk mempromosikan dan mengaktifkan penginstalan PWA Anda.

Screenshot tombol instal sederhana di PWA.
Tombol instal sederhana yang disediakan dalam PWA Anda.

Artikel ini sama sekali tidak lengkap, tetapi menawarkan titik awal tentang berbagai cara untuk mempromosikan penginstalan PWA Anda. Terlepas dari pola, atau pola yang Anda gunakan, semuanya mengarah ke kode yang sama yang memicu alur penginstalan, yang didokumentasikan dalam Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri.

Praktik terbaik

Ada beberapa praktik terbaik yang berlaku, apa pun pola promosi yang Anda gunakan di situs.

  • Jaga agar promosi berada di luar alur perjalanan pengguna Anda. Misalnya, di halaman login PWA, tempatkan pesan ajakan (CTA) di bawah formulir login dan tombol kirim. Penggunaan pola promosi yang mengganggu akan mengurangi kegunaan PWA dan berdampak negatif pada metrik engagement Anda.
  • Menyertakan kemampuan untuk menutup atau menolak promosi. Ingat preferensi pengguna jika mereka melakukannya dan hanya meminta ulang jika ada perubahan hubungan pengguna dengan konten Anda, seperti saat mereka login atau menyelesaikan pembelian.
  • Gabungkan teknik di berbagai bagian PWA Anda, tetapi berhati-hatilah agar tidak membebani atau mengganggu pengguna dengan promosi penginstalan.
  • Hanya tampilkan promosi setelah peristiwa beforeinstallprompt diaktifkan.

Promosi browser otomatis

Jika kriteria tertentu terpenuhi, sebagian besar browser secara otomatis memberi tahu pengguna bahwa Progressive Web App Anda dapat diinstal. Misalnya, Chrome desktop menampilkan tombol instal di omnibox.

Screenshot omnibox dengan indikator penginstalan yang terlihat.
Promosi penginstalan yang disediakan browser (desktop).
Screenshot promosi penginstalan yang disediakan browser.
Promosi penginstalan yang disediakan browser (seluler).

Chrome untuk Android menampilkan infobar mini kepada pengguna, meskipun hal ini dapat dicegah dengan memanggil preventDefault() pada peristiwa beforeinstallprompt. Jika Anda tidak memanggil preventDefault(), banner akan ditampilkan saat pengguna pertama kali mengunjungi situs Anda dan memenuhi kriteria kemampuan penginstalan di Android, lalu ditampilkan lagi setelah sekitar 90 hari.

Pola promosi antarmuka pengguna

Pola promosi antarmuka pengguna dapat digunakan untuk hampir semua jenis PWA dan muncul di tempat-tempat seperti navigasi situs dan banner. Seperti jenis pola promosi lainnya, penting untuk menyadari konteks pengguna untuk meminimalkan gangguan pada perjalanan pengguna.

Situs yang bijaksana saat memicu UI promosi mencapai jumlah penginstalan yang lebih besar dan tidak mengganggu perjalanan pengguna yang tidak tertarik untuk menginstal.

Tombol instal sederhana

UX yang paling sederhana adalah dengan menyertakan tombol 'Instal' atau 'Dapatkan aplikasi' di lokasi yang sesuai dalam konten web Anda. Pastikan tombol tidak memblokir fungsi penting lainnya dan tidak mengganggu perjalanan pengguna dalam aplikasi Anda.

Tombol instal kustom..
Tombol instal sederhana.

Ini adalah tombol instal yang merupakan bagian dari header situs Anda. Konten header lainnya sering kali menyertakan branding situs seperti logo dan menu tiga garis. Header mungkin position:fixed atau tidak, bergantung pada fungsi situs dan kebutuhan pengguna.

Tombol instal kustom di header.
Tombol instal kustom di header.

Jika digunakan dengan tepat, mempromosikan penginstalan PWA dari header situs Anda adalah cara yang efektif untuk memudahkan pelanggan yang paling setia untuk kembali ke pengalaman Anda. Piksel di header PWA Anda sangat berharga, jadi pastikan pesan ajakan (CTA) penginstalan Anda berukuran tepat, lebih penting daripada konten header lainnya, dan tidak mengganggu.

Tombol instal kustom di header
Tombol instal kustom di header

Pastikan Anda:

  • Jangan tampilkan tombol instal kecuali jika beforeinstallprompt telah diaktifkan.
  • Evaluasi nilai kasus penggunaan yang diinstal untuk pengguna Anda. Pertimbangkan penargetan selektif untuk hanya menampilkan promosi Anda kepada pengguna yang kemungkinan akan mendapatkan manfaat dari promosi tersebut.
  • Gunakan ruang {i>header<i} yang sangat berharga secara efisien. Pertimbangkan hal lain yang akan membantu untuk ditawarkan kepada pengguna di header, dan pertimbangkan prioritas promosi penginstalan dibandingkan dengan opsi lainnya.
Tombol instal khusus di menu navigasi
Tambahkan tombol instal/promosi di menu navigasi slide keluar.

Menu navigasi adalah tempat yang tepat untuk mempromosikan penginstalan aplikasi Anda karena pengguna yang membuka menu tersebut menandakan interaksi dengan pengalaman Anda.

Pastikan Anda:

  • Jangan mengganggu konten navigasi penting. Tempatkan promosi penginstalan PWA di bawah item menu lainnya.
  • Tawarkan presentasi singkat yang relevan tentang alasan pengguna akan mendapatkan manfaat jika menginstal PWA Anda.

Halaman landing

Tujuan halaman landing adalah untuk mempromosikan produk dan layanan Anda. Jadi, ini adalah salah satu tempat yang tepat untuk mempromosikan manfaat penginstalan PWA, sangat tepat untuk mempromosikannya.

Dialog instal kustom di halaman landing.
Dialog instal kustom di halaman landing.

Pertama, jelaskan proposisi nilai situs Anda, lalu beri tahu pengunjung apa yang akan mereka dapatkan dari penginstalan.

Pastikan Anda:

  • Menarik fitur yang paling penting bagi pengunjung dan menekankan kata kunci yang mungkin telah mengarahkan mereka ke halaman landing Anda.
  • Buat promosi penginstalan dan pesan ajakan (CTA) yang menarik perhatian, tetapi hanya setelah Anda membuat proposisi nilai dengan jelas. Bagaimanapun, ini adalah halaman landing Anda.
  • Sebaiknya tambahkan promosi penginstalan di bagian aplikasi tempat pengguna menghabiskan sebagian besar waktu mereka.

Sebagian besar pengguna pernah menemui banner penginstalan dalam pengalaman seluler dan sudah terbiasa dengan interaksi yang ditawarkan oleh banner. Banner harus digunakan dengan hati-hati karena dapat mengganggu pengguna.

Banner instal khusus di bagian atas halaman.
Banner yang dapat ditutup di bagian atas halaman.

Pastikan Anda:

  • Tunggu hingga pengguna menunjukkan minat pada situs Anda sebelum menampilkan banner. Jika pengguna menutup banner, jangan tampilkan lagi kecuali pengguna memicu peristiwa konversi yang menunjukkan tingkat interaksi yang lebih tinggi dengan konten Anda, seperti pembelian di situs e-commerce atau mendaftar untuk membuat akun.
  • Berikan penjelasan singkat tentang manfaat menginstal PWA Anda di banner. Misalnya, Anda dapat membedakan penginstalan PWA dari aplikasi iOS/Android dengan menyebutkan bahwa PWA hampir tidak menggunakan penyimpanan di perangkat pengguna atau bahwa PWA akan diinstal langsung tanpa pengalihan toko.

UI sementara

UI sementara, seperti pola desain Snackbar, memberi tahu pengguna dan memungkinkan mereka menyelesaikan tindakan dengan mudah, dalam hal ini, menginstal aplikasi. Jika digunakan dengan benar, pola UI semacam ini tidak mengganggu alur penggunaan, dan biasanya otomatis ditutup jika diabaikan oleh pengguna.

Banner instal kustom sebagai snackbar.
Snackbar yang dapat ditutup yang menunjukkan bahwa PWA dapat diinstal.

Tampilkan snackbar setelah beberapa interaksi dengan aplikasi Anda. Jika muncul saat pemuatan halaman, atau di luar konteks, dapat mudah terlewatkan, atau menyebabkan kelebihan kognitif. Jika hal ini terjadi, pengguna hanya akan menutup semua yang mereka lihat. Ingat, pengguna baru di situs Anda mungkin belum siap untuk menginstal PWA. Oleh karena itu, sebaiknya tunggu hingga Anda memiliki sinyal minat yang kuat dari pengguna sebelum menggunakan pola ini, misalnya, kunjungan berulang, login pengguna, atau peristiwa konversi serupa.

Banner instal kustom sebagai snackbar.
Snackbar yang dapat ditutup yang menunjukkan bahwa PWA dapat diinstal.

Pastikan Anda:

  • Tampilkan snackbar selama antara 4 hingga 7 detik agar pengguna memiliki cukup waktu untuk melihat dan bereaksi terhadapnya, tanpa menghalanginya.
  • Hindari menampilkannya di UI sementara lainnya seperti banner, dll.
  • Tunggu hingga Anda memiliki sinyal minat yang kuat dari pengguna sebelum menggunakan pola ini, misalnya, kunjungan berulang, login pengguna, atau peristiwa konversi serupa.

Setelah konversi

Segera setelah peristiwa konversi pengguna, misalnya setelah pembelian di situs e-commerce, merupakan peluang yang tepat untuk mempromosikan penginstalan PWA Anda. Pengguna berinteraksi dengan konten Anda secara jelas, dan konversi sering kali menandakan bahwa pengguna akan berinteraksi dengan layanan Anda lagi.

Promosi penginstalan setelah konversi.
Promosi penginstalan setelah pengguna menyelesaikan pembelian.

Proses pemesanan atau checkout

Tampilkan promosi penginstalan selama atau setelah perjalanan berurutan seperti setelah alur pemesanan atau checkout. Jika menampilkan promosi setelah pengguna menyelesaikan perjalanan, sering kali Anda dapat membuatnya lebih terlihat karena perjalanan telah selesai.

Promosi penginstalan setelah perjalanan pengguna.
Promosi penginstalan setelah perjalanan pengguna.

Pastikan Anda:

  • Sertakan pesan ajakan (CTA) yang relevan. Pengguna mana yang akan mendapat manfaat dari menginstal aplikasi Anda dan mengapa? Bagaimana relevan dengan perjalanan yang sedang mereka lakukan saat ini?
  • Jika merek Anda memiliki penawaran unik untuk pengguna aplikasi terinstal, sebutkan.
  • Hindari promosi untuk langkah selanjutnya dalam perjalanan Anda atau Anda dapat memengaruhi rasio penyelesaian perjalanan secara negatif. Dalam contoh e-commerce di atas, perhatikan bahwa pesan ajakan (CTA) utama untuk checkout berada di atas promosi penginstalan aplikasi.

Alur mendaftar, login, atau logout

Promosi ini adalah kasus khusus dari pola promosi perjalanan dengan kartu promosi dapat lebih terlihat.

Tombol instal kustom di halaman pendaftaran.
Tombol instal kustom di halaman pendaftaran.

Halaman ini biasanya hanya dilihat oleh pengguna yang tertarik berlangganan, yang proposisi nilai PWA Anda sudah ditetapkan. Selain itu, sering kali tidak banyak konten berguna lain yang dapat ditempatkan di halaman ini. Dengan demikian, pesan ajakan (CTA) yang lebih besar tidak terlalu mengganggu.

Pastikan Anda:

  • Jangan mengganggu perjalanan pengguna di dalam formulir pendaftaran. Jika merupakan proses multi-langkah, sebaiknya tunggu hingga pengguna menyelesaikan perjalanan.
  • Promosikan fitur yang paling relevan kepada pengguna yang mendaftar.
  • Sebaiknya tambahkan promosi penginstalan tambahan dalam area login aplikasi Anda.

Pola promosi inline

Teknik promosi inline memadukan promosi dengan konten situs. Hal ini sering kali lebih halus daripada promosi di antarmuka pengguna, yang memiliki konsekuensi. Anda ingin promosi Anda cukup menonjol sehingga pengguna yang tertarik akan melihatnya, tetapi jangan terlalu mengganggu kualitas pengalaman pengguna Anda.

Dalam Feed

Promosi penginstalan dalam feed muncul di antara artikel berita atau daftar kartu informasi lainnya di PWA Anda.

Promosi penginstalan dalam feed konten.
Promosi penginstalan dalam feed konten.

Tujuan Anda adalah menunjukkan kepada pengguna cara mengakses konten yang mereka sukai dengan lebih mudah. Fokus untuk mempromosikan fitur dan fungsi yang akan bermanfaat bagi pengguna Anda.

Pastikan Anda:

  • Batasi frekuensi promosi agar tidak mengganggu pengguna.
  • Beri pengguna kemampuan untuk menutup promosi.
  • Ingat pilihan pengguna Anda untuk menolak.