Praktik terbaik formulir pendaftaran

Bantu pengguna Anda mendaftar, login, dan mengelola detail akun mereka tanpa repot.

Sam Dutton

Jika pengguna perlu login ke situs Anda, desain formulir pendaftaran yang baik sangatlah penting. Hal ini terutama berlaku bagi orang yang memiliki koneksi buruk, menggunakan ponsel, sedang terburu-buru, atau sedang stres. Formulir pendaftaran yang tidak dirancang dengan baik akan mendapatkan rasio pantulan yang tinggi. Setiap pantulan bisa berarti pengguna yang hilang dan tidak puas—bukan hanya peluang pendaftaran yang terlewat.

Berikut adalah contoh formulir pendaftaran yang sangat sederhana yang menunjukkan semua praktik terbaik:

Checklist

Sebaiknya hindari login

Sebelum menerapkan formulir pendaftaran dan meminta pengguna membuat akun di situs Anda, pertimbangkan apakah Anda benar-benar perlu melakukannya atau tidak. Sedapat mungkin, Anda harus menghindari pembatasan fitur di balik login.

Formulir pendaftaran terbaik bukanlah formulir pendaftaran.

Dengan meminta pengguna untuk membuat akun, Anda datang di antara mereka dan apa yang ingin mereka capai. Anda meminta bantuan, dan meminta pengguna untuk memercayai Anda dengan data pribadi. Setiap sandi dan item data yang Anda simpan membawa "utang data" privasi dan keamanan, sehingga menjadi biaya dan kewajiban bagi situs Anda.

Jika alasan utama Anda meminta pengguna membuat akun adalah untuk menyimpan informasi di antara navigasi atau sesi penjelajahan, pertimbangkan untuk menggunakan penyimpanan sisi klien. Untuk situs belanja, memaksa pengguna membuat akun untuk melakukan pembelian disebut sebagai alasan utama pengabaian keranjang belanja. Anda harus menjadikan checkout tanpa login sebagai default.

Buat proses login yang jelas

Perjelas tentang cara membuat akun di situs Anda, misalnya dengan tombol Login atau Login di kanan atas halaman. Hindari penggunaan ikon yang ambigu atau kata-kata yang tidak jelas ("Ayo bergabung!", "Bergabunglah bersama kami") dan jangan sembunyikan login di menu navigasi. Pakar kegunaan Steve Krug meringkas pendekatan terhadap kegunaan situs ini: Jangan buat saya berpikir! Jika Anda perlu meyakinkan orang lain di tim web Anda, gunakan analisis untuk menunjukkan dampak dari berbagai opsi.

Dua screenshot situs e-commerce mockup yang dilihat pada ponsel Android. Diagram di sebelah kiri menggunakan ikon untuk link login yang agak ambigu; diagram di sebelah kanan hanya menampilkan 'Login'
Buat proses login yang jelas. Ikon mungkin ambigu, tetapi tombol atau link Login terlihat jelas.
Screenshot login untuk Gmail: satu halaman, yang menampilkan tombol Login, saat diklik akan mengarah ke formulir yang juga memiliki link Buat akun.
Halaman login Gmail memiliki link untuk membuat akun.
Pada ukuran jendela yang lebih besar dari yang ditampilkan di sini, Gmail akan menampilkan link Login dan tombol Buat akun.

Pastikan Anda menautkan akun untuk pengguna yang mendaftar melalui penyedia identitas seperti Google dan yang juga mendaftar menggunakan email dan sandi. Hal ini mudah dilakukan jika Anda dapat mengakses alamat email pengguna dari data profil dari penyedia identitas, dan mencocokkan kedua akun tersebut. Kode di bawah menunjukkan cara mengakses data email untuk pengguna yang Login dengan Google.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Perjelas cara mengakses detail akun

Setelah pengguna login, perjelas cara mengakses detail akun. Secara khusus, jelaskan cara mengubah atau mereset sandi.

Memotong kekacauan formulir

Dalam alur pendaftaran, tugas Anda adalah meminimalkan kerumitan dan menjaga fokus pengguna. Singkirkan hal yang tidak penting. Ini bukan waktunya untuk mengalihkan gangguan dan godaan!

