1. Latar Belakang

Riwayat transaksi adalah salah satu fitur paling sering diakses pengguna dalam aplikasi keuangan. Menurut berbagai riset UX tentang perilaku pengguna fintech, fitur ini diakses rata-rata 3–5 kali per minggu hanya untuk memeriksa apakah pembayaran sudah masuk, mengecek tagihan yang sudah dibayar, atau sekadar memantau pengeluaran bulan ini. Artinya, meski terkesan fitur "sekunder", halaman riwayat transaksi justru menjadi salah satu halaman yang paling banyak disentuh pengguna setelah halaman utama.

Namun sayangnya, banyak aplikasi keuangan memperlakukan halaman ini seadanya — hanya menampilkan daftar angka dan nama tanpa struktur yang jelas. Hasilnya, pengguna harus mengernyitkan dahi untuk memahami mana transaksi yang masuk, mana yang keluar, mana yang sudah berhasil, dan mana yang masih diproses. Kebingungan seperti ini berbahaya dalam konteks keuangan karena bisa menimbulkan ketidakpercayaan pengguna terhadap sistem.

Dalam pengembangan SmartPay Purbalingga di Perwira Learning Center Week 11, merancang halaman riwayat transaksi yang benar-benar informatif dan ramah pengguna menjadi salah satu fokus utama. Bukan sekadar menampilkan data, tetapi menyajikan data tersebut dengan cara yang mudah dipahami oleh semua kalangan pengguna, termasuk mereka yang belum terbiasa dengan aplikasi keuangan digital.

2. Pengertian dan Konsep Dasar

2.1 Apa Itu Riwayat Transaksi?

Riwayat transaksi dalam aplikasi keuangan adalah catatan kronologis seluruh aktivitas finansial yang pernah dilakukan pengguna. Ini mencakup transfer uang keluar, penerimaan uang masuk, pembayaran tagihan, pembelian pulsa, top up saldo, dan segala bentuk pergerakan uang lainnya. Secara fungsi, riwayat transaksi adalah versi digital dari buku tabungan — bedanya, buku tabungan hanya bisa dilihat di bank, sementara riwayat transaksi digital bisa diakses kapan saja dan di mana saja dari genggaman tangan.

2.2 Information Architecture dalam Halaman Riwayat

Information Architecture (IA) atau arsitektur informasi adalah cara kita mengorganisir, mengelompokkan, dan menyajikan data agar mudah ditemukan dan dipahami pengguna. Dalam konteks halaman riwayat transaksi, IA yang buruk berarti pengguna harus scroll panjang melewati belasan transaksi hanya untuk menemukan pembayaran listrik yang mereka lakukan minggu lalu. Sebaliknya, IA yang baik memungkinkan pengguna menemukan transaksi yang mereka cari dalam hitungan detik.

Prinsip utama IA pada riwayat transaksi SmartPay Purbalingga adalah pengelompokan berdasarkan waktu. Transaksi dikelompokkan ke dalam tiga label utama: "Hari Ini", "Kemarin", dan tanggal spesifik untuk transaksi yang lebih lama. Pengelompokan ini mengikuti cara manusia secara alami mengingat kejadian — bukan berdasarkan tanggal angka yang harus dihitung, melainkan berdasarkan konteks waktu relatif yang mudah dipahami.

2.3 Scanability: Bisa Dipahami Hanya dengan Sekali Pandang

Scanability adalah kemampuan pengguna untuk memindai layar secara cepat dan langsung menemukan informasi yang mereka butuhkan, tanpa harus membaca setiap kata atau angka secara seksama. Ini adalah prinsip krusial dalam desain halaman riwayat transaksi karena pengguna jarang membaca — mereka lebih sering memindai.

Untuk mencapai scanability yang baik, setiap baris transaksi di SmartPay Purbalingga dirancang agar pengguna bisa langsung menjawab tiga pertanyaan berikut hanya dalam satu tatapan:

1. Siapa? — Nama penerima atau jenis transaksi (Transfer ke Budi, Bayar Listrik PLN)
2. Berapa? — Nominal uang, dengan warna merah untuk keluar dan hijau untuk masuk
3. Berhasil? — Status badge kecil: Berhasil, Diproses, atau Gagal

3. Pembahasan: Elemen-Elemen Penting dalam Desain Riwayat Transaksi

