Desain ui aplikasi kasir untuk UMKM Indonesia

Desain ui aplikasi kasir untuk UMKM Indonesia harus memprioritaskan katalog yang mudah dipindai, tombol bayar yang terjangkau ibu jari, serta nominal Rupiah tanpa salah baca. Di layar transaksi, tampilkan diskon, metode tunai dan QRIS, lalu uraikan subtotal, PPN 11%, dan total sebelum struk dikirim atau dicetak.

Poin-poin utama

• •Letakkan pencarian, kategori, dan keranjang dalam satu alur agar kasir tidak bolak-balik layar saat antrean ramai.
• •Format Rupiah harus mudah dipindai: gunakan pemisah ribuan, perbesar total, dan bedakan uang diterima dari kembalian.
• •Jadikan QRIS, tunai, dan metode pembayaran lain sebagai pilihan yang terlihat sebelum kasir menekan konfirmasi.
• •Tampilkan diskon dan PPN sebagai baris terpisah agar total transaksi dapat dijelaskan kepada pelanggan.

Isi halaman ini

• •Susun layar kasir untuk ritme transaksi di konter
• •Buat nominal Rupiah dan diskon sulit salah baca
• •Rancang layar pembayaran sebagai titik keputusan
• •Tetapkan komponen dan keadaan layar sebelum membuat prototipe

Susun layar kasir untuk ritme transaksi di konter

Pada desain aplikasi kasir mobile, satu layar utama sebaiknya menyelesaikan tiga tugas: mencari barang, menambahkannya ke keranjang, lalu membuka pembayaran. Tempatkan pencarian di bagian atas, kategori produk sebagai deretan horizontal, dan grid produk dengan target sentuh yang cukup besar. Keranjang harus tetap terlihat sebagai panel ringkas atau tombol mengambang yang selalu menampilkan jumlah item dan total sementara.

Urutkan produk berdasarkan pola jual toko, bukan alfabet semata: produk terlaris, kategori, lalu hasil pencarian. Untuk varian seperti ukuran atau rasa, buka pemilih singkat setelah produk ditekan; jangan memaksa kasir masuk ke halaman detail penuh. Sediakan pengubah jumlah, hapus item, catatan pesanan, dan pelanggan dari keranjang tanpa menutup katalog.

Pola ini relevan untuk kebutuhan yang sudah dilayani aplikasi kasir lokal seperti Moka POS, Majoo, dan Olsera: kecepatan input di titik jual lebih penting daripada dashboard laporan di saat pelanggan sedang menunggu. Uji layar dengan satu tangan pada perangkat yang benar-benar dipakai kasir, terutama posisi tombol keranjang dan tombol bayar di area bawah.

Buat nominal Rupiah dan diskon sulit salah baca

Nominal besar adalah risiko utama pada layar kasir. Tulis harga secara konsisten sebagai Rp25.000, bukan angka tanpa konteks atau angka yang terlalu rapat. Pada keranjang, buat hierarki tegas: harga satuan kecil, jumlah di tengah, total per baris lebih menonjol. Di layar pembayaran, total akhir harus menjadi elemen terbesar, sedangkan subtotal, diskon, pajak, dan biaya lain berada tepat di atasnya.

Diskon harus dapat dipilih sebagai nominal Rupiah atau persentase, dengan label yang tidak ambigu: Diskon Rp10.000 berbeda dari Diskon 10%. Setelah kasir memasukkan diskon, tampilkan dampaknya langsung pada total dan sediakan tindakan batal yang mudah ditemukan. Bila diskon membutuhkan otorisasi pemilik, jangan hanya menampilkan ikon kunci; jelaskan alasan dan langkah berikutnya di layar.

Untuk contoh desain aplikasi kasir, gunakan urutan ringkasan berikut: subtotal, diskon, dasar pengenaan, PPN, lalu total. Indonesia menerapkan PPN dengan tarif 11% sejak 1 April 2022, menurut Direktorat Jenderal Pajak. Hindari menyembunyikan pajak di dalam total bila kasir perlu menjawab pertanyaan pelanggan di konter.

Rancang layar pembayaran sebagai titik keputusan

Layar pembayaran bukan sekadar daftar metode bayar. Kasir perlu melihat total, memilih metode, memasukkan uang diterima bila tunai, lalu mengonfirmasi transaksi tanpa kehilangan isi keranjang. Letakkan total pada bagian atas, metode pembayaran sebagai tombol besar di tengah, dan tombol Bayar yang tetap berada di bawah. Nonaktifkan tombol konfirmasi sampai metode yang diperlukan lengkap, tetapi jelaskan apa yang belum diisi.

Untuk tunai, tampilkan keypad angka besar, nilai cepat seperti pecahan uang yang umum dipakai toko, uang diterima, dan kembalian secara langsung. Jangan membuka keypad sistem yang kecil bila angka harus dimasukkan berulang kali. Untuk pembayaran QR, tampilkan status yang jelas: QR siap dipindai, menunggu pembayaran, berhasil, atau kedaluwarsa.

