Desain ui aplikasi: checklist komponen lokal

Checklist desain UI aplikasi mobile Indonesia untuk nominal Rupiah, pilihan QRIS, transfer bank, DANA, alamat, serta izin data yang jelas.

How-to7 min read1,388 words

Desain ui aplikasi untuk Indonesia perlu memprioritaskan komponen nominal dalam IDR atau Rupiah, pilihan pembayaran QRIS, transfer bank, dan e-wallet seperti DANA, serta formulir alamat dan izin data yang mudah dipahami. QRIS penting karena Bank Indonesia menetapkannya sebagai standar QR nasional.

Poin-poin utama

•Tampilkan nominal dengan penanda Rp dan struktur angka yang konsisten di seluruh layar.
•Pisahkan alur pembayaran QRIS, transfer bank, dan e-wallet karena instruksi serta status transaksinya berbeda.
•Rancang alamat sebagai data bertingkat agar pengguna dapat mengisi provinsi, kota/kabupaten, kecamatan, dan kode pos dengan jelas.
•Minta izin data hanya saat fitur membutuhkannya, lalu jelaskan tujuan dan pilihan pengguna.
•Uji komponen pada keadaan normal, kosong, memuat, gagal, dan berhasil sebelum dipakai di banyak layar.

Tabel acuan keputusan desain ui aplikasi untuk tim Indonesia

Isi halaman ini

•Checklist dasar desain ui aplikasi mobile
•Nominal Rupiah: aturan tampilan dan masukan
•Pembayaran lokal: QRIS, transfer bank, dan DANA
•Alamat dan izin data: minta seperlunya, jelaskan sebelum meminta

Checklist dasar desain ui aplikasi mobile

Gunakan checklist ini saat menyusun pustaka komponen untuk desain ui aplikasi mobile di Indonesia.

• Tetapkan token nominal: Rp, pemisah ribuan titik, dan posisi nominal yang sama pada kartu, ringkasan, serta bukti transaksi.
• Buat komponen harga untuk keadaan reguler, diskon, biaya layanan, total, nominal kosong, dan nominal terlalu panjang.
• Sediakan pemilih metode bayar yang memperlihatkan QRIS, transfer bank, dan e-wallet seperti DANA sebagai opsi yang terpisah.
• Siapkan status pembayaran: menunggu pembayaran, diproses, berhasil, kedaluwarsa, dan gagal.
• Buat formulir alamat bertingkat, bukan satu kolom alamat panjang.
• Tulis layar izin data dengan tujuan yang spesifik sebelum dialog izin sistem muncul.

Komponen tidak harus muncul sekaligus. Pada checkout, tampilkan ringkasan total lalu metode bayar; detail instruksi baru muncul setelah pengguna memilih metode. Pola ini menjaga layar tetap ringkas dan mengurangi salah pilih. Dokumentasikan juga label, panjang teks, status nonaktif, fokus, kesalahan, dan teks bantuan untuk setiap komponen.

Nominal Rupiah: aturan tampilan dan masukan

Komponen nominal harus mendukung mata uang IDR atau Rupiah. Untuk nilai yang dibaca pengguna, pakai format Rp25.000, bukan 25,000 IDR atau Rp 25.000 yang berubah-ubah antarhalaman. Pertahankan satu aturan di katalog, keranjang, checkout, riwayat, dan notifikasi.

Checklist komponen nominal:

• Label harga memakai Rp dan pemisah ribuan titik.
• Field input menerima angka tanpa memaksa pengguna mengetik pemisah.
• Saat pengguna memasukkan nilai, formatkan secara langsung tanpa memindahkan fokus secara mengganggu.
• Tampilkan batas minimum atau maksimum sebelum pengguna menekan lanjut, bila produk memang memilikinya.
• Pisahkan subtotal, diskon, biaya, dan total agar total akhir mudah dipindai.
• Jangan mengganti nominal menjadi singkatan seperti 25K pada layar konfirmasi pembayaran.

Untuk contoh desain ui aplikasi, kartu produk dapat menampilkan Rp25.000, sedangkan layar pembayaran menambahkan rincian biaya dan total akhir. Bila ada angka desimal dari sumber internal, putuskan aturan pembulatan di level produk; jangan biarkan setiap layar menafsirkan angka sendiri.

Pembayaran lokal: QRIS, transfer bank, dan DANA

Buat pemilih metode bayar berbentuk daftar atau kartu radio, dengan satu metode aktif dan ringkasan instruksi setelah dipilih. Jangan memakai satu tombol generik “Bayar” tanpa konteks metode.

• QRIS: tampilkan nominal, kode QR atau pemicu untuk membuka pemindai, batas waktu bila ada, serta tombol cek status pembayaran.
• Transfer bank: tampilkan nama bank, nomor rekening atau nomor virtual account, nominal yang harus ditransfer, batas waktu, dan tombol salin.
• DANA: tampilkan nama e-wallet, nominal, status pengalihan ke aplikasi atau webview bila digunakan, serta cara kembali ke aplikasi.

Bank Indonesia menerbitkan QRIS sebagai standar QR nasional untuk pembayaran, sehingga QRIS layak diperlakukan sebagai metode tersendiri dalam pustaka komponen, bukan sekadar ikon di samping tombol bayar. Rujuk ketentuan QRIS dari Bank Indonesia saat menyusun teks dan alur yang berkaitan dengan QRIS.

