Gubuku – Pernah gak sih lo buka aplikasi finansial atau investasi, terus dalam waktu 3 detik mata lo langsung lelah karena layarnya penuh sama angka, grafik, tombol, dan warna-warna yang saling berteriak? Fix, itu contoh aplikasi yang Information Hierarchy-nya berantakan!

Di era sekarang, aplikasi transaksi keuangan—mulai dari m-banking, multi-asset investment, sampai platform freelance payment—isinya makin kompleks. Banyak banget data krusial yang harus ditampilkan: saldo, riwayat transaksi, grafik saham, transfer fee, hingga verifikasi keamanan.

Kalau lo sebagai desainer UI/UX atau product owner gak pinter ngatur hierarki informasinya, pengguna (user) bakal merasa overwhelmed, takut salah pencet, dan akhirnya malah uninstall aplikasinya.

Biar aplikasi keuangan kompleks buatan lo tetap terasa smooth, aman, dan gampang dipakai, simak panduan menyusun information hierarchy yang efektif di bawah ini!

1. Tentukan “Primary Focal Point” di Setiap Layar

Rumus utama hierarki visual: gak semua informasi itu sama pentingnya. Lo harus menentukan satu informasi paling krusial yang wajib dilihat user dalam lirikan pertama.

• Layar Utama (Dashboard): Biasanya, hal pertama yang dicari user adalah Total Saldo dan Aksi Utama (seperti tombol Send/Transfer atau Pay). Jadikan dua elemen ini paling menonjol.

• Layar Konfirmasi: Informasi paling penting adalah Nominal Transaksi dan Nama Penerima. Bikin ukurannya paling besar dan kontras.

Tips: Gunakan teknik squint test (kejip-kejipkan mata saat melihat desain). Elemen mana yang paling pertama kelihatan? Kalau yang kelihatan duluan malah teks syarat & ketentuan, berarti hierarki lo belum bener!

2. Gunakan “Visual Weight” yang Jelas (Ukuran, Warna, & Bobot)

Visual weight adalah cara lo memandu mata user lewat perbedaan bentuk dan warna elemen.

• Ukuran Font (Type Scale): Pakai skala ukuran font yang tegas. Misalnya, judul/nominal, dan keterangan pendukung (Regular).

• Warna & Kontras: Untuk angka saldo atau tombol action, gunakan warna dengan kontras tinggi. Untuk label pendukung (seperti “Nomor Referensi” atau “Tanggal”), gunakan warna abu-abu (neutral tone) biar gak mengalihkan perhatian.

3. Terapkan Metode “Progressive Disclosure”

Salah satu rahasia bikin aplikasi kompleks kelihatan simpel adalah Progressive Disclosure. Artinya: tampilkan informasi secukupnya saat dibutuhkan, sembunyikan sisanya sampai user memintanya.

Gimana cara terapkannya di aplikasi keuangan?

• Gunakan Accordion / Dropdown: Detail transaksi yang rumit (seperti rincian biaya admin, kurs mata uang, dan pajak) gak perlu dibeberkan semua di layar utama. Cukup tampilkan totalnya, lalu sediakan opsi “Lihat Rincian Biaya” yang bisa di-klik.

• Multi-Step Flow: Jangan tumpuk form transfer, input catatan, dan opsi jadwal pembayaran dalam satu layar panjang. Bagi jadi beberapa langkah singkat (Step 1: Pilih Penerima $\rightarrow$ Step 2: Input Nominal $\rightarrow$ Step 3: Konfirmasi).

4. Kelompokkan Data Menggunakan “Law of Proximity” (Gestalt Principle)

Prinsip dasar psikologi Gestalt menyebutkan bahwa elemen yang letaknya berdekatan bakal dianggap sebagai satu kelompok yang saling berhubungan oleh otak manusia.

• Card Design: Bungkus informasi terkait dalam satu bentuk kartu (card). Contohnya: Kartu “Riwayat Transaksi Terakhir” terpisah dari Kartu “Tagihan Bulan Ini”.

• White Space (Ruang Kosong): Berikan jarak (padding/margin) yang cukup antar kelompok data. Ruang kosong bukan area buangan, tapi elemen visual yang bikin data kompleks jadi bernapas dan mudah dicerna.

5. Bikin Navigasi & Microcopy yang Humanis

Data keuangan itu sensitif. Salah panggil istilah dikit aja bisa bikin user panik.

• Navigasi Konsisten: Taruh tombol aksi utama di area yang gampang dijangkau jempol (thumb zone), biasanya di bagian bawah layar.

• Microcopy yang Jelas: Hindari bahasa teknis perbankan yang kaku. Daripada pakai istilah “Kliring Berjangka”, lebih baik tulis “Transfer Hemat (1-2 Hari Kerja)”.

Ringkasan Matriks Hierarki Informasi Aplikasi Keuangan

Biar gampang dibayangkan, ini dia contoh pembagian level informasi pada layar transaksi:

Level Hierarki	Elemen Visual	Contoh Informasi	Perlakuan Desain
Primary (Utama)	Focal Point	Total Saldo, Nominal Transfer, Tombol “Kirim”	Font besar, bold, warna kontras tinggi
Secondary (Kedua)	Supporting Data	Nama Penerima, Bank Tujuan, Status Transaksi	Font sedang, warna netral/gelap
Tertiary (Ketiga)	Detail/Pendukung	Tanggal, ID Transaksi, Biaya Admin	Font kecil, warna abu-abu, bisa disembunyikan dalam dropdown

Penulis: zahra dari smkss2