Desain UI Aplikasi Fintech: Jadikan Urusan Keuangan Jelas dan Menenangkan

Buat saldo mudah dibaca dalam konteksnya

Angka besar tidak menjelaskan dirinya sendiri. Sebutkan rekening yang terkait dan tampilkan mata uang dengan simbol atau kode yang dikenal. Jika produk membedakan jumlah saat ini, tersedia, tertunda, atau diinvestasikan, beri label langsung pada konsep tersebut dan jelaskan bila perlu. Hindari menampilkan dua jenis saldo berbeda dengan gaya hampir sama tanpa definisi.

Konteks juga dapat mencakup waktu terakhir jumlah diperbarui atau aktivitas yang masih tertunda. Pilih detail yang membantu seseorang menafsirkan layar, alih-alih menambahkan angka sebagai hiasan. Gunakan format angka yang konsisten dan jarak yang memadai agar digit, pemisah desimal, dan tanda minus mudah dibedakan. Untuk nama rekening yang panjang, pertahankan cukup teks agar rekening dapat dibedakan tanpa hanya bergantung pada warna atau ikon.

• Gunakan label rekening dan mata uang yang eksplisit di dekat jumlahnya.
• Jelaskan istilah khusus seperti “tersedia” atau “tertunda” dengan bahasa sederhana.
• Pastikan jumlah dan status yang sama tetap dapat dipahami dengan teks yang diperbesar dan teknologi bantu.

Tampilkan status transaksi sebagai keadaan yang berubah

Transaksi adalah proses, bukan sekadar baris dalam daftar riwayat. Berikan status singkat, tanggal, jumlah, serta pihak lawan atau tujuan untuk tiap item bila sesuai. Pastikan label status terlihat dalam teks; warna atau ikon dapat memperkuatnya, tetapi tidak boleh menjadi satu-satunya pembawa makna. Bedakan aktivitas yang menunggu, selesai, ditolak, atau memerlukan perhatian sesuai status nyata dalam produk.

Misalnya, transfer hipotetis sebesar 45,00 EUR kepada Alex mungkin mula-mula bertuliskan “Dijadwalkan pada 4 November,” lalu “Sedang diproses,” dan kemudian “Selesai.” Jika koneksi habis waktu setelah pengiriman, jangan menyatakan berhasil atau gagal dengan yakin tanpa bukti. Katakan bahwa status belum tersedia, jelaskan cara memeriksanya lagi, dan perjelas apakah mencoba ulang dapat membuat permintaan lain. Redaksi dan tindakan yang tersedia bergantung pada perilaku transaksi sebenarnya dalam produk.

Rancang formulir keuangan yang mencegah kebingungan yang dapat dihindari

Mintalah informasi ketika diperlukan untuk tugas, dan kelompokkan kolom terkait agar formulir terbaca dalam urutan yang masuk akal. Gunakan label yang tetap terlihat seperti “Penerima” atau “Jumlah”; placeholder adalah contoh, bukan pengganti label. Jika kolom mengharapkan format tertentu, nyatakan sebelum pengguna mengetik—misalnya, apakah jumlah menerima sen atau pengenal apa yang perlu dimasukkan. Panduan Apple tentang entri data menyarankan agar informasi yang diminta jelas, entri yang tidak perlu diminimalkan, dan nilai divalidasi saat pengguna memasukkannya.

Pilih kontrol input yang sesuai dengan informasinya dan memungkinkan orang memperbaiki entri. Tunjukkan dengan jelas kolom opsional dan pastikan kolom wajib dapat dikenali. Jika suatu pilihan memiliki konsekuensi, jelaskan opsi dengan bahasa sederhana alih-alih mengharuskan orang menebak arti kode singkat. Petunjuk kolom harus cukup dekat dengan kontrolnya agar tetap dapat dipahami saat tata letak layar berubah atau diperbesar.

Berikan langkah tinjauan dan konfirmasi yang berguna