Di layar hasil, selalu tampilkan metode yang dipakai, nominal Rupiah, waktu transaksi, dan identitas referensi yang tersedia dari sistem. Ini membantu pengguna membedakan transaksi QRIS dari transfer bank saat memeriksa riwayat.

Alamat dan izin data: minta seperlunya, jelaskan sebelum meminta

Alamat Indonesia sering membutuhkan data bertingkat. Rancang field terpisah untuk nama penerima, nomor ponsel, alamat detail, provinsi, kota atau kabupaten, kecamatan, kelurahan atau desa bila layanan memerlukannya, serta kode pos. Gunakan pencarian atau pilihan bertahap bila daftar wilayah panjang; jangan memaksa pengguna mengingat format administrasi dalam satu textarea.

Checklist alamat dan izin:

• Tampilkan contoh pengisian pada alamat detail, misalnya nomor rumah, nama jalan, dan patokan.
• Validasi kode pos serta field wajib secara dekat dengan field yang salah.
• Simpan alamat sebagai pilihan yang dapat diberi label, seperti Rumah atau Kantor.
• Jelaskan alasan meminta lokasi sebelum memunculkan izin lokasi sistem, misalnya untuk menemukan alamat pengantaran.
• Jelaskan alasan meminta kamera sebelum pemindaian QRIS.
• Sediakan jalur lanjut manual bila pengguna menolak izin.

Izin bukan penghalang awal aplikasi. Munculkan saat tindakan pengguna memerlukannya: kamera ketika memilih pindai QRIS, lokasi ketika memilih alamat dari peta. Buat pustaka layar dan komponen produk Anda dengan prompt terstruktur di floow.design.

Referensi komponen pembayaran untuk aplikasi Indonesia

Metode	Isi minimum pada layar	Keadaan yang perlu dirancang
QRIS	Nominal Rupiah, kode QR atau pemindai, batas waktu, cek status	Menunggu, berhasil, kedaluwarsa, gagal
Transfer bank	Nama bank, rekening atau virtual account, nominal, salin nomor	Instruksi tampil, menunggu, berhasil, kedaluwarsa
DANA	Nama e-wallet, nominal, status pengalihan, kembali ke aplikasi	Memulai, kembali dari DANA, berhasil, batal atau gagal

Kesalahan yang sering terjadi

Menulis harga sebagai “25.000” tanpa penanda mata uang.

Tulis Rp25.000 pada nilai yang dilihat pengguna agar nominal jelas sebagai Rupiah.

Menggabungkan QRIS dan transfer bank dalam satu instruksi pembayaran.

Buat komponen dan status berbeda: QRIS berfokus pada kode QR atau pemindaian, sedangkan transfer bank membutuhkan rekening atau virtual account dan tombol salin.

Meminta akses kamera saat aplikasi baru dibuka.

Minta izin kamera setelah pengguna memilih tindakan pindai QRIS, sertai alasan singkat dan opsi kembali.

Menaruh seluruh alamat dalam satu field panjang.

Pisahkan alamat detail dari wilayah administratif dan kode pos, lalu sediakan pencarian atau pilihan bertahap bila diperlukan.

Pertanyaan yang sering diajukan

Komponen apa saja dalam desain UI aplikasi?

Komponen dalam desain UI aplikasi mobile mencakup navigasi, tombol, field input, kartu, daftar, dialog, notifikasi, status kosong, status memuat, dan status kesalahan. Untuk aplikasi Indonesia, tambahkan komponen nominal Rupiah, pemilih QRIS, transfer bank, DANA, formulir alamat bertingkat, serta layar penjelasan izin data.

Bagaimana menulis harga dalam Rupiah?

Tulis harga dalam Rupiah secara konsisten dengan penanda Rp dan pemisah ribuan titik, misalnya Rp25.000. Gunakan format yang sama pada daftar produk, keranjang, checkout, riwayat transaksi, dan bukti pembayaran. Pada layar konfirmasi, hindari singkatan seperti 25K karena nominal akhir perlu terbaca tanpa tafsir.

Apa perbedaan tombol bayar QRIS dan transfer bank?

Tombol bayar QRIS membawa pengguna ke kode QR, pemindai, atau proses pembayaran QRIS lalu menampilkan status transaksi. Tombol transfer bank membuka instruksi nama bank, nomor rekening atau virtual account, nominal transfer, dan biasanya tombol salin. Keduanya perlu status menunggu, berhasil, gagal, atau kedaluwarsa yang jelas.

Kapan aplikasi harus meminta izin kamera untuk QRIS?

Aplikasi harus meminta izin kamera ketika pengguna memilih tindakan memindai QRIS, bukan saat pertama kali membuka aplikasi. Sebelum dialog izin sistem, jelaskan bahwa kamera dipakai untuk memindai kode QR pembayaran dan sediakan pilihan kembali atau memasukkan metode pembayaran lain jika pengguna menolak izin.

Langkah selanjutnya

Checklist lokal yang baik membuat komponen dapat dipakai ulang tanpa menyamarkan perbedaan penting antaralur. Mulai dari nominal Rupiah, lalu pisahkan QRIS, transfer bank, dan DANA; setelah itu rapikan alamat serta waktu permintaan izin data. Buat pustaka layar dan komponen produk Anda dengan prompt terstruktur di floow.design.

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 →