Contoh desain tampilan aplikasi per state

Contoh desain tampilan aplikasi yang baik tidak berhenti di beranda: siapkan layar kosong, loading, error, offline, sukses, dan state transaksi. Untuk Indonesia, alur pembayaran perlu membedakan QRIS berhasil, kedaluwarsa, dan gagal; sementara nominal tagihan serta refund ditulis dalam Rupiah agar pengguna langsung memahami statusnya.

Poin-poin utama

• •Rancang state sebagai rangkaian layar yang saling terhubung, bukan variasi pesan pada satu layar.
• •Bedakan error yang dapat dicoba ulang, transaksi yang gagal, dan pembayaran yang masih menunggu konfirmasi.
• •Uji state jaringan dengan skenario koneksi Telkomsel, Indosat, dan XL, termasuk perpindahan jaringan serta koneksi yang putus.
• •Pada transaksi, tampilkan status QRIS, nominal Rupiah, waktu, dan tindakan lanjutan yang jelas.

Isi halaman ini

• •Galeri state dasar: kosong, loading, dan gagal
• •Contoh desain UI aplikasi untuk pembayaran QRIS
• •State tagihan, refund, dan bukti transaksi
• •Offline dan jaringan lemah: contoh skenario uji Indonesia
• •Susun prompt galeri state di floow.design

Galeri state dasar: kosong, loading, dan gagal

Dalam contoh desain interface aplikasi, tiga state pertama sering menentukan apakah pengguna melanjutkan tugas atau menutup aplikasi.

State kosong dipakai ketika belum ada data, misalnya daftar tagihan belum tersedia atau riwayat transaksi masih kosong. Jangan hanya menulis “Tidak ada data”. Jelaskan kondisi dan beri satu aksi: “Belum ada tagihan aktif” dengan tombol “Lihat layanan”.

Loading perlu mempertahankan konteks layar. Pada daftar transaksi, gunakan skeleton untuk baris tanggal, merchant, dan nominal; jangan mengganti seluruh layar dengan pemuat generik. Jika proses memerlukan waktu, tampilkan teks tugas yang sedang dikerjakan, misalnya “Memeriksa status pembayaran”.

Gagal memuat harus menyebut objek yang gagal dan tindakan pemulihan. Contoh: “Tagihan belum dapat dimuat. Periksa koneksi lalu coba lagi.” Sediakan tombol “Coba lagi”, dan jangan menghapus data lama yang masih valid hanya karena penyegaran gagal. Untuk formulir, letakkan pesan error di dekat kolom yang perlu diperbaiki, bukan hanya sebagai notifikasi singkat di bagian atas.

Contoh desain UI aplikasi untuk pembayaran QRIS

State QRIS tidak boleh disatukan menjadi satu pesan “Pembayaran diproses”. Buat setidaknya tiga layar transaksi yang tegas.

QRIS berhasil menampilkan ikon sukses, nominal dalam Rupiah, nama merchant bila tersedia, waktu transaksi, serta ID atau referensi transaksi. Tombol utama dapat berupa “Kembali ke beranda” atau “Lihat riwayat”. Hindari tombol “Bayar lagi” sebagai aksi dominan tepat setelah pembayaran berhasil.

QRIS kedaluwarsa menjelaskan bahwa kode tidak lagi dapat dipakai dan menawarkan aksi “Buat kode QRIS baru”. Pertahankan nominal serta detail pesanan agar pengguna tidak perlu mengulang dari awal.

QRIS gagal menyatakan bahwa pembayaran tidak berhasil dikonfirmasi, tanpa langsung menyuruh pengguna membayar ulang. Tampilkan langkah aman: cek riwayat transaksi, tunggu pembaruan status bila masih diproses, atau hubungi bantuan dengan referensi transaksi. Bank Indonesia menjelaskan QRIS sebagai standar QR Code pembayaran nasional; karena itu label QRIS dan status pembayarannya harus mudah dibedakan dari metode bayar lain.

State tagihan, refund, dan bukti transaksi

Layar tagihan harus membantu pengguna memeriksa uang yang akan keluar sebelum melakukan pembayaran. Tampilkan nama layanan, periode tagihan, jatuh tempo bila ada, dan nominal dengan format Rupiah yang konsisten, misalnya Rp125.000. Jangan mencampur format “125K”, “IDR 125.000”, dan “Rp 125.000” dalam satu alur.

Untuk refund, pisahkan state refund diajukan, refund diproses, refund berhasil, dan refund ditolak atau memerlukan tindakan. Pada setiap state, tampilkan nominal refund dalam Rupiah, misalnya Rp50.000, tujuan pengembalian dana jika informasinya tersedia, serta referensi transaksi. Jika waktu penyelesaian belum dapat dipastikan oleh sistem, jangan menjanjikan tanggal yang tidak ada dasarnya; arahkan pengguna ke detail status atau bantuan.

Bukti transaksi bukan sekadar layar sukses. Sediakan detail yang dapat dibuka kembali dari riwayat: status, nominal Rupiah, metode pembayaran, waktu, merchant atau layanan, dan ID referensi. Desain ini mengurangi kebutuhan pengguna mengambil tangkapan layar hanya untuk mencocokkan transaksi.

Offline dan jaringan lemah: contoh skenario uji Indonesia

State offline perlu dirancang untuk tugas yang sedang dilakukan, bukan hanya menampilkan ikon tanpa sinyal. Saat pengguna membuka riwayat yang pernah dimuat, tetap tampilkan data cache dengan penanda seperti “Data terakhir diperbarui …”. Saat pengguna mencoba aksi yang membutuhkan internet, jelaskan bahwa aksi belum dikirim dan beri pilihan untuk mencoba lagi.