Sebelum tindakan yang berdampak, rangkum informasi yang akan dikirimkan: sumber, tujuan, jumlah, tanggal, dan biaya atau waktu yang ditampilkan serta relevan dengan alur. Tempatkan detail paling penting untuk keputusan secara berdekatan dan buat jalur pengeditan mudah ditemukan. Tindakan utama sebaiknya menjelaskan tindakannya, misalnya “Jadwalkan transfer,” bukan “Lanjutkan” yang ambigu.

Layar konfirmasi harus menjawab “Apa yang terjadi?” dan “Apa yang bisa saya lakukan sekarang?” Tampilan referensi atau tanda terima dapat membantu pencarian di kemudian hari. Jangan anggap ketukan tombol sebagai bukti bahwa operasi yang mendasarinya berhasil; antarmuka harus mencerminkan hasil aktual yang dikembalikan produk.

• Pastikan ringkasan sesuai dengan nilai yang dimasukkan dan opsi yang dipilih.
• Buat tindakan kembali dan edit mempertahankan pekerjaan pengguna sejauh memungkinkan.
• Setelah pengiriman, nyatakan apakah permintaan diterima, sedang diproses, atau telah memiliki hasil yang terkonfirmasi.
• Jika responsnya belum pasti, jelaskan cara memeriksa status terkini sebelum mengundang pengiriman ulang.

Pastikan pesan kesalahan dan pembaruan status dapat diakses

Ketika kesalahan input terdeteksi, tunjukkan kolomnya dan jelaskan masalahnya dalam teks. “Jumlah tidak valid” kurang berguna daripada pesan yang menjelaskan format yang diterima atau nilai yang belum diisi. Pertahankan entri yang sudah valid agar orang dapat memperbaiki satu masalah tanpa mulai dari awal. Panduan WCAG 2.2 dari W3C mengharuskan kesalahan input yang terdeteksi diidentifikasi dan dijelaskan, serta label atau instruksi disediakan saat input diperlukan.

Pembaruan status juga penting. Jika halaman berubah dari “Sedang diproses” menjadi “Selesai” tanpa memindahkan fokus, tampilkan pembaruan itu dengan cara yang dapat dikenali teknologi bantu. WCAG 2.2 menjelaskan pesan status sebagai perubahan yang menyampaikan hasil, penantian, kemajuan, atau kesalahan tanpa memerlukan perubahan konteks. Jaga agar pemberitahuan sepadan: umumkan perubahan bermakna tanpa berulang kali mengganggu orang pada setiap penyegaran visual.

Periksa kontras, pembesaran teks, akses papan ketik atau sakelar, dan nama yang dibaca pembaca layar pada antarmuka yang sudah diterapkan. Gunakan judul dan label kontrol yang jelas, serta jangan menandai keberhasilan, kesalahan, atau arah transaksi hanya dengan warna. Prinsip desain Apple menekankan umpan balik yang jelas dan bantuan untuk pulih dari kesalahan; itu merupakan tujuan yang berguna, sementara aksesibilitas sebenarnya perlu dievaluasi pada produk secara utuh.

Daftar periksa tinjauan antarmuka fintech

Telusuri tugas yang umum dari saldo awal hingga status akhir. Periksa jalur biasa, satu perbaikan, dan satu gangguan seperti koneksi lambat. Bandingkan layar seluler terkait di pustaka untuk melihat bagaimana antarmuka berbeda menyusun informasi dan tindakan, lalu nilai alur Anda sendiri berdasarkan perilaku nyata produknya.

• Dapatkah seseorang mengetahui rekening dan mata uang yang dijelaskan oleh saldo?
• Apakah status tertunda dan selesai diberi nama dengan jelas serta ditampilkan dalam teks?
• Apakah setiap kolom memiliki label yang terlihat dan petunjuk format jika diperlukan?
• Dapatkah orang meninjau tujuan, jumlah, dan waktu sebelum mengirimkan?
• Apakah kesalahan menunjukkan masalah dan menawarkan perbaikan yang praktis?
• Apakah pembaruan tetap dapat dipahami tanpa bergantung pada warna, ketajaman penglihatan, atau perpindahan fokus?
• Jika hasilnya belum pasti, apakah antarmuka menjelaskan cara memeriksa sebelum mencoba lagi?