Jangan mengalihkan perhatian pengguna agar tidak menyelesaikan pendaftaran.

Saat mendaftar, minta sesedikit mungkin. Kumpulkan data pengguna tambahan (seperti nama dan alamat) hanya jika diperlukan, dan saat pengguna melihat manfaat yang jelas dari penyediaan data tersebut. Perlu diingat bahwa setiap item data yang Anda komunikasikan dan simpan akan menimbulkan biaya dan kewajiban.

Jangan melipatgandakan input Anda hanya untuk memastikan pengguna mendapatkan detail kontak mereka dengan benar. Tindakan ini akan memperlambat penyelesaian formulir dan tidak berfungsi jika kolom formulir diisi otomatis. Sebagai gantinya, kirim kode konfirmasi kepada pengguna setelah mereka memasukkan detail kontak, lalu lanjutkan dengan pembuatan akun setelah mereka merespons. Pola pendaftaran ini umum dilakukan: pengguna sudah terbiasa dengan pola tersebut.

Sebaiknya pertimbangkan untuk login tanpa sandi dengan mengirimkan kode kepada pengguna setiap kali mereka login di perangkat atau browser baru. Situs seperti Slack dan Medium menggunakan versi ini.

Login tanpa sandi di medium.com.

Seperti halnya login gabungan, fitur ini memiliki manfaat tambahan, yaitu Anda tidak perlu mengelola sandi pengguna.

Pertimbangkan durasi sesi

Apa pun pendekatan yang dilakukan untuk identitas pengguna, Anda harus membuat keputusan yang cermat tentang durasi sesi: berapa lama pengguna tetap login, dan apa yang mungkin menyebabkan Anda logout.

Pertimbangkan apakah pengguna menggunakan perangkat seluler atau desktop, dan apakah mereka berbagi di desktop, atau perangkat berbagi.

Membantu pengelola sandi menyarankan dan menyimpan sandi dengan aman

Anda dapat membantu pengelola sandi browser bawaan dan pihak ketiga untuk menyarankan dan menyimpan sandi, sehingga pengguna tidak perlu memilih, mengingat, atau mengetik sandi mereka sendiri. Pengelola sandi berfungsi dengan baik di browser modern, menyinkronkan akun di berbagai perangkat, di berbagai aplikasi web dan khusus platform, serta untuk perangkat baru.

Oleh karena itu, penerapan kode formulir pendaftaran dengan benar sangatlah penting, khususnya penggunaan nilai pelengkapan otomatis yang benar. Untuk formulir pendaftaran, gunakan autocomplete="new-password" untuk sandi baru, dan tambahkan nilai pelengkapan otomatis yang benar ke kolom formulir lainnya jika memungkinkan, seperti autocomplete="email" dan autocomplete="tel". Anda juga dapat membantu pengelola sandi menggunakan nilai name dan id yang berbeda dalam formulir pendaftaran dan login, untuk elemen form itu sendiri, serta elemen input, select, dan textarea.

Anda juga harus menggunakan atribut type yang sesuai untuk menyediakan keyboard yang tepat pada perangkat seluler dan mengaktifkan validasi bawaan dasar oleh browser. Anda dapat mengetahui selengkapnya di Praktik terbaik pembayaran dan formulir alamat.

Memastikan pengguna memasukkan sandi yang aman

Mengaktifkan pengelola sandi untuk menyarankan sandi adalah opsi terbaik, dan Anda harus mendorong pengguna untuk menerima sandi kuat yang disarankan oleh browser dan pengelola browser pihak ketiga.

Namun, banyak pengguna ingin memasukkan sandi mereka sendiri, jadi Anda perlu menerapkan aturan untuk kekuatan sandi. National Institute of Standards and Technology Amerika Serikat menjelaskan cara menghindari sandi yang tidak aman.

Jangan izinkan sandi yang telah dibobol

Apa pun aturan yang Anda pilih untuk sandi, Anda tidak boleh mengizinkan sandi yang telah terekspos dalam pelanggaran keamanan.

