Desain login aplikasi mobile yang aman

Desain login aplikasi mobile untuk Indonesia perlu menyediakan input nomor dengan kode negara +62, alur OTP melalui SMS atau WhatsApp, serta layar gagal verifikasi dan pemulihan akun. Karena data akun pengguna termasuk data pribadi, jelaskan tujuan pengumpulan dan penggunaan data sesuai UU PDP No. 27 Tahun 2022.

Poin-poin utama

• •Tampilkan +62 sebagai kode negara yang sudah terpilih, lalu bantu pengguna memasukkan nomor tanpa kebingungan format.
• •Rancang OTP sebagai alur lengkap: pengiriman, pengisian kode, hitung mundur, kirim ulang, kegagalan, dan pemulihan akun.
• •Gunakan WhatsApp sebagai opsi verifikasi bila sesuai sistem layanan, karena kanal ini umum dipakai untuk komunikasi dan notifikasi di Indonesia.
• •Jelaskan data akun yang dikumpulkan dan tujuannya di titik pendaftaran, bukan hanya menyembunyikannya di tautan kebijakan privasi.

Isi halaman ini

• •Checklist 1 — Susun input nomor Indonesia dengan jelas
• •Checklist 2 — Rancang OTP SMS dan WhatsApp sebagai satu alur
• •Checklist 3 — Jelaskan data akun dan siapkan pemulihan
• •Checklist 4 — Uji keadaan gagal sebelum menyerahkan ke pengembangan

Checklist 1 — Susun input nomor Indonesia dengan jelas

Pada layar pertama, jadikan nomor telepon sebagai satu tugas utama. Tampilkan pemilih negara atau prefiks yang sudah terisi +62, karena kode negara Indonesia adalah +62. Jangan meminta pengguna mengetik +62 lagi di dalam kolom nomor; pisahkan prefiks dan kolom nomor agar validasi lebih mudah dipahami.

Gunakan papan angka, label yang tetap terlihat, dan contoh format yang tidak dianggap sebagai isi nyata. Saat pengguna menempel nomor yang diawali 0, 62, atau +62, normalisasikan input di belakang layar bila sistem mendukungnya, lalu tampilkan hasil yang mudah diperiksa sebelum kode dikirim. Jangan menghapus angka secara diam-diam tanpa umpan balik.

Checklist layar:

• •Prefiks +62 terlihat sebelum pengguna mengetik.
• •Tombol lanjut aktif hanya setelah format dapat diproses.
• •Pesan galat menjelaskan tindakan, misalnya: “Periksa kembali nomor Anda.”
• •Tautan kebijakan privasi tersedia dekat tombol lanjut.
• •Jika ada masuk dengan email atau metode lain, tampilkan sebagai alternatif yang setara, bukan mengaburkan tugas utama.

Untuk contoh desain login aplikasi, ukur keberhasilan bukan dari sedikitnya elemen, melainkan dari sedikitnya kesalahan nomor sebelum OTP dikirim.

Checklist 2 — Rancang OTP SMS dan WhatsApp sebagai satu alur

Setelah nomor dikonfirmasi, tampilkan layar OTP yang menyebutkan tujuan pengiriman secara spesifik: “Kami mengirim kode ke +62 …”. Jangan menampilkan nomor lengkap bila perangkat bisa dilihat orang lain. Sediakan enam atau jumlah digit sesuai layanan Anda, fokus otomatis ke kolom kode, indikator waktu tunggu, tombol kirim ulang yang baru aktif setelah jeda, dan cara mengganti nomor.

Di Indonesia, WhatsApp merupakan kanal komunikasi yang umum dipakai untuk notifikasi dan verifikasi. Karena itu, WhatsApp dapat menjadi pilihan kanal OTP selain SMS bila infrastruktur autentikasi layanan mendukungnya. Namun, jangan menjanjikan kode akan selalu tiba lewat WhatsApp. Nyatakan kanal yang dipakai pada saat itu dan sediakan jalur cadangan yang benar-benar tersedia, misalnya SMS atau pemulihan akun.

