Praktik terbaik izin web

Marian Harbach

Thomas Steiner

Dialog izin adalah mekanisme utama web untuk melindungi pengguna dari kemampuan yang canggih, yang dapat membahayakan privasi dan keamanan mereka. Browser bertujuan untuk mengonfirmasi bahwa pengguna bermaksud mengizinkan kemampuan di situs tertentu. Anda dapat menerapkan izin untuk sejumlah API, termasuk pengambilan media (kamera dan mikrofon), geolokasi, akses penyimpanan, MIDI, dan notifikasi.

Ikuti praktik ini saat menampilkan dialog izin kepada pengguna, berdasarkan statistik penggunaan Chrome dan riset pengguna. Jika diikuti, pengguna Anda akan menemui lebih sedikit dialog yang tidak perlu, yang akan menghasilkan lebih sedikit keputusan pemblokiran.

Dokumen ini diakhiri dengan beberapa pola kode untuk API yang dibatasi izin dan cara membantu pengguna åmemulihkan diri dari status diblokir.

Praktik terbaik pembuatan perintah

Minta izin setelah interaksi pengguna, saat pengguna memiliki konteks untuk memahami alasan Anda meminta izin dan manfaat yang mereka dapatkan jika mengizinkan akses.

Jika memungkinkan, berikan cara alternatif untuk menyelesaikan tugas yang sama. Dengan memilih momen yang tepat untuk meminta izin, Anda mengurangi kemungkinan pengguna mengalami kondisi terblokir yang sulit dipulihkan.

Jangan pernah meminta saat pemuatan halaman atau tanpa interaksi pengguna

Meminta izin saat pemuatan halaman sama dengan meminta informasi sensitif kepada pelanggan saat mereka memasuki toko fisik. Melihat dialog izin, mungkin di antara beberapa dialog lainnya untuk pendaftaran newsletter dan izin cookie, adalah pengalaman yang tidak menyenangkan. Pengguna tidak akan memahami mengapa mereka ditanyai dan manfaat yang akan mereka dapatkan.

Meskipun aplikasi web Anda tidak dapat berfungsi tanpa akses ke kemampuan tertentu, beri pengguna kesempatan untuk memahami alasannya. Misalnya, awali dialog izin dengan penjelasan mengapa izin tersebut diperlukan dan berikan pilihan kepada pengguna (misalnya, dengan menyediakan cara alternatif untuk menyelesaikan fungsi yang sama). Jika Anda tidak dapat memikirkan momen yang lebih baik untuk meminta izin selain saat pemuatan halaman, ada beberapa contoh di bagian selanjutnya dalam panduan ini.

Meminta izin tanpa interaksi pengguna sebelumnya juga tidak efektif. Hal ini dikenal sebagai aktivasi pengguna sementara. Telemetri Chrome menunjukkan bahwa 77% permintaan izin di desktop ditampilkan tanpa sinyal niat pengguna, dan akibatnya, hanya 12% permintaan tersebut yang diizinkan. Setelah interaksi pengguna, izinkan peningkatan tarif hingga 30%.

Hanya minta izin setelah pengguna berinteraksi dengan halaman.

Hanya minta saat pengguna dapat memahami alasannya

Keputusan terkait izin sering kali merupakan keputusan terkait privasi. Berdasarkan framework integritas kontekstual, kita tahu bahwa keputusan privasi sangat bergantung pada konteks. Memahami alasan akses diperlukan sangatlah penting. Anda hanya boleh meminta kemampuan yang Anda butuhkan untuk memberikan nilai, yang kemungkinan akan disetujui pengguna karena mereka akan mendapatkan nilai. Selain itu, minta izin saat pengguna Anda memahami mengapa kemampuan tersebut bermanfaat. Permudah pengguna untuk memahami konteks penggunaan.

Riset pengguna kami menunjukkan bahwa pengguna jauh lebih cenderung mengizinkan akses jika mereka memahami alasan situs meminta akses dan juga merasakan manfaatnya. Kami juga menemukan bahwa pengguna berharap untuk menjelajahi situs yang tidak dikenal terlebih dahulu untuk lebih memahami nilai yang bisa mereka dapatkan sebagai imbalan karena mengizinkan akses. Mereka sering kali menutup atau mengabaikan dialog izin untuk sementara. Dengan izin satu kali, mereka mungkin mengizinkan satu kunjungan terlebih dahulu. Dukung perilaku ini di aplikasi Anda.

Menyediakan alternatif

Hasil dari beberapa kemampuan mungkin tidak bermanfaat bagi pengguna. Misalnya, geolokasi perangkat desktop tanpa sensor GPS dapat menampilkan lokasi yang salah karena orang tersebut terhubung ke VPN. Pengguna lain mungkin tidak ingin memberikan akses papan klip karena mereka lebih suka tetap memegang kontrol dan memicu peristiwa ini dengan kombinasi tombol secara manual. Dalam situasi ini, berikan cara alternatif untuk mencapai hasil yang sama.