Buat skenario uji pada koneksi operator Telkomsel, Indosat, dan XL. Tujuannya bukan membandingkan operator, melainkan memeriksa perilaku aplikasi ketika jaringan berubah, melemah, atau terputus di tengah proses. Uji perpindahan dari Wi-Fi ke data seluler, mode pesawat, koneksi yang kembali setelah gagal, serta penekanan tombol kirim berulang kali.

Untuk pembayaran, jangan menampilkan sukses hanya karena permintaan sudah dikirim dari perangkat. Gunakan state “Memeriksa status pembayaran” sampai backend memberi hasil yang pasti. Dokumentasi Android juga menyarankan aplikasi memantau perubahan konektivitas dan menangani jaringan yang tidak tersedia, sehingga pesan offline serta tombol coba lagi perlu mengikuti status jaringan nyata.

Susun prompt galeri state di floow.design

Saat meminta desain ke floow.design, jangan berhenti pada permintaan “buat aplikasi pembayaran”. Minta satu alur lengkap yang menyebut layar dan transisinya. Contoh instruksi: “Buat aplikasi pembayaran tagihan untuk pengguna Indonesia: beranda, daftar tagihan kosong, skeleton loading, gagal memuat, detail tagihan Rp125.000, pembayaran QRIS berhasil, QRIS kedaluwarsa, QRIS gagal, refund Rp50.000 diajukan dan berhasil, serta offline.”

Tambahkan aturan perilaku agar hasil tidak hanya bagus sebagai gambar: tombol “Coba lagi” pada error, “Buat kode QRIS baru” pada kode kedaluwarsa, detail referensi pada transaksi berhasil, dan data cache pada riwayat saat offline. Minta pula varian layar untuk koneksi Telkomsel, Indosat, atau XL yang terputus di tengah pengiriman.

Dengan brief seperti ini, floow.design membuat seluruh state layar, bukan hanya tampilan beranda. Hasilnya lebih siap dibawa ke alur produk, pengujian QA, dan diskusi dengan tim backend.

Matriks state transaksi yang perlu masuk ke prototipe aplikasi Indonesia

Kesalahan yang sering terjadi

Menyamakan QRIS gagal dengan QRIS kedaluwarsa.

Pisahkan pesan, penyebab, dan aksi: kode kedaluwarsa perlu dibuat ulang, sedangkan transaksi gagal perlu pengecekan status dan referensi.

Menghilangkan nominal saat layar sukses atau refund.

Tampilkan nominal Rupiah, status, waktu, dan ID referensi pada layar yang dapat dibuka kembali dari riwayat.

Menampilkan layar offline yang sama untuk semua tugas.

Pertahankan data cache untuk konten yang pernah dimuat, tetapi cegah aksi yang belum dapat dikirim dan jelaskan statusnya.

Hanya mendesain happy path di beranda dan checkout.

Minta floow.design membuat varian kosong, loading, gagal, berhasil, kedaluwarsa, refund, dan offline dalam satu alur.

Pertanyaan yang sering diajukan

State tampilan apa saja yang wajib dibuat?

State tampilan yang wajib dibuat untuk aplikasi transaksi mencakup kosong, loading, gagal memuat, offline, sukses, formulir tidak valid, proses tertunda, dan data tidak ditemukan. Untuk pembayaran, tambahkan QRIS berhasil, QRIS kedaluwarsa, QRIS gagal, bukti transaksi, serta refund diajukan, diproses, berhasil, dan bermasalah.

Bagaimana desain layar pembayaran QRIS gagal?

Layar pembayaran QRIS gagal harus menyatakan bahwa pembayaran belum berhasil dikonfirmasi, menampilkan nominal Rupiah, waktu, dan referensi transaksi bila tersedia. Berikan langkah aman seperti memeriksa riwayat transaksi atau menghubungi bantuan. Jangan menjadikan “Bayar lagi” sebagai satu-satunya aksi sebelum pengguna tahu apakah transaksi sebelumnya benar-benar gagal.

Bagaimana desain aplikasi saat offline?

Desain aplikasi saat offline perlu mempertahankan konten yang pernah dimuat bila tersedia, dengan penanda waktu pembaruan terakhir. Untuk aksi yang membutuhkan internet, jelaskan bahwa permintaan belum terkirim dan sediakan tombol coba lagi setelah koneksi kembali. Uji juga perpindahan Wi-Fi ke data Telkomsel, Indosat, atau XL agar state tidak salah berubah.

Mengapa state QRIS kedaluwarsa perlu layar terpisah?

State QRIS kedaluwarsa perlu layar terpisah karena tindakan pengguna berbeda dari transaksi gagal. Kode yang kedaluwarsa memerlukan pembuatan QRIS baru, sementara transaksi gagal dapat memerlukan pengecekan riwayat atau status pembayaran. Layar terpisah mencegah pengguna membayar dua kali dan mempertahankan detail pesanan yang sama.

Langkah selanjutnya

Galeri state yang berguna menunjukkan kondisi ketika data belum ada, jaringan putus, transaksi tertunda, dan uang kembali—bukan hanya layar ideal. Gunakan floow.design untuk menghasilkan seluruh state layar dalam satu alur aplikasi, lalu uji setiap transisi sebelum desain masuk ke pengembangan.

---

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

• •Bank Indonesia — Quick Response Code Indonesian Standard (QRIS)
• •Android Developers — Monitor connectivity status and connection metering
• •Android Developers — Handle network operations

Baca juga

• •Contoh desain aplikasi berdasarkan masalah
• •Contoh desain aplikasi mobile Indonesia
• •Contoh desain aplikasi mobile figma