Rancang juga status yang sering terlewat dalam desain ui aplikasi mobile:

• •Kode salah: beri tahu bahwa kode tidak cocok tanpa menyalahkan pengguna.
• •Kode kedaluwarsa: minta pengguna mengirim kode baru.
• •Batas percobaan: jelaskan kapan pengguna dapat mencoba lagi atau cara mendapatkan bantuan.
• •Pesan tidak masuk: tawarkan kirim ulang dan pemeriksaan nomor.

Jangan meminta OTP, kata sandi, atau PIN melalui kolom chat dukungan. Kode hanya dimasukkan pada layar verifikasi aplikasi.

Checklist 3 — Jelaskan data akun dan siapkan pemulihan

Layar pendaftaran dan login sering menjadi titik pertama pengumpulan data akun. UU PDP No. 27 Tahun 2022 mengatur perlindungan data pribadi, termasuk data akun pengguna. Dalam antarmuka, terjemahkan kewajiban ini menjadi penjelasan yang dapat dibaca sebelum pengguna menekan tombol lanjut: data apa yang diminta, untuk tujuan apa data dipakai, dan ke mana pengguna dapat membuka kebijakan privasi atau menghubungi layanan.

Jangan memakai teks seperti “Dengan lanjut Anda setuju” tanpa konteks. Jika nomor telepon dipakai untuk autentikasi, katakan demikian. Jika email dipakai untuk pemulihan, jelaskan pada saat email diminta. Hindari meminta tanggal lahir, kontak, lokasi, atau data tambahan hanya karena mungkin berguna nanti; minta data tersebut ketika ada kebutuhan fitur yang jelas.

Akhiri alur dengan layar pemulihan akun yang tidak mengungkap apakah suatu nomor atau email terdaftar kepada pihak yang tidak berwenang. Beri pilihan aman seperti verifikasi melalui kanal yang sudah terhubung dan rute bantuan bila pengguna kehilangan akses. Untuk menghasilkan alur ini, minta floow.design membuat layar login, OTP, gagal verifikasi, dan pemulihan akun dalam satu alur. Tinjau perpindahan antar-layar, bukan hanya tampilan masing-masing layar.

Checklist 4 — Uji keadaan gagal sebelum menyerahkan ke pengembangan

Sebelum desain dikunci, uji prototipe dengan nomor Indonesia dalam beberapa keadaan: nomor kosong, angka terlalu pendek, nomor ditempel dengan awalan 0, nomor ditempel dengan +62, OTP salah, OTP kedaluwarsa, dan pengguna yang kembali ke layar sebelumnya untuk mengubah nomor. Setiap keadaan perlu memiliki teks, tombol, dan fokus input yang jelas.

Hindari hanya menguji jalur sukses. Pada login berbasis OTP, kepercayaan pengguna sering hilang ketika kode terlambat, dikirim ke kanal yang tidak mereka harapkan, atau tombol kirim ulang tidak menjelaskan kapan tersedia. Pastikan tombol utama tidak berubah posisi secara mengejutkan saat papan ketik muncul, dan pembaca layar dapat membacakan label nomor, status kode, serta pesan galat.

Checklist serah-terima:

• •Tentukan status layar untuk memuat, berhasil, gagal, dan kedaluwarsa.
• •Tulis teks galat yang dapat dipakai ulang oleh tim produk dan pengembang.
• •Catat kapan nomor dimasking pada layar OTP.
• •Pastikan jalur pemulihan tidak bergantung pada satu kanal yang mungkin tidak dapat diakses pengguna.
• •Tautkan penjelasan pengolahan data dari titik pendaftaran dan pemulihan akun.

Dengan cakupan ini, tim tidak hanya menerima mockup login, tetapi aturan perilaku layar yang siap diterapkan di aplikasi mobile.

