Identitas

Membantu pengguna mendaftar

Formulir pendaftaran sering kali merupakan interaksi pertama dengan formulir di situs Anda. Desain formulir pendaftaran yang baik sangatlah penting, dan formulir yang aman sangatlah penting.

Mari kita lihat formulir pendaftaran, dan cara membantu pengguna mendaftar di situs Anda.

Minimalkan formulir pendaftaran dan hanya tampilkan kontrol formulir yang diperlukan untuk membuat akun. Jangan menggandakan kontrol formulir Anda untuk membantu pengguna memahami detail akun mereka dengan benar. Sebagai gantinya, kirim email konfirmasi.

Membantu pengguna mengisi detail akun mereka

Anda dapat membantu pengguna mengisi detail akun mereka dengan menggunakan atribut autocomplete yang sesuai. Gunakan autocomplete="email" untuk kolom email, dan autocomplete="new-password" untuk kolom sandi baru.

Pelajari lebih lanjut cara mengisi otomatis kontrol input.

Anda juga dapat membantu pengguna memasukkan sandi yang aman dengan menawarkan <button> sandi yang terbuka.
Pelajari pola ungkapkan sandi lebih lanjut.

Pastikan formulir pendaftaran Anda aman

Jangan pernah menyimpan atau mengirimkan sandi dalam teks biasa. Pastikan untuk melakukan salt dan hashing pada sandi, serta jangan membuat algoritma hashing Anda sendiri.

Tawarkan autentikasi multi-faktor, terutama jika Anda menyimpan data pribadi atau sensitif. Praktik terbaik OTP SMS dan Mengaktifkan Autentikasi yang Kuat dengan WebAuthn menjelaskan cara menerapkan autentikasi multi-faktor.

Pastikan pengguna tidak menggunakan sandi yang telah dibobol. Misalnya, gunakan API dari Have I Been Pwned untuk mendeteksi sandi yang telah dibobol, dan sarankan pengguna untuk mengisi sandi baru yang berbeda, atau peringatkan mereka jika sandi mereka dibobol.

Membantu pengguna login

Mari kita lihat cara membuat formulir login untuk memastikan pengguna dapat login dengan mudah ke situs Anda.

Perjelas lokasi tombol daftar dan login. Pastikan formulir Anda dapat digunakan di perangkat sentuh:

Ukuran target ketuk tombol minimal berukuran 48 piksel.
font-size elemen formulir Anda cukup besar (20px hampir tepat di perangkat seluler).
Terdapat cukup ruang (margin) di antara kontrol formulir, dan input tersebut cukup besar (gunakan setidaknya padding: 15px di perangkat seluler).

Membantu pengguna mengisi email dan sandi mereka

Membantu browser dan pengelola sandi mengisi otomatis detail akun. Gunakan autocomplete="email" untuk kolom email, dan autocomplete="current-password" untuk kolom sandi saat ini.

Untuk membantu pengguna mengisi detail akun mereka secara manual, gunakan type="email" pada kolom email untuk menampilkan keyboard virtual yang sesuai di perangkat seluler.

Gunakan atribut required untuk kolom email dan sandi agar Anda dapat memperingatkan jika ada nilai yang tidak valid saat pengguna mengirimkan formulir. Pertimbangkan untuk menggunakan validasi real-time untuk membantu pengguna memperbaiki data yang tidak valid segera setelah mereka memasukkannya, daripada menunggu pengiriman formulir.

Pastikan pengguna dapat melihat sandi yang mereka masukkan

Teks yang Anda isi untuk <input type="password"> dikaburkan secara default, untuk menghormati privasi pengguna. Bantu pengguna memasukkan sandi, dengan menampilkan <button> untuk beralih visibilitas teks yang dimasukkan.

Pelajari lebih lanjut cara menerapkan <button> pengungkapan sandi.

Pastikan formulir login dan pendaftaran Anda dapat digunakan

Uji formulir login dan pendaftaran Anda secara rutin dengan pengguna sungguhan untuk memastikan autentikasi berfungsi seperti yang diharapkan. Gunakan analisis dan pengukuran pengguna nyata (RUM) untuk mengumpulkan data kolom, dan alat seperti Lighthouse dan PageSpeed Insights untuk menjalankan pengujian sendiri. Pelajari lebih lanjut cara menguji kegunaan dan mengumpulkan data analisis.

Pastikan formulir Anda dapat digunakan di berbagai browser dan platform. Uji formulir Anda di berbagai ukuran layar, hanya dengan menggunakan keyboard, atau menggunakan pembaca layar seperti VoiceOver di Mac atau NVDA di Windows.

Membantu pengguna mengubah setelan akun mereka

Pastikan pengguna dapat mengubah setiap setelan akun, termasuk alamat email, sandi, dan nama pengguna.

Buat data apa saja yang Anda simpan menjadi transparan, dan bantu pengguna mendownload semua data pribadi mereka kapan saja. Pastikan pengguna dapat menghapus akun mereka jika diinginkan. Fitur pengelolaan akun seperti ini mungkin merupakan persyaratan hukum di beberapa wilayah.

Memastikan pengguna dapat memperbarui sandi mereka

Permudah pengguna untuk memperbarui sandi mereka.

Minta sandi saat ini kepada pengguna sebelum mengubahnya, dan kirim email tentang perubahan sandi dengan opsi untuk mengembalikan dan mengunci akun.

Tambahkan opsi untuk meminta sandi baru, dan pertimbangkan untuk memberikan URL .well-known untuk meminta sandi baru.