Praktik terbaik formulir pendaftaran

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

Sam Dutton

Jika pengguna perlu masuk ke situs Anda, maka desain formulir pendaftaran yang baik sangat penting. Terutama untuk orang-orang dengan koneksi internet yang buruk, di perangkat seluler, di terburu-buru, atau merasa stres. Formulir pendaftaran yang tidak dirancang dengan baik akan mendapatkan rasio pantulan yang tinggi. Setiap pantulan dapat berarti pengguna yang hilang dan tidak puas—bukan hanya pendaftaran yang terlewat peluang.

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

Checklist

Jangan login jika Anda bisa

Sebelum Anda menerapkan formulir pendaftaran dan meminta pengguna untuk membuat akun di situs Anda, pertimbangkan apakah Anda benar-benar membutuhkannya. Sedapat mungkin Anda harus menghindari pembatasan fitur yang hanya dapat diakses dengan login.

Formulir pendaftaran yang paling baik adalah tanpa formulir pendaftaran.

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

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

Buat login lebih jelas

Perjelas cara membuat akun di situs Anda, misalnya dengan Login atau Login di kanan atas halaman. Hindari penggunaan ikon yang ambigu atau kata-kata yang tidak jelas ("Ayo berkontribusi!", "Bergabunglah dengan kami") dan jangan sembunyikan login di menu navigasi. Pakar {i>usability<i} Steve Krug merangkum pendekatan terhadap kegunaan situs ini: Jangan berpikir begitu! Jika Anda ingin meyakinkan orang lain di tim web Anda, gunakan analisis untuk menunjukkan dampak berbagai lainnya.

Dua screenshot situs e-commerce maket yang dilihat di ponsel Android. Ikon di sebelah kiri menggunakan ikon untuk link login yang agak ambigu; yang di sebelah kanan hanya mengatakan &#39;Masuk&#39;
Buat login jadi lebih jelas. Sebuah ikon mungkin ambigu, tetapi Tanda tombol in atau link sudah jelas.
Screenshot login untuk Gmail: satu halaman, menampilkan tombol Login, saat diklik akan mengarahkan 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 menampilkan link Login dan link Buat akun.

Pastikan untuk menautkan akun untuk pengguna yang mendaftar melalui penyedia identitas, seperti Google dan siapa mendaftar juga menggunakan email dan {i>password<i}. 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 ini menunjukkan cara mengakses data email untuk pengguna 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, jelaskan cara mengakses detail akun. Secara khusus, pastikan cara mengubah atau menyetel ulang sandi.

Bentuk potongan yang berantakan

Dalam alur pendaftaran, tugas Anda adalah meminimalkan kerumitan dan menjaga fokus pengguna. Mengatur ketidakteraturan. Ini bukan waktunya untuk gangguan dan godaan!

Jangan mengalihkan perhatian pengguna dalam menyelesaikan pendaftaran.

Saat mendaftar, mintalah sesedikit mungkin. Mengumpulkan data pengguna tambahan (seperti nama dan alamat) hanya saat diperlukan, dan ketika 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. Memperlambat pengisian formulir dan tidak masuk akal jika kolom formulir diisi otomatis. Sebagai gantinya, kirimkan konfirmasi kode kepada pengguna setelah mereka memasukkan detail kontak, lalu lanjutkan pembuatan akun begitu mereka merespons. Ini adalah pola pendaftaran yang umum: pengguna sudah terbiasa dengannya.

Sebaiknya pertimbangkan untuk login tanpa sandi, yaitu dengan mengirimkan kode kepada pengguna setiap kali mereka login 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 karena Anda tidak perlu mengelola sandi pengguna.

Pertimbangkan durasi sesi

Apa pun pendekatan yang Anda ambil terhadap identitas pengguna, Anda harus membuat keputusan yang cermat terkait durasi: berapa lama pengguna tetap masuk, dan apa yang mungkin menyebabkan Anda membuat mereka keluar.

Pertimbangkan apakah pengguna menggunakan perangkat seluler atau desktop, dan apakah yang mereka bagikan di desktop, atau perangkat yang sama.

Membantu pengelola sandi menyarankan dan menyimpan sandi dengan aman

Anda dapat membantu pengelola sandi browser pihak ketiga dan bawaan menyarankan dan menyimpan sandi, sehingga pengguna tidak perlu memilih, mengingat, atau mengetik {i>password<i} mereka sendiri. Pengelola {i>password<i} bekerja dengan baik dalam modern, menyinkronkan akun di seluruh perangkat, di seluruh aplikasi khusus platform dan aplikasi web—dan untuk perangkat baru.

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

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

Pastikan pengguna memasukkan sandi yang aman

Mengaktifkan pengelola sandi untuk menyarankan sandi adalah opsi terbaik, dan Anda harus menganjurkan pengguna untuk menyetujui 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 sandi kekuatan Anda. National Institute of Standards and Technology Amerika Serikat menjelaskan cara menghindari sandi yang tidak aman.

Jangan izinkan sandi yang telah dibobol

