Identitas

Membantu pengguna mendaftar

Formulir pendaftaran sering kali menjadi interaksi pertama dengan formulir di situs Anda. Desain formulir pendaftaran yang baik sangat penting, dan formulir yang aman juga sangat diperlukan.

Lihat formulir pendaftaran untuk mempelajari cara membantu pengguna mendaftar di situs Anda.

Buat formulir pendaftaran seminimal mungkin dan hanya tampilkan kontrol formulir yang diperlukan untuk membuat akun. Jangan menggandakan kontrol formulir untuk membantu pengguna mendapatkan detail akun yang benar. Kirim email konfirmasi saja.

Detail akun

Anda dapat membantu pengguna mengisi detail akun mereka 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>tampilkan sandi. Pelajari lebih lanjut pola tampilkan sandi.

Mengamankan formulir pendaftaran Anda

Jangan pernah menyimpan atau mengirimkan sandi dalam teks biasa. Pastikan untuk menggunakan salt dan hash sandi—dan jangan mencoba membuat algoritma hashing Anda sendiri.

Menawarkan autentikasi multi-faktor, terutama jika Anda menyimpan data pribadi atau sensitif. Praktik terbaik OTP SMS dan Mengaktifkan Autentikasi 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 dibobol, dan sarankan pengguna Anda mengisi sandi baru yang berbeda, atau peringatkan mereka jika sandi mereka dibobol.

Membantu pengguna login

Lihat cara membuat formulir login untuk memastikan pengguna dapat login ke situs Anda.

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

  • Ukuran target ketuk tombol minimal 48 piksel.
  • Ukuran font-size elemen formulir Anda cukup besar (20px adalah ukuran yang tepat di perangkat seluler).
  • Ada cukup ruang (margin) di antara kontrol formulir, dan input 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" untuk kolom email guna menampilkan keyboard virtual yang sesuai di perangkat seluler.

Gunakan atribut required untuk kolom email dan sandi Anda sehingga Anda dapat memperingatkan 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. Membantu pengguna memasukkan sandi mereka, dengan menampilkan <button> untuk mengalihkan visibilitas teks yang dimasukkan.

Pelajari lebih lanjut cara menerapkan pengungkapan sandi <button>.

Pastikan formulir login dan pendaftaran Anda dapat digunakan

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

Pastikan formulir Anda berfungsi di berbagai browser dan platform. Uji formulir Anda pada berbagai ukuran layar, hanya 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 yang Anda simpan menjadi transparan, dan bantu pengguna mendownload semua data pribadi mereka kapan saja. Pastikan pengguna dapat menghapus akun mereka jika mereka menginginkannya. Fitur pengelolaan akun seperti ini mungkin merupakan persyaratan hukum di beberapa wilayah.

Memastikan pengguna dapat memperbarui sandi mereka

Mempermudah pengguna memperbarui sandi mereka.

Meminta sandi saat ini kepada pengguna sebelum mengubahnya, dan mengirim 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.

Resource