Menggabungkan ilustrasi dan visual yang kaya saat memperkenalkan kunci sandi juga dapat membantu meringankan beban kognitif pada pengguna, dan membantu mendukung konten Anda sekaligus menjadikan pengalaman lebih menarik dan mudah dipahami.
Komponen desain
Kunci sandi dimaksudkan sebagai peningkatan pada produk atau layanan yang ada dan Anda harus memperkenalkannya menggunakan format yang sudah biasa digunakan pengguna di platform Anda.
Misalnya, jika layanan Anda menggunakan interstisial untuk menyampaikan pembaruan kepada pengguna, serupa dengan cara Akun Google memperkenalkan kunci sandi kepada pengguna selama login, sebaiknya gunakan format interstisial untuk memperkenalkan kunci sandi.
![Halaman landing TrailBlazer dengan kartu berjudul 'Login lebih cepat dengan kunci sandi'](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=3&hl=id)
Atau, jika platform Anda biasanya memberi tahu pengguna tentang perubahan akun melalui modal pop-up, kolom notifikasi, atau gaya notifikasi lainnya, gunakan metode notifikasi yang sudah dikenal tersebut untuk memperkenalkan konsep kunci sandi. Pendekatan ini memastikan pengalaman yang konsisten dan mudah digunakan saat Anda meluncurkan fitur kunci sandi baru.
![Pop-up yang menawarkan kepada pengguna untuk menggunakan kunci sandi untuk sandi yang lebih cepat dan aman.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=3&hl=id)
Membuat prompt kunci sandi deskriptif
Untuk tindakan terkait kunci sandi, bukan hanya tombol dengan pesan ajakan (CTA), buat perintah deskriptif kaya yang dapat menyampaikan lebih banyak informasi kepada pengguna. Ini dapat mencakup ilustrasi, judul, pesan, dan pesan ajakan (CTA).
Misalnya, untuk membuat kunci sandi untuk Akun Google, sebagai gantinya hanya tombol “Buat kunci sandi”, terdapat interstisial dengan pesan ajakan (CTA) untuk “Menyederhanakan login Anda”, penjelasan singkat tentang kunci sandi dan ilustrasi yang menyertakan ikon kunci sandi serta berbagai metode untuk membuka kunci layar perangkat.
![Screenshot halaman Akun Google dengan pesan keikutsertaan untuk kunci sandi.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=3&hl=id)
Menggunakan ikon kunci sandi kanonis
Alliance FIDO telah membuat ikon kunci sandi yang harus Anda gunakan saat merepresentasikan kunci sandi. Menggunakannya secara konsisten akan membantu pengguna mengenali kunci sandi dan menyederhanakan tindakan terkait kunci sandi.
![Ikon kunci sandi kanonis.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=3&hl=id)
Gunakan ikon kunci sandi di UI Anda:
- Untuk merepresentasikan konsep kunci sandi dalam orientasi atau perintah lainnya untuk mendorong pengguna membuat kunci sandi atau mengupgrade ke kunci sandi agar login menjadi lebih aman.
- Di tombol atau link yang memungkinkan pengguna login dengan kunci sandi.
- Dalam setelan untuk membantu mengidentifikasi kunci sandi yang dapat diedit atau dihapus.
Warna ikon dapat diubah agar sesuai dengan skema warna produk, merek, atau antarmuka pengguna Anda.
Menampilkan "kartu kunci sandi" dalam setelan akun
Tidak seperti sandi, yang merupakan kombinasi nyata dari huruf, angka, dan simbol, kunci sandi sangat tidak terlihat oleh orang. Dedikasikan ruang untuk kartu kunci sandi di setelan akun. Di dalam kartu tersebut, tercantum ikon kunci sandi, informasi tentang kunci sandi seperti waktu dan ekosistem kunci sandi dibuat, kapan terakhir kali digunakan, dan opsi untuk mengelola kunci sandi. Jika seseorang memiliki dua kunci sandi atau lebih, setiap kunci sandi harus memiliki kartunya sendiri.
![Screenshot setelan Kunci sandi di halaman setelan keamanan Perintis.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=3&hl=id)