Desain Login dan Pendaftaran Seluler: Buat Langkah Akun Terasa Jelas
Panduan praktis desain login dan pendaftaran seluler, mulai dari menentukan kapan akun diperlukan hingga membuat formulir yang mudah diperbaiki dan jalur pemulihan yang berguna.
Layar login adalah antarmuka kecil dengan dampak besar: layar itu dapat membantu seseorang melanjutkan tugas, atau menghalanginya sebelum ia memahami mengapa akun diperlukan. Desain akun seluler yang baik dimulai dengan memperlakukan autentikasi sebagai bagian dari perjalanan produk, bukan gerbang yang harus dilewati setiap orang saat aplikasi dibuka.
Alur tersebut harus membuat tujuan dan pilihannya mudah dipahami, hanya meminta informasi yang dibutuhkan saat itu, dan memberi jalan keluar yang tenang ketika terjadi masalah. Detailnya penting bagi pengunjung pertama kali maupun pengguna lama yang mungkin lupa metode masuk yang mereka gunakan.
Poin utama
- Mintalah akun pada titik bermakna pertama ketika akun memberikan manfaat jelas atau benar-benar diperlukan.
- Jelaskan setiap opsi masuk dengan bahasa yang dikenal dan bedakan jalur akun baru dari akses pengguna lama.
- Jaga formulir tetap terfokus, beri label kolom dengan jelas, serta biarkan pengelola kata sandi dan fungsi tempel bekerja sebagaimana mestinya.
- Tampilkan kesalahan dalam teks beserta langkah berikutnya yang berguna, pertahankan input yang valid, dan tawarkan pemulihan tanpa menyalahkan pengguna.
Pilih saat ketika akun mulai berguna
Mulailah dari pekerjaan yang ingin dilakukan seseorang. Jika pengalaman inti dapat berjalan tanpa akun, biarkan orang menjelajah terlebih dahulu dan mintalah mereka masuk ketika mencapai fitur yang memerlukan preferensi tersimpan, akses lintas perangkat, kolaborasi, atau transaksi. Human Interface Guidelines Apple menyarankan agar permintaan masuk ditunda bila memungkinkan dan manfaatnya dijelaskan ketika akun diperlukan.
Permintaan yang muncul sesuai konteks lebih mudah dipahami daripada penghalang saat aplikasi dibuka. Misalnya, aplikasi membaca dapat membiarkan seseorang menjelajahi judul, lalu memintanya membuat akun ketika ia memilih untuk menyinkronkan daftar bacaan. Jika pembuatan akun penting sejak awal, jelaskan alasannya sebelum menampilkan kolom. Buat penjelasan yang konkret dan sepadan: “Buat akun untuk menyimpan proyek Anda dan membukanya di perangkat lain” lebih berguna daripada “Bergabung dengan komunitas kami.”
- Pisahkan informasi wajib dari detail profil opsional.
- Untuk checkout sebagai tamu atau tugas sekali pakai, pertimbangkan apakah pembuatan akun dapat menunggu sampai manfaat langsung diberikan.
- Setelah autentikasi berhasil, bawa orang kembali ke tindakan yang ingin mereka selesaikan.
Buat pilihan masuk jelas dan mudah dikenali
Seseorang harus dapat mengetahui apakah ia sedang membuat akun atau kembali ke akun yang ada. Beri kedua jalur label yang berbeda, buat tindakan utama jelas secara visual, dan tempatkan metode alternatif agar dapat dibandingkan tanpa memenuhi layar. Gunakan nama penyedia dan tampilan tombol yang disetujui platform bila relevan; label umum “Lanjutkan” saja tidak menjelaskan apa yang terjadi berikutnya.
Tawarkan hanya metode yang didukung dan dapat dipelihara produk. Email, passkey, atau opsi identitas platform dapat cocok untuk audiens berbeda. Sajikan sebagai pilihan, bukan klaim bahwa satu metode selalu paling mudah atau paling aman. Jelaskan informasi tambahan apa pun yang diwajibkan.
Pengguna lama mungkin tidak ingat metode masuknya. Buat pemulihan dan metode masuk alternatif mudah ditemukan, serta jelaskan apa yang harus dilakukan jika suatu email terkait dengan metode lain. Panduan penautan akun dapat membantu orang mempertahankan akses ke akun yang sudah ada.
Jaga formulir tetap terfokus dan kompatibel dengan alat yang digunakan orang
Mintalah hanya kolom yang diperlukan untuk membuat atau mengakses akun. Gunakan label yang terus terlihat alih-alih mengandalkan teks placeholder sebagai satu-satunya label, pilih jenis input dan papan ketik yang sesuai, serta perjelas tindakan berikutnya. Jika pendaftaran memerlukan beberapa informasi, kelompokkan kolom terkait dan tunda preferensi opsional sampai orang masuk ke produk.
Autentikasi harus bekerja dengan pengisian otomatis dan pengelola kata sandi. Gunakan nama dan semantik kolom standar, serta hindari perilaku khusus yang menghalangi pengisian kredensial. Jangan blokir penempelan kata sandi: orang mungkin menggunakan pengelola kata sandi atau alat lain. Panduan WCAG secara khusus menyebut izin bagi peramban dan pengelola kata sandi pihak ketiga untuk mengisi kolom login.
Perilaku dapat berbeda antarperangkat dan pengelola kata sandi, jadi periksa alur pada platform yang didukung dan izinkan perbaikan manual. Setelah percobaan gagal, pertahankan nilai yang berguna dan tidak sensitif seperti alamat email bila memungkinkan.
- Gunakan label yang terlihat seperti “Alamat email” dan label kata sandi yang jelas.
- Izinkan orang menampilkan atau memeriksa kata sandi bila sesuai, tanpa menjadikan kontrol itu satu-satunya cara memperbaiki entri.
- Letakkan tombol utama dekat kolom dan beri label yang spesifik terhadap tindakan, seperti “Buat akun” atau “Masuk.”
Rancang untuk kesalahan, pemulihan, dan kunjungan berikutnya
Pesan kesalahan yang berguna menunjukkan kolom atau langkah yang gagal dalam teks dan memberi tahu cara melanjutkan. “Terjadi kesalahan” tidak cukup ketika format email tidak valid atau kolom kosong. Kriteria Keberhasilan WCAG 2.2 3.3.1 mengharuskan kesalahan input yang terdeteksi diidentifikasi dan dijelaskan dalam teks; warna atau ikon tidak boleh menjadi satu-satunya penyampai pesan.
Gunakan bahasa netral dan tempatkan petunjuk yang spesifik untuk kolom di dekat kolom tersebut. Misalnya, contoh teks hipotetis untuk alamat yang salah format dapat berbunyi: “Masukkan alamat email dengan format [email protected].” Untuk kegagalan masuk, produk dapat mengatakan: “Kami tidak dapat memasukkan Anda dengan detail tersebut. Periksa email dan kata sandi, atau atur ulang kata sandi Anda.” Hindari mengungkap informasi akun yang sensitif dalam pesan kesalahan; pilih redaksi yang sesuai dengan kebutuhan privasi dan pencegahan penyalahgunaan produk.
Jelaskan apa yang terjadi setelah seseorang meminta pengaturan ulang, sediakan jalan kembali ke halaman masuk, dan bantu mereka menemukan metode yang pernah dipakai. Pada kunjungan berikutnya, tampilkan status sudah masuk dengan jelas dan berikan jalur ke pengaturan akun, keluar, dan bantuan. Jika akun dapat dibuat dalam aplikasi, buat penghapusan akun mudah ditemukan.
- Hubungkan kesalahan dengan kolom yang dimaksud dan pastikan dapat dipahami tanpa hanya mengandalkan warna.
- Tempatkan tindakan pemulihan dekat formulir masuk dan hindari mengharuskan pengguna mengulang dari awal tanpa alasan.
- Tinjau status pengguna baru dan pengguna lama, termasuk alamat email yang berubah dan metode masuk yang tidak tersedia.
Tinjauan alur akun yang praktis
Telusuri alur sebagai orang baru, pengguna lama, dan seseorang yang sedang memulihkan akses. Periksa layar dalam konteksnya. Pustaka pola seluler dapat membantu tim membandingkan bagaimana formulir mengatur input, label, dan tindakan.
- Dapatkah orang mencapai manfaat produk sebelum masuk ketika akun tidak diperlukan?
- Apakah layar menjelaskan mengapa akun diperlukan dan informasi apa yang wajib diberikan?
- Dapatkah seseorang membedakan pendaftaran, masuk, metode alternatif, dan pemulihan akun?
- Apakah label kolom tetap terlihat, dan dapatkah pengisian otomatis serta tempel mengisi kredensial?
- Apakah kesalahan menyebutkan masalah dalam teks, mempertahankan input yang berguna, dan menyarankan langkah berikutnya?
- Setelah berhasil, apakah orang kembali ke tugas yang semula dimulai?
Pertanyaan umum
Haruskah aplikasi seluler mewajibkan akun sebelum orang dapat menjelajah?
Hanya jika fungsi inti benar-benar memerlukan akun. Jika orang dapat menjelajah atau mencoba produk terlebih dahulu, biarkan mereka melakukannya dan minta mereka masuk ketika hal itu memberi manfaat jelas atau diperlukan untuk tindakan tertentu.
Haruskah kolom kata sandi mengizinkan tempel dan pengisian otomatis oleh pengelola kata sandi?
Ya. Gunakan label dan semantik kolom yang mudah dikenali, serta jangan blokir tempel atau pengisian otomatis. Fitur-fitur ini membantu orang memakai alat kredensial yang mereka pilih, meskipun perilakunya dapat berbeda antarperangkat dan pengelola kata sandi; karena itu, periksa alurnya pada platform yang didukung.
Apa yang harus disertakan dalam pesan kesalahan login?
Jelaskan masalah dalam teks, tunjukkan kolom atau langkah yang terdampak, dan tawarkan tindakan berikutnya yang praktis. Gunakan bahasa netral dan hindari mengungkap detail akun yang sensitif.