QRIS memungkinkan merchant menerima pembayaran QR dari berbagai penyedia pembayaran. Karena itu, jangan meminta kasir memilih dompet digital pelanggan sebelum menampilkan QRIS. Sediakan tombol ulangi QR dan batalkan transaksi dengan konfirmasi agar transaksi ganda tidak terjadi. Setelah pembayaran berhasil, lanjutkan ke pilihan struk cetak, kirim digital, atau transaksi baru.

Tetapkan komponen dan keadaan layar sebelum membuat prototipe

Mulai dari komponen yang benar-benar dipakai berulang: kartu produk, chip kategori, baris keranjang, pengatur jumlah, input diskon, kartu metode bayar, keypad tunai, ringkasan pajak, dan dialog pembatalan. Untuk tiap komponen, rancang keadaan normal, dipilih, kosong, memuat, gagal, dan berhasil. Katalog kosong, stok habis, QR kedaluwarsa, serta printer tidak terhubung adalah keadaan operasional yang perlu diprototipkan, bukan catatan belakangan.

Gunakan warna sebagai penguat status, bukan satu-satunya penanda. Misalnya, pembayaran berhasil memerlukan teks status, ikon, dan nominal transaksi; merah pada pembatalan harus disertai tindakan yang jelas. Jaga label tetap spesifik: Bayar dengan QRIS, Masukkan uang diterima, dan Terapkan diskon lebih mudah dipahami daripada label umum seperti Lanjutkan.

Uji prototipe dengan skenario nyata: pelanggan membeli beberapa item, satu item dibatalkan, diskon diterapkan, pembayaran dilakukan lewat QRIS, lalu kasir harus meninjau PPN pada struk. Ukur jumlah ketukan dan titik ragu, terutama ketika perangkat digunakan sambil berdiri di meja transaksi.

Referensi isi ringkasan transaksi kasir di Indonesia

Kesalahan yang sering terjadi

Menaruh tombol bayar hanya pada bagian atas layar sehingga sulit dijangkau saat kasir memegang ponsel dengan satu tangan.

Tempelkan tombol bayar di area bawah layar dan tampilkan total yang sedang berjalan pada tombol atau tepat di atasnya.

Menggabungkan subtotal, diskon, dan pajak menjadi satu angka total tanpa rincian.

Tampilkan setiap komponen dalam urutan yang konsisten agar kasir dapat menjelaskan total dan memeriksa kesalahan sebelum pembayaran.

Memaksa kasir memilih aplikasi pembayaran pelanggan sebelum menggunakan QR.

Sediakan QRIS sebagai metode tunggal untuk pembayaran QR, lalu tampilkan status pembayaran hingga transaksi terkonfirmasi.

Membuat angka harga, uang diterima, dan kembalian memiliki ukuran visual yang sama.

Prioritaskan total dan kembalian dengan ukuran terbesar, lalu beri label eksplisit pada setiap nominal.

Pertanyaan yang sering diajukan

Bagaimana membuat UI kasir yang cepat dipakai?

UI kasir yang cepat dipakai menyatukan pencarian produk, kategori, keranjang, dan tombol bayar dalam alur yang pendek. Letakkan produk terlaris lebih dahulu, gunakan target sentuh besar, pertahankan keranjang terlihat, dan tempelkan tombol bayar di bawah layar. Uji juga skenario nyata seperti mengubah jumlah, membatalkan item, dan menerima pembayaran saat antrean ramai.

Tombol apa yang wajib ada di layar pembayaran?

Layar pembayaran kasir perlu memiliki pilihan metode bayar, tombol konfirmasi bayar, kembali ke keranjang, pembatalan dengan konfirmasi, serta pilihan struk setelah transaksi berhasil. Untuk tunai, tambahkan keypad angka, uang diterima, dan kembalian. Untuk pembayaran QR, tampilkan tombol QRIS, status menunggu pembayaran, serta tindakan untuk membuat ulang QR bila kedaluwarsa.

Bagaimana menampilkan PPN pada struk?

Tampilkan PPN pada struk sebagai baris terpisah setelah subtotal dan diskon, lalu sebelum total akhir. Gunakan label yang jelas, misalnya PPN 11%, bersama nominal pajaknya. Struktur ini membantu kasir dan pelanggan memeriksa perhitungan transaksi. Tarif PPN Indonesia adalah 11% sejak 1 April 2022 menurut Direktorat Jenderal Pajak.

Apakah QRIS perlu dipisahkan dari dompet digital di UI kasir?

QRIS sebaiknya ditampilkan sebagai satu metode pembayaran QR di UI kasir karena merchant dapat menerima pembayaran QR dari berbagai penyedia pembayaran. Kasir cukup memilih QRIS dan menunjukkan kode QR kepada pelanggan. Setelah itu, layar perlu menampilkan status menunggu, berhasil, gagal, atau kedaluwarsa agar transaksi tidak dikonfirmasi dua kali.

Langkah selanjutnya

Buat dashboard kasir dan layar pembayaran satu tangan dengan floow.design. Mulai dari alur katalog, keranjang, diskon, QRIS, tunai, PPN, hingga struk, lalu uji setiap keadaan transaksi sebelum diterapkan ke aplikasi.

---

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
• •Direktorat Jenderal Pajak — Tarif PPN 11%