Aturan apa pun yang Anda pilih untuk {i>password<i}, Anda tidak boleh mengizinkan {i>password<i} yang telah diekspos pelanggaran keamanan.

Setelah pengguna memasukkan {i>password<i}, Anda perlu memeriksa bahwa itu bukan {i>password<i} yang sudah disusupi. Situs Memiliki Saya Been Pwned menyediakan API untuk sandi memeriksanya, atau Anda dapat menjalankannya sebagai layanan sendiri.

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

Jika Anda menolak sandi yang diajukan pengguna, beri tahu pengguna tersebut alasan penolakannya. Menampilkan masalah secara inline dan menjelaskan cara memperbaikinya, segera setelah pengguna memasukkan nilai—bukan setelah mereka mengirimkan formulir pendaftaran dan harus menunggu respons dari server Anda.

Jelaskan mengapa sandi ditolak.

Jangan larang penempelan sandi

Beberapa situs tidak mengizinkan teks ditempelkan ke input sandi.

Melarang penempelan sandi mengganggu pengguna, mendorong penggunaan {i>password<i} yang mudah diingat (dan karenanya mungkin lebih mudah untuk disusupi) dan, menurut organisasi seperti UK National Pusat Keamanan Cyber, dapat mengurangi keamanan. Pengguna hanya mengetahui bahwa menempelkan tidak diizinkan setelah mereka mencoba menempelkan sandi, jadi melarang penempelan sandi tidak menghindari kerentanan papan klip.

Jangan pernah menyimpan atau mengirimkan {i>password<i} dalam teks biasa

Pastikan untuk menggaram dan melakukan hashing pada sandi—dan jangan mencoba membuat algoritma hashing Anda sendiri.

Jangan paksa pembaruan sandi

Jangan paksa pengguna untuk memperbarui sandi secara acak.

Memaksa pembaruan sandi dapat mahal bagi departemen IT, mengganggu pengguna, dan tidak memerlukan banyak terhadap keamanan. Hal ini juga mungkin dapat mendorong orang menggunakan {i>password<i} yang tidak aman dan mudah diingat, atau menyimpan catatan fisik {i>password<i}.

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

Anda juga harus memberi pengguna akses ke histori login akun mereka, yang menunjukkan tempat dan kapan {i>login<i} terjadi.

Halaman aktivitas akun Gmail
Halaman aktivitas akun Gmail.

Permudah cara mengubah atau mereset sandi

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

Tentu saja, Anda juga harus memudahkan pengguna untuk mereset sandi jika mereka lupa. Project Keamanan Aplikasi Web Terbuka memberikan panduan terperinci tentang cara menangani masalah yang hilang sandi.

Untuk menjaga keamanan bisnis dan pengguna Anda, penting untuk membantu pengguna mengubah {i>password<i} jika mereka menemukan bahwa telah disusupi. Untuk memudahkannya, Anda harus menambahkan /.well-known/change-password URL ke yang mengalihkan ke halaman pengelolaan sandi Anda. Hal ini memungkinkan pengelola sandi untuk menavigasi pengguna langsung ke halaman tempat mereka dapat mengubah sandi untuk situs Anda. Fitur ini kini diterapkan di Safari, Chrome, dan akan tersedia di browser lain. Membantu pengguna mengubah sandi secara mudah dengan menambahkan URL yang dikenal untuk mengubah sandi akan menjelaskan cara menerapkan hal ini.

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 yang memilih untuk masuk ke situs web menggunakan formulir pendaftaran alamat email dan 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 keunggulan. Untuk pengguna yang membuat akun menggunakan login gabungan, Anda tidak perlu meminta, mengkomunikasikan, atau menyimpan {i>password<i}.

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

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

Memudahkan beralih akun

Banyak pengguna berbagi perangkat dan berganti akun menggunakan browser yang sama. Apakah pengguna mengakses login gabungan atau tidak, Anda harus membuat pengalihan akun lebih mudah.

Gmail, yang menunjukkan peralihan akun
Pengalihan akun di Gmail.

Pertimbangkan untuk menawarkan autentikasi multi-faktor

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

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

Menjaga penggunaan nama pengguna

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

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

Pastikan juga Anda 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 membutuhkan data lapangan serta data lab untuk memahami bagaimana pengalaman pengguna pada formulir pendaftaran Anda. Analytics dan Pemantauan Pengguna Nyata (RUM) memberikan data sesuai pengalaman pengguna yang sebenarnya, seperti lamanya waktu yang dibutuhkan halaman pendaftaran pemuatan komponen UI, komponen UI mana yang berinteraksi dengan pengguna (atau tidak) dan berapa lama waktu yang dibutuhkan pengguna untuk menyelesaikan pendaftaran.

Perubahan kecil dapat berdampak besar pada rasio penyelesaian formulir pendaftaran. Analytics dan RUM memungkinkan Anda mengoptimalkan dan memprioritaskan perubahan, serta memantau situs untuk menemukan masalah yang terekspos oleh pengujian lokal.

Terus belajar

Foto oleh @ecowarriorprincess di Unsplash.