Login & Register

Login & Register merupakan pola antarmuka yang digunakan untuk autentikasi pengguna, baik untuk masuk ke sistem maupun membuat akun baru. Komponen ini memastikan bahwa pengguna dapat mengakses sistem dengan aman dan terverifikasi.

Pola ini dirancang agar mudah dipahami dan intuitif, dengan fokus pada alur interaksi yang efisien dan tampilan yang sederhana.

Penggunaan

Gunakan pola Login & Register pada halaman autentikasi untuk memfasilitasi proses masuk (login) atau pendaftaran akun (register).

Tampilan ini membantu pengguna melakukan proses verifikasi identitas sebelum mengakses sistem.

Pada implementasinya, pola ini biasanya menampilkan form input utama (email dan kata sandi), tombol aksi (CTA) seperti Masuk atau Daftar, serta elemen tambahan seperti Captcha atau tombol SSO (Single Sign-On) jika sistem mendukung login lintas platform.

Anatomi

Kategori

SSO Button

Digunakan ketika sistem mendukung login atau register dengan akun lain, misalnya Google atau Microsoft.

Inline Button

Digunakan untuk menampilkan tombol atau tautan kecil di bawah form, seperti teks "Sudah punya akun? Login".

Cara Penggunaan yang Disarankan

✅ Disarankan

Tampilkan pesan error dan validasi secara spesifik, seperti:

“Email tidak valid.”
“Kata sandi minimal 8 karakter.”

Pesan yang jelas membantu pengguna memahami kesalahan dan memperbaikinya dengan cepat.

✅ Disarankan

Jangan gunakan pesan yang terlalu umum seperti “Terjadi kesalahan.” tanpa penjelasan tambahan.

Pesan seperti ini tidak memberikan konteks atau panduan yang membantu pengguna melakukan perbaikan.

Penerapan

Header

Tampilkan logo brand, judul section (seperti Login atau Register), dan deskripsi singkat yang menjelaskan konteks halaman. Elemen ini membantu pengguna mengenali halaman autentikasi dengan cepat.

Form

Gunakan label dan placeholder yang jelas pada setiap kolom input agar pengguna memahami informasi yang perlu diisi. Tambahkan tombol atau tautan "Lupa kata sandi" di bawah kolom Kata Sandi pada halaman Login untuk memudahkan proses pemulihan akun.

Captcha

Tambahkan elemen Captcha jika diperlukan untuk melindungi sistem dari aktivitas otomatis atau serangan bot. Pastikan elemen ini tidak mengganggu alur pengguna saat melakukan login atau registrasi.

Submit Button

Gunakan teks tombol yang ringkas dan relevan untuk aksi pengguna, seperti "Masuk" atau "Daftar". Tambahkan "Optional Button" untuk Single Sign-On (SSO) jika sistem mendukungnya, memberikan alternatif login tanpa harus mengisi form secara manual.

Login

Digunakan untuk autentikasi pengguna yang sudah terdaftar, terdiri atas form input, tombol masuk, serta opsi keamanan seperti Captcha.

Register

Digunakan untuk pembuatan akun baru, menampilkan form input, tombol registrasi, serta tautan untuk pengguna yang sudah memiliki akun.

Spesifikasi