Setelah pengguna memasukkan sandi, Anda harus memastikan bahwa sandi tersebut bukan sandi yang telah disusupi. Situs Have I Been Pwned menyediakan API untuk memeriksa sandi, atau Anda dapat menjalankannya sendiri sebagai layanan.

Dengan Pengelola Sandi Google, Anda juga dapat memeriksa apakah sandi Anda yang ada telah disusupi.

Jika Anda menolak sandi yang disarankan pengguna, beri tahu mereka alasan penolakannya secara khusus. Tampilkan masalah secara inline dan jelaskan cara memperbaikinya, segera setelah pengguna memasukkan nilai, bukan setelah mereka mengirimkan formulir pendaftaran dan harus menunggu respons dari server Anda.

Jelaskan alasan sandi ditolak.

Jangan larang penempelan sandi

Beberapa situs tidak mengizinkan teks ditempelkan ke input sandi.

Melarang penempelan sandi akan mengganggu pengguna, mendorong sandi yang mudah diingat (sehingga mungkin lebih mudah dibobol), dan, menurut organisasi seperti National Cyber Security Center Inggris Raya, sebenarnya dapat mengurangi keamanan. Pengguna hanya mengetahui bahwa penempelan tidak diizinkan setelah mereka mencoba menempelkan sandi, jadi melarang penempelan sandi tidak menghindari kerentanan papan klip.

Jangan pernah menyimpan atau mengirimkan sandi dalam teks biasa

Pastikan untuk salt dan hashing sandi—dan jangan mencoba menemukan algoritma hashing Anda sendiri.

Jangan paksa pembaruan sandi

Jangan paksa pengguna untuk memperbarui sandi mereka secara semaunya.

Memaksa pembaruan sandi dapat memakan biaya besar bagi departemen IT, mengganggu pengguna, dan tidak berdampak banyak pada keamanan. Mereka juga mendorong pengguna untuk menggunakan sandi yang tidak aman dan mudah diingat, atau menyimpan catatan fisik sandi.

Daripada memaksa pembaruan sandi, Anda sebaiknya memantau aktivitas akun yang tidak biasa dan memperingatkan pengguna. Jika memungkinkan, Anda juga harus memantau sandi yang telah dibobol karena adanya pelanggaran data.

Anda juga harus memberi pengguna akses ke histori login akun mereka, yang menunjukkan lokasi dan waktu terjadinya login.

Halaman aktivitas akun Gmail
Halaman aktivitas akun Gmail.

Memudahkan Anda untuk mengubah atau mereset sandi

Jelaskan kepada pengguna tempat dan cara memperbarui sandi akun mereka. Di beberapa situs, hal ini sangat sulit.

Anda juga harus memudahkan pengguna untuk mereset sandi mereka jika lupa. Project Open Web Application Security memberikan panduan mendetail tentang cara menangani sandi yang hilang.

Untuk menjaga keamanan bisnis dan pengguna Anda, sangat penting untuk membantu pengguna mengubah sandi mereka jika mereka menemukan bahwa sandi telah dibobol. Untuk mempermudah, sebaiknya tambahkan URL /.well-known/change-password ke situs Anda yang mengalihkan ke halaman pengelolaan sandi Anda. Dengan begitu, pengelola sandi dapat mengarahkan pengguna langsung ke halaman tempat mereka dapat mengubah sandi untuk situs Anda. Fitur ini kini diterapkan di Safari, Chrome, dan akan hadir di browser lain. Bantu pengguna mengubah sandi secara mudah dengan menambahkan URL terkenal untuk mengubah sandi menjelaskan cara menerapkannya.

Anda juga harus membuatnya mudah bagi pengguna untuk menghapus akun mereka jika itu yang mereka inginkan.

Tawarkan login melalui penyedia identitas pihak ketiga

Banyak pengguna lebih memilih login ke situs menggunakan alamat email dan formulir pendaftaran sandi. Namun, Anda juga harus mengizinkan pengguna untuk login melalui penyedia identitas pihak ketiga, yang juga dikenal sebagai login gabungan.