Referensi antarmuka login untuk pengguna di Indonesia

Kesalahan yang sering terjadi

Menaruh +62 di placeholder sehingga hilang saat pengguna mulai mengetik.

Gunakan prefiks tetap atau pemilih negara terpisah. Kolom nomor hanya menerima bagian nomor yang perlu dimasukkan pengguna.

Hanya mendesain layar memasukkan OTP.

Sertakan keadaan mengirim kode, kode salah, kode kedaluwarsa, kirim ulang, perubahan nomor, dan pemulihan akun dalam prototipe.

Menyebut WhatsApp sebagai satu-satunya jalur tanpa informasi status.

Tampilkan kanal pengiriman yang sedang dipakai dan sediakan opsi cadangan atau bantuan yang memang didukung layanan.

Menyembunyikan penjelasan penggunaan nomor dan data akun di halaman yang sulit ditemukan.

Tulis ringkasan tujuan pengumpulan data di layar pendaftaran, lalu sediakan tautan ke kebijakan privasi lengkap.

Pertanyaan yang sering diajukan

Bagaimana format nomor telepon Indonesia di halaman login?

Di halaman login Indonesia, tampilkan kode negara +62 sebagai prefiks yang sudah dipilih dan minta pengguna mengisi nomor pada kolom terpisah. Desain harus menangani masukan yang diawali 0, 62, atau +62 secara konsisten, lalu memperlihatkan nomor yang akan menerima OTP sebelum kode dikirim.

Apakah OTP WhatsApp aman untuk login?

OTP WhatsApp dapat digunakan sebagai kanal verifikasi login bila layanan mengirimkan kode melalui sistem autentikasi yang tepat dan pengguna memasukkan kode hanya di aplikasi. Jangan pernah meminta pengguna mengirim OTP, kata sandi, atau PIN ke chat dukungan. Sediakan pula penanganan kode kedaluwarsa, salah, dan opsi pemulihan akun.

Data apa yang perlu dijelaskan saat pengguna mendaftar?

Saat pengguna mendaftar, jelaskan data akun yang diminta, seperti nomor telepon atau email, tujuan penggunaannya untuk login, verifikasi, atau pemulihan akun, serta tempat membaca kebijakan privasi. UU PDP No. 27 Tahun 2022 mengatur perlindungan data pribadi, termasuk data akun pengguna, sehingga penjelasan harus muncul sebelum data dikirim.

Layar apa saja yang perlu dibuat untuk alur login berbasis OTP?

Alur login berbasis OTP setidaknya memerlukan layar input nomor dengan +62, konfirmasi pengiriman kode, input OTP, kode salah atau kedaluwarsa, kode tidak diterima, perubahan nomor, dan pemulihan akun. Membuat seluruh keadaan ini dalam satu prototipe membantu tim memeriksa teks, tombol, dan jalur cadangan sebelum pengembangan.

Langkah selanjutnya

Login yang aman untuk pengguna Indonesia dimulai dari input +62 yang tidak membingungkan, OTP SMS atau WhatsApp dengan keadaan gagal yang jelas, dan penjelasan penggunaan data akun. Buat seluruh jalur—termasuk pemulihan—di floow.design agar keputusan UI diuji sebagai satu alur aplikasi mobile.

---

Rancang layarnya terlebih dahulu

Jelaskan aplikasi Anda dengan bahasa sederhana, lalu floow.design akan membuatkan layar iOS dan Android yang siap Anda sempurnakan dan serahkan ke tim pengembang.

Mulai desain gratis →

---

Sumber

• •JDIH BPK RI — Undang-Undang Nomor 27 Tahun 2022 tentang Perlindungan Data Pribadi
• •WhatsApp Business Platform — Authentication templates

Baca juga

• •Aplikasi buat desain ui ux untuk tim lokal
• •Aplikasi desain ui gratis untuk pemula
• •Aplikasi desain ui ux gratis: pilihan kerja