Misalnya, jika meminta izin geolokasi, tawarkan kolom teks tempat pengguna dapat memasukkan kode pos atau alamat. Mengizinkan elemen dipilih dan disalin ke papan klip dengan pintasan keyboard atau menu konteks. Untuk notifikasi, tawarkan email, bukan notifikasi push.

Pola yang berguna adalah menggunakan UI alternatif juga sebagai penjelasan mengapa akses dapat bermanfaat. Pengguna yang melihat opsi untuk memasukkan lokasi di samping tombol yang memicu API geolokasi merasa memiliki kontrol, karena mereka memahami bahwa mereka dapat mengetik alamat mereka. Demikian pula, jika ada pilihan antara menerima notifikasi melalui push atau email, atau bergabung ke rapat tanpa mengizinkan akses kamera dan mikrofon, pengguna akan memahami konsekuensinya.

Menghindari status yang diblokir

Setelah pengguna menolak akses secara permanen ke kemampuan yang dibatasi izin, browser akan mematuhi keputusan tersebut. Jika permintaan akses dapat terus dilakukan, situs berbahaya akan membombardir pengguna dengan permintaan. Memulihkan dari status diblokir kemampuan memerlukan upaya yang disengaja. Hindari meminta izin dalam situasi saat pengguna cenderung tidak mengizinkan akses.

Cara umum untuk melakukannya adalah dengan menggunakan apa yang disebut sebagai pra-prompt, tempat Anda menjelaskan kepada pengguna apa yang akan terjadi dan mengapa aplikasi Anda memerlukan kemampuan yang akan Anda minta. Hanya jika pengguna bereaksi secara afirmatif terhadap pra-prompt tersebut, Anda harus memicu dialog izin browser. Ada situasi saat pengguna mungkin perlu memulihkan diri dari status tersebut. Lihat bagian Membantu pengguna memulihkan diri dari status diblokir untuk mengetahui informasi selengkapnya.

Perhatikan konten pihak ketiga

Waspadai sumber yang tidak terduga dari dialog izin. Skrip pihak ketiga di situs Anda dapat memicu dialog izin yang tidak diinginkan. Hal ini dapat memengaruhi pengalaman pengguna Anda, terutama jika perintah tidak mengikuti praktik terbaik. Untuk tetap mengontrol pengalaman pengguna, baca dokumentasi untuk setiap pustaka dan skrip pihak ketiga yang Anda tambahkan ke kode Anda.

Kapan harus meminta izin

Berikut beberapa contoh momen yang tepat untuk meminta izin, dengan mengikuti praktik terbaik:

• Setelah pengguna mengklik Gunakan lokasi saya di samping kolom formulir, saat memasukkan alamat secara manual.
• Setelah pengguna berlangganan ke channel atau postingan video, dan mengklik tombol afirmatif pada dialog yang menjelaskan bahwa pembaruan dapat dikirimkan sebagai email atau notifikasi.
• Setelah pengguna membuka halaman yang mempersiapkannya untuk bergabung ke panggilan video dan menjawab secara afirmatif dalam perintah awal bahwa mereka ingin dilihat dan didengar. Baca selengkapnya dalam studi kasus Google Meet.

Pola kode

Izin untuk menggunakan API diberikan melalui berbagai cara, bergantung pada API. Beberapa API lama menggunakan model yang membuat browser secara otomatis meminta izin saat pertama kali Anda mencoba menggunakan API. Salah satu contohnya adalah Geolocation API saat memanggil navigator.geolocation.getCurrentPosition().

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

API lain menggunakan model yang meminta izin secara eksplisit terlebih dahulu dengan metode statis. Contoh yang baik adalah Notification.requestPermission() untuk mengizinkan notifikasi, atau DeviceOrientationEvent.requestPermission() yang kurang umum, yang merupakan bagian dari Device Orientation Events API.

Beberapa browser otomatis memberikan izin ke API tertentu. Misalnya, Chrome selalu mengizinkan akses ke orientasi perangkat, sedangkan Safari menampilkan dialog.

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

Memeriksa status izin

Untuk memeriksa apakah Anda dapat menggunakan API tertentu, gunakan metode navigator.permissions.query() dari Permissions API.

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

Membantu pengguna pulih dari status diblokir

Untuk membantu pengguna memecahkan masalah akses, deteksi bahwa mereka memblokir akses menggunakan Permissions API dan tawarkan panduan tentang cara mengubah setelan mereka. Saat pengguna berinteraksi dengan elemen UI yang terkait dengan kemampuan yang dibatasi izin, gunakan status izin pemeriksaan dan buka dialog pemecahan masalah.

Langkah-langkah persis untuk mengubah status izin bervariasi menurut browser, jadi berikan deskripsi yang cocok berdasarkan string agen pengguna untuk browser yang paling umum digunakan.

Di Chrome, pengguna dapat mengubah izin dari Lihat informasi situs > Setelan situs, yang ada di kolom URL. Dalam beberapa kasus, mereka mungkin harus memuat ulang halaman sebelum menggunakan kemampuan. Dalam hal ini, kolom pesan akan muncul di bagian atas jendela yang menawarkan untuk memuat ulang situs.

UI serupa untuk mengontrol izin ada di browser lain, seperti di Firefox.