Halaman login WordPress
Halaman login WordPress, dengan opsi login Google dan Apple.

Pendekatan ini memiliki beberapa keuntungan. Untuk pengguna yang membuat akun menggunakan login gabungan, Anda tidak perlu meminta, berkomunikasi, atau menyimpan sandi.

Anda mungkin juga dapat mengakses informasi profil terverifikasi tambahan dari login gabungan, seperti alamat email, yang berarti pengguna tidak perlu memasukkan data tersebut dan Anda tidak perlu melakukan verifikasi sendiri. Login gabungan juga dapat memudahkan pengguna saat mereka mendapatkan perangkat baru.

Mengintegrasikan Login dengan Google ke dalam aplikasi web akan menjelaskan cara menambahkan login gabungan ke opsi pendaftaran Anda. Ada banyak platform identitas lainnya yang tersedia.

Memudahkan beralih akun

Banyak pengguna berbagi perangkat dan berganti akun menggunakan browser yang sama. Baik pengguna mengakses login gabungan atau tidak, Anda harus mempermudah peralihan akun.

Gmail, menunjukkan pengalihan akun
Pengalihan akun di Gmail.

Pertimbangkan untuk menawarkan autentikasi multi-faktor

Otentikasi multi-faktor berarti memastikan bahwa pengguna memberikan otentikasi dengan lebih dari satu cara. Misalnya, selain mengharuskan pengguna menyetel sandi, Anda juga dapat menerapkan verifikasi menggunakan kode sandi sekali pakai yang dikirim melalui email atau SMS, atau menggunakan kode sekali pakai berbasis aplikasi, kunci keamanan, atau sensor sidik jari. Praktik terbaik OTP SMS dan Mengaktifkan Autentikasi yang Kuat dengan WebAuthn menjelaskan cara menerapkan autentikasi multi-faktor.

Tentunya Anda harus menawarkan (atau menerapkan) autentikasi multi-faktor jika situs Anda menangani informasi pribadi atau sensitif.

Hati-hati dengan nama pengguna

Jangan bersikeras menggunakan nama pengguna kecuali Anda memerlukannya. Izinkan pengguna untuk mendaftar dan login hanya dengan alamat email (atau nomor telepon) dan sandi, atau login gabungan jika diinginkan. Jangan memaksa mereka untuk memilih dan mengingat nama pengguna.

Jika situs Anda memerlukan nama pengguna, jangan terapkan aturan yang tidak wajar pada nama tersebut, dan jangan mencegah pengguna memperbarui nama pengguna mereka. Di backend, Anda harus membuat ID unik untuk setiap akun pengguna, bukan ID berdasarkan data pribadi seperti nama pengguna.

Pastikan juga menggunakan autocomplete="username" untuk nama pengguna.

Uji di berbagai perangkat, platform, browser, dan versi

Uji formulir pendaftaran di platform yang paling umum bagi pengguna Anda. Fungsi elemen formulir dapat bervariasi, dan perbedaan ukuran area pandang dapat menyebabkan masalah tata letak. BrowserStack memungkinkan pengujian gratis untuk project open source di berbagai perangkat dan browser.

Menerapkan analisis dan Pemantauan Pengguna Nyata

Anda memerlukan data lapangan dan data lab untuk memahami pengalaman pengguna dalam mengisi formulir pendaftaran. Analytics dan Real User Monitoring (RUM) memberikan data untuk pengalaman pengguna yang sebenarnya, seperti waktu yang dibutuhkan untuk memuat halaman pendaftaran, komponen UI yang berinteraksi (atau tidak) dengan pengguna, dan waktu yang dibutuhkan pengguna untuk menyelesaikan pendaftaran.

Perubahan kecil dapat membuat perbedaan besar pada rasio penyelesaian formulir pendaftaran. Analisis dan RUM memungkinkan Anda mengoptimalkan dan memprioritaskan perubahan, serta memantau situs Anda untuk menemukan masalah yang tidak muncul oleh pengujian lokal.

Terus belajar

Foto oleh @ecowarriorprincess di Unsplash.