Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Merancang halaman login aplikasi mobile yang jelas dan aman
- Menyusun form pendaftaran (register) yang efisien
- Menerapkan prinsip validasi dan umpan balik pada formulir
- Membuat pola masuk yang mudah diingat dan memberi rasa aman
Capaian Pembelajaran
Mahasiswa mampu mendesain halaman login dan register aplikasi mobile yang ringkas, dengan form yang mudah diisi, indikator keamanan, serta umpan balik validasi yang membantu pengguna menyelesaikan prosesnya.
Peran Halaman Autentikasi
Halaman login dan register adalah pintu masuk pengguna ke aplikasi; kesan pertama yang buruk dapat membuat pengguna berhenti meskipun aplikasinya hebat. Desain harus menampilkan identitas aplikasi secara menarik, menjelaskan data apa yang diminta, dan memberi jaminan bahwa akun pengguna aman. Jaga jumlah langkah seminimal mungkin tanpa mengorbankan keamanan.
Kenali pula mana yang lebih utama bagi aplikasi: jika tujuan utamanya belanja, login diletakkan lebih dominan; jika aplikasi menargetkan pengguna baru, register perlu menonjol. Keseimbangan antara dua pintu masuk ini menentukan kenyamanan pengguna yang sudah maupun belum memiliki akun.
Desain Form Login
Form login umumnya berisi field email atau nomor ponsel, field kata sandi, tombol masuk, tautan lupa kata sandi, serta opsi masuk dengan akun lain. Letakkan judul dan logo di bagian atas, form di tengah, dan tombol utama di area yang mudah dijangkau. Kontras tombol utama terhadap latar perlu kuat agar langsung terlihat oleh mata.
Kata sandi sebaiknya dilengkapi ikon mata untuk menampilkan atau menyembunyikan teks sehingga pengguna dapat memeriksa inputnya. Sertakan tautan pulihkan kata sandi yang jelas. Rancang pula halaman error yang membantu: pesan seperti ‘Email atau kata sandi salah’ harus spesifik dan bernada ramah, bukan hanya menampilkan kode kesalahan teknis.
Desain Form Register
Form register menampilkan data yang diminta saat mendaftar: nama, email atau nomor ponsel, kata sandi serta konfirmasi kata sandi, dan persetujuan atas syarat layanan. Kurangi beban pengguna dengan hanya menanyakan data yang esensial. Tambahkan indikator kekuatan kata sandi bila perlu, serta sertakan tautan ‘Sudah punya akun? Masuk’ bagi pengguna yang kembali.
Validasi langsung saat pengguna meninggalkan kolom (saat focus hilang) jauh lebih membantu daripada menunggu tombol diklik. Tampilkan segera status benar atau salah pada field melalui perubahan warna border dan pesan singkat di bawahnya. Gunakan bahasa yang non-teknis dan berorientasi solusi, misalnya ‘Gunakan minimal 8 karakter’.
Pola Autentikasi Modern
Pertimbangkan menyediakan opsi masuk dengan akun pihak ketiga seperti Google, Apple, atau akun media sosial untuk mempercepat pengguna baru. Opsi ini menampilkan logo sebagai pengenal. Tambahkan pula pola tanpa kata sandi, seperti tautan sekali pakai yang dikirim lewat email atau kode verifikasi ke nomor ponsel. Harus dinilai kapan mekanisme mana yang paling sesuai dengan karakteristik pengguna aplikasi.
Berdasarkan arah keamanan modern, banyak aplikasi menawarkan login biometrik (sidik jari atau wajah) pada perangkat yang mendukung. Desain dapat menampilkan ikon dan penjelasan singkat agar pengguna tahu opsi ini tersedia. Penting untuk menjelaskan manfaat kecepatan saat tetap menyediakan fallback kata sandi bagi perangkat yang tidak mendukung.
Aksesibilitas pada Form
Form harus dapat diisi oleh siapa saja, termasuk pengguna dengan keterbatasan. Pastikan label terhubung dengan kolomnya sehingga pembaca layar dapat mengumumkan dengan benar, kontras teks cukup tinggi, dan target sentuh cukup besar. Pesan kesalahan tidak boleh hanya mengandalkan warna; sertakan teks atau ikon agar dapat dipahami tanpa persepsi warna. Ukuran font pada ponsel perlu diuji dalam kondisi cahaya dan jarak pandang yang nyata.
Perhatikan juga proses lupa kata sandi yang sering menjadi penghambat utama pengguna. Sediakan alur pemulihan yang jelas dan mudah diikuti, dengan instruksi singkat dan tautan kembali ke halaman masuk. Desain yang memperhatikan kebutuhan pemulihan akun menunjukkan kepedulian terhadap pengalaman pengguna secara utuh, bukan hanya pada langkah masuk yang sukses.
Sebagai penutup, bandingkan rancangan login dan register yang dibuat dengan aplikasi yang biasa digunakan sehari-hari. Amati pola yang dipakai, apa yang terasa nyaman, dan apa yang membuat pengguna ragu. Kebiasaan mengamati produk nyata secara kritis memperkaya perbendaharaan pola desain sekaligus menajamkan intuisi profesional.
Langkah Praktik
- Buat dua frame mobile 390×844 untuk login dan register.
- Susun komponen input text dengan label, border, dan state focus.
- Buat tombol masuk dan daftar sebagai komponen yang dapat dipakai ulang.
- Tambahkan halaman state error dan sukses untuk latihan umpan balik.
- Hubungkan alur login menuju homepage aplikasi pada mode prototype.
Penutup dan Tugas Mandiri
Lengkapi kedua halaman dengan elemen merek yang konsisten dan hubungkan dalam prototype aplikasi. Pastikan alur register mengarah ke login atau langsung ke beranda, dan login mengarah ke homepage yang telah dibuat pada pertemuan sebelumnya. Dengan begitu seluruh aplikasi mobile mulai terhubung menjadi satu pengalaman utuh.