Desain ui ux aplikasi untuk alur transaksi

Desain ui ux aplikasi untuk alur transaksi di Indonesia harus membawa pengguna dari pemilihan metode hingga bukti pembayaran tanpa menyembunyikan biaya, nominal, atau status. Tampilkan QRIS sebagai standar pembayaran QR nasional Bank Indonesia, opsi transfer BCA, BRI, Mandiri, dan BNI, serta harga berformat IDR seperti Rp125.000.

Poin-poin utama

• •Mulai dari nominal dan tujuan pembayaran yang jelas sebelum pengguna memilih metode.
• •Pisahkan state pembayaran: menunggu, instruksi, diproses, berhasil, gagal, dan kedaluwarsa bila relevan.
• •Tampilkan QRIS dan transfer bank sebagai jalur yang berbeda karena tindakan pengguna serta informasi yang diperlukan tidak sama.
• •Gunakan format mata uang Indonesia yang konsisten, misalnya Rp125.000, pada ringkasan, tombol, dan bukti transaksi.
• •Minta floow.design membuat rangkaian layar lengkap, bukan hanya layar checkout utama.

Isi halaman ini

• •Petakan alur transaksi sebelum menggambar layar
• •Rancang pemilihan metode yang mudah dipindai
• •Buat layar instruksi QRIS dan transfer sebagai dua pola berbeda
• •Tangani status berhasil, gagal, dan menunggu dengan konten yang dapat ditindaklanjuti
• •Gunakan floow.design untuk menyusun rangkaian layar, bukan satu mockup

Petakan alur transaksi sebelum menggambar layar

Untuk desain aplikasi ui ux, definisikan dulu keputusan dan perubahan status yang benar-benar terjadi dalam transaksi. Alur minimum biasanya dimulai dari ringkasan pesanan, pemilihan metode, instruksi pembayaran, pemeriksaan status, lalu hasil akhir. Jangan langsung membuat satu layar pembayaran yang memuat semua informasi; pengguna perlu tahu apa yang harus dilakukan pada setiap tahap.

Pada layar ringkasan, tampilkan tujuan pembayaran, item atau layanan, total, dan nominal dalam format yang konsisten, misalnya Rp125.000. Jika ada biaya layanan atau potongan, letakkan sebelum total akhir dan beri label yang mudah dipahami. Tombol utama sebaiknya menyatakan tindakan berikutnya, seperti “Pilih metode pembayaran”, bukan “Lanjut” yang terlalu umum.

Buat peta state sejak awal: metode belum dipilih, metode dipilih, pembayaran menunggu, pembayaran diproses, pembayaran berhasil, pembayaran gagal, dan pembayaran kedaluwarsa jika produk Anda menerapkan batas waktu. Peta ini menjadi acuan konten, tombol, serta perilaku kembali pada setiap layar.

Rancang pemilihan metode yang mudah dipindai

Layar metode pembayaran harus membantu pengguna membandingkan pilihan tanpa memaksa mereka membaca paragraf panjang. Kelompokkan metode berdasarkan cara bayar, misalnya QR, transfer bank, dan metode lain yang tersedia di produk. Setiap baris metode perlu memuat nama, ikon yang dikenali, keterangan singkat bila perlu, serta indikator pilihan aktif.

Untuk pasar Indonesia, tampilkan QRIS dengan konteks yang tepat: QRIS adalah standar pembayaran QR nasional Bank Indonesia. Setelah pengguna memilih QRIS, jangan campurkan instruksi pindai QR dengan instruksi transfer bank pada layar yang sama. Kedua jalur memiliki tindakan utama berbeda dan berisiko membingungkan bila disatukan.

Pada kelompok transfer, metode lokal dapat mencakup transfer BCA, BRI, Mandiri, dan BNI. Tampilkan sebagai pilihan bank yang eksplisit bila memang didukung, bukan label samar seperti “Bank transfer” tanpa detail. Jika daftar bank panjang, gunakan pencarian atau daftar yang dapat diperluas, sambil menjaga bank yang paling relevan mudah ditemukan. Simpan pilihan terakhir hanya bila kebijakan produk dan persetujuan pengguna mendukungnya.