3.1 Summary Card: Gambaran Besar di Atas Layar

Sebelum pengguna melihat daftar transaksi satu per satu, ada baiknya mereka disajikan terlebih dahulu dengan ringkasan keuangan secara keseluruhan. Di SmartPay Purbalingga, bagian paling atas halaman riwayat menampilkan sebuah summary card — kartu kecil yang menampilkan total uang keluar dan total uang masuk dalam periode tertentu (misalnya bulan ini).

Fungsi summary card ini bukan sekadar dekoratif. Bagi pengguna yang ingin mengetahui "bulan ini aku belanja berapa ya?", mereka tidak perlu menjumlahkan sendiri satu per satu transaksi yang ada. Informasi tersebut sudah tersedia secara instan di bagian paling atas. Ini adalah prinsip UX yang disebut progressive disclosure — sajikan informasi paling penting terlebih dahulu, baru detail selanjutnya.

3.2 Filter Chip: Navigasi yang Cepat dan Intuitif

Ketika pengguna membuka riwayat transaksi, tidak semua dari mereka ingin melihat semua jenis transaksi sekaligus. Ada yang hanya ingin melihat riwayat transfer, ada yang ingin memeriksa tagihan yang sudah dibayar, ada pula yang sedang mencari catatan top up terakhir mereka.

Untuk kebutuhan ini, SmartPay Purbalingga menggunakan filter chip — deretan tombol filter kecil yang bisa diklik secara horizontal di bagian atas daftar transaksi. Pilihan filternya adalah: Semua, Transfer, Pembayaran, dan Top Up. Desain filter chip dipilih karena beberapa alasan: pertama, chip terlihat langsung di layar tanpa perlu membuka dropdown; kedua, chip menunjukkan dengan jelas filter apa saja yang tersedia; dan ketiga, filter yang sedang aktif langsung terlihat dengan perubahan warna chip yang dipilih.

3.3 Pengelompokan Berdasarkan Tanggal

Salah satu keputusan desain paling berdampak dalam halaman riwayat transaksi SmartPay adalah pengelompokan transaksi berdasarkan tanggal dengan label yang humanis. Daripada menampilkan tanggal dalam format angka kaku seperti "22/04/2026", transaksi hari ini ditandai dengan label "Hari Ini", transaksi kemarin dengan label "Kemarin", dan baru setelah itu menggunakan format tanggal lengkap seperti "20 April 2026".

Pendekatan ini mengikuti prinsip psikologi kognitif yang disebut temporal labeling — manusia lebih cepat memproses informasi waktu dalam konteks relatif ("kemarin") dibandingkan informasi waktu absolut ("21 April 2026"). Ketika seseorang bertanya kepada diri sendiri "aku bayar listrik kapan ya?", jawaban pertama yang muncul di kepala mereka biasanya bukan tanggal spesifik, melainkan "sepertinya kemarin" atau "awal minggu ini".

3.4 Transaction Tile: Satu Baris yang Bercerita

Setiap item dalam daftar riwayat transaksi disebut transaction tile. Elemen ini adalah unit terkecil yang harus bisa menyampaikan informasi secara lengkap namun tetap ringkas. Sebuah transaction tile yang baik terdiri dari beberapa elemen visual yang bekerja secara harmonis:

• Ikon jenis transaksi di sebelah kiri: berfungsi sebagai isyarat visual pertama. Ikon panah dua arah untuk transfer, ikon struk untuk pembayaran, ikon tambah untuk top up. Setiap jenis transaksi menggunakan warna ikon yang berbeda agar mudah dibedakan bahkan saat pengguna hanya memindai sekilas.
• Nama dan deskripsi di bagian tengah: baris pertama adalah nama transaksi ("Transfer ke Budi"), baris kedua adalah detail tambahan dalam teks lebih kecil ("BRI · 14:35").
• Nominal dan status di sebelah kanan: nominal ditampilkan dengan warna merah untuk transaksi keluar dan warna hijau untuk transaksi masuk. Di bawah nominal, terdapat badge status kecil — Berhasil, Diproses, atau Gagal — dengan warna background yang sesuai.

3.5 Status Badge: Transparansi yang Membangun Kepercayaan

Dalam konteks aplikasi keuangan, salah satu sumber kecemasan pengguna terbesar adalah ketidakpastian status transaksi. "Apakah uang saya sudah terkirim?" atau "Kenapa nominalnya belum masuk?" adalah pertanyaan yang kerap muncul. Status badge menjawab kecemasan ini secara visual dan langsung.

SmartPay Purbalingga menggunakan tiga status transaksi: Berhasil (hijau), Diproses (oranye), dan Gagal (merah). Warna dipilih berdasarkan konvensi universal yang sudah dipahami secara intuitif oleh kebanyakan orang — hijau berarti aman/sukses, oranye berarti sedang berjalan/perlu menunggu, merah berarti ada masalah.

3.6 Empty State: Layar Kosong yang Tidak Membingungkan

Apa yang ditampilkan saat pengguna belum memiliki transaksi sama sekali, atau saat filter yang dipilih tidak menghasilkan data apapun? Kondisi ini disebut empty state, dan sering diabaikan dalam proses desain. Akibatnya, pengguna melihat layar kosong tanpa penjelasan dan bertanya-tanya apakah ada yang salah dengan aplikasinya.

SmartPay Purbalingga menampilkan ilustrasi sederhana disertai teks yang jelas ketika empty state terjadi, misalnya: "Belum ada transaksi. Transaksi Anda akan muncul di sini setelah pertama kali bertransaksi." Kalimat ini memberikan dua hal sekaligus: konfirmasi bahwa kondisi ini normal, dan ekspektasi yang jelas tentang kapan konten akan muncul.

3.7 Halaman Detail Transaksi

Setiap transaksi dalam daftar dapat diklik untuk melihat informasi lengkapnya di halaman detail. Ini penting karena dalam daftar utama, informasi yang ditampilkan sengaja dibuat ringkas demi scanability. Informasi lengkap seperti nomor referensi, biaya admin, nama bank tujuan, dan catatan transaksi disimpan di halaman detail yang bisa diakses secara opsional oleh pengguna yang membutuhkannya.

Prinsip ini disebut progressive disclosure — tampilkan informasi dasar terlebih dahulu, dan sediakan akses ke informasi lebih dalam hanya ketika pengguna secara aktif memintanya. Dengan cara ini, halaman utama tetap bersih dan mudah dipindai, sementara pengguna yang butuh informasi lebih detail tetap bisa mengaksesnya.

4. Dokumentasi Pembelajaran dan Pengerjaan

4.1 Proses Perancangan

Perancangan halaman riwayat transaksi SmartPay Purbalingga dimulai dari tahap user research ringan — mengidentifikasi pertanyaan apa yang paling sering diajukan pengguna terkait riwayat keuangan mereka. Dari sana, tim di Perwira Learning Center membuat wireframe sederhana yang kemudian diiterasi berulang kali hingga mencapai desain final.

Salah satu keputusan desain yang awalnya diperdebatkan adalah soal pengelompokan berdasarkan tanggal. Ada usulan untuk menggunakan kalender mini agar pengguna bisa langsung melompat ke tanggal tertentu. Namun setelah mempertimbangkan kompleksitas implementasi dan kebutuhan pengguna mayoritas yang hanya ingin melihat transaksi terbaru, akhirnya diputuskan untuk menggunakan sistem pengelompokan sederhana dengan label relatif (Hari Ini, Kemarin, dst.).

4.2 Tantangan yang Dihadapi

Tantangan terbesar dalam membangun halaman ini adalah menyeimbangkan antara kelengkapan informasi dan keterbacaan layar. Data transaksi memiliki banyak atribut — nomor referensi, bank tujuan, biaya admin, catatan, timestamp lengkap, dan lainnya. Jika semuanya ditampilkan sekaligus di daftar utama, layar akan terasa penuh dan sulit dipindai. Solusinya adalah konsep two-level information: daftar utama untuk ringkasan cepat, halaman detail untuk informasi lengkap.

Tantangan kedua adalah penanganan data yang banyak. Ketika pengguna sudah bertransaksi ratusan kali, daftar riwayat bisa menjadi sangat panjang. Solusi yang diterapkan adalah pagination atau lazy loading — data dimuat secara bertahap ketika pengguna scroll ke bawah, sehingga performa aplikasi tetap terjaga.

5. Kesimpulan

Daftar Pustaka