Buat layar instruksi QRIS dan transfer sebagai dua pola berbeda

Pada alur QRIS, layar instruksi berfokus pada kode QR, nominal, dan batas waktu bila ada. Nominal seperti Rp125.000 harus dekat dengan QR dan cukup besar untuk diperiksa sebelum pengguna membuka aplikasi pembayaran lain. Tambahkan tindakan yang berguna, misalnya memperbesar QR atau menyegarkan QR bila mekanisme pembayaran Anda memerlukannya. Hindari tombol “Saya sudah bayar” sebagai penentu keberhasilan; status sebaiknya mengikuti hasil yang diterima sistem pembayaran.

Pada alur transfer bank, utamakan detail yang harus disalin: nama bank, nomor rekening atau nomor virtual account, nama penerima bila tersedia, nominal tepat, dan batas waktu. Sediakan tombol salin untuk nomor yang panjang serta umpan balik singkat setelah disalin. Jangan menaruh nomor rekening di dalam gambar karena pengguna tidak dapat menyalinnya dan pembaca layar sulit mengaksesnya.

Untuk desain ui ux aplikasi mobile, pertahankan ringkasan total tetap terlihat atau mudah dibuka kembali. Pengguna sering berpindah ke aplikasi bank lalu kembali untuk memeriksa nominal dan status.

Tangani status berhasil, gagal, dan menunggu dengan konten yang dapat ditindaklanjuti

Layar hasil bukan dekorasi penutup; layar ini menentukan apakah pengguna tahu transaksi sudah selesai atau masih perlu bertindak. State berhasil perlu menampilkan status yang tegas, nominal, metode yang dipakai, waktu transaksi bila tersedia, dan rute berikutnya seperti melihat pesanan atau kembali ke beranda. Bila produk menyediakan bukti transaksi, gunakan label yang jelas dan jangan menyebut transaksi berhasil sebelum status memang terkonfirmasi.

Untuk state menunggu atau diproses, jelaskan bahwa sistem sedang memeriksa pembayaran dan hindari animasi tanpa informasi. Beri pengguna pilihan aman: menunggu pembaruan, kembali ke pesanan, atau menghubungi bantuan bila waktu pemeriksaan melewati batas yang ditetapkan produk.

Pada state gagal, sebutkan masalah dalam bahasa manusiawi, misalnya pembayaran belum diterima atau waktu pembayaran telah habis, tanpa mengklaim penyebab yang tidak diketahui. Berikan satu tindakan utama: coba lagi, pilih metode lain, atau ulangi pembayaran. Jangan hilangkan ringkasan transaksi; pengguna harus tetap dapat memeriksa bahwa nominalnya Rp125.000, bukan nominal lain.

Gunakan floow.design untuk menyusun rangkaian layar, bukan satu mockup

Brief yang baik untuk floow.design menyebutkan urutan layar, data yang muncul, dan state yang harus dibuat. Minta floow.design menghasilkan seluruh rangkaian layar transaksi: ringkasan pesanan, pemilihan metode, instruksi QRIS, pilihan transfer BCA, BRI, Mandiri, dan BNI, instruksi transfer, status menunggu, berhasil, gagal, serta kedaluwarsa bila digunakan dalam produk.

Sertakan contoh data realistis agar hierarki mudah diuji: total Rp125.000, label metode, nomor virtual account contoh yang aman, dan batas waktu contoh tanpa menganggapnya sebagai ketentuan universal. Jelaskan pula tindakan pada setiap layar: memilih metode, menyalin nomor, kembali ke detail pesanan, mencoba ulang, atau mengganti metode.

Setelah layar dihasilkan, uji alur dengan skenario praktis. Minta pengguna menemukan metode QRIS, membedakan transfer BCA dari BRI, menyalin detail pembayaran, lalu menjelaskan apa yang mereka lakukan saat pembayaran gagal. Revisi teks, urutan informasi, dan tombol berdasarkan titik pengguna berhenti atau ragu.

Referensi konten untuk layar transaksi Indonesia

Kesalahan yang sering terjadi

Menampilkan semua metode dan semua instruksi pembayaran dalam satu layar panjang.

Pisahkan layar pilih metode dari layar instruksi. Setelah QRIS atau transfer dipilih, tampilkan hanya informasi yang dibutuhkan untuk metode tersebut.

Menggunakan nominal berbeda antara ringkasan, layar instruksi, dan layar hasil.

Gunakan satu sumber data nominal dan tampilkan format yang sama, misalnya Rp125.000, di seluruh titik kritis.

Menandai pembayaran berhasil hanya karena pengguna menekan tombol konfirmasi.

Gunakan state menunggu atau diproses sampai sistem menerima status pembayaran yang terkonfirmasi.

Menyediakan nomor transfer sebagai teks biasa tanpa fungsi salin.

Tambahkan tombol salin pada nomor rekening atau virtual account, lalu tampilkan umpan balik bahwa nomor sudah disalin.

Pertanyaan yang sering diajukan

Bagaimana membuat alur pembayaran aplikasi?

Buat alur pembayaran aplikasi dari ringkasan transaksi, pemilihan metode, instruksi pembayaran, pemeriksaan status, hingga hasil berhasil atau gagal. Di Indonesia, pisahkan jalur QRIS dari transfer bank seperti BCA, BRI, Mandiri, dan BNI. Tampilkan nominal konsisten, misalnya Rp125.000, dan selalu sediakan tindakan lanjutan saat transaksi belum selesai.

State apa yang diperlukan untuk pembayaran QRIS?

Pembayaran QRIS minimal memerlukan state metode dipilih, QR ditampilkan atau menunggu pembayaran, pembayaran diproses, berhasil, gagal, dan kedaluwarsa bila QR memiliki batas waktu. QRIS adalah standar pembayaran QR nasional Bank Indonesia. Setiap state perlu menjelaskan status saat ini, nominal transaksi, serta tindakan pengguna yang aman tanpa mengklaim pembayaran berhasil terlalu dini.

Bagaimana menampilkan pilihan transfer bank?

Tampilkan pilihan transfer bank dalam kelompok terpisah dengan nama bank yang eksplisit, misalnya BCA, BRI, Mandiri, dan BNI jika didukung aplikasi. Setelah bank dipilih, tampilkan nomor rekening atau virtual account, nominal seperti Rp125.000, batas waktu bila ada, dan tombol salin. Jangan mencampurkan instruksi transfer dengan instruksi QRIS pada satu layar.

Mengapa layar pembayaran gagal perlu dirancang terpisah?

Layar pembayaran gagal perlu dirancang terpisah karena pengguna membutuhkan diagnosis yang mudah dipahami dan langkah berikutnya. Tampilkan bahwa pembayaran belum diterima atau waktu telah habis sesuai status yang tersedia, pertahankan ringkasan nominal, lalu arahkan ke satu tindakan utama seperti coba lagi atau pilih metode lain. Hindari pesan kesalahan teknis tanpa solusi.

Langkah selanjutnya

Alur transaksi yang baik membuat pengguna selalu tahu nominal, metode yang dipilih, status pembayaran, dan tindakan berikutnya. Dalam konteks Indonesia, rancang QRIS serta transfer BCA, BRI, Mandiri, dan BNI sebagai jalur yang jelas, lalu pastikan state menunggu, berhasil, dan gagal sama-sama lengkap. Gunakan floow.design untuk menghasilkan dan menguji seluruh rangkaian layar transaksi, termasuk state gagal dan berhasil.

---

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 — QRIS
• •Bank Indonesia — Standar Nasional Open API Pembayaran dan ekosistem pembayaran