Gubuku – 1. Kejelasan Nomor Satu, Estetik Nomor Dua (Function over Form)

Ikon aplikasi bank itu beda sama ikon game atau media sosial. Kalau orang salah paham sama arti ikonnya, risikonya bisa berabe (salah kirim uang, misalnya!).

• Gunakan Metagora yang Populer: Jangan ubah bentuk ikon dasar yang udah dipahami umum. Misalnya, ikon “Rumah” untuk Home, “Dompet” atau “Kartu” untuk Saldo/Kartu, dan “Kamera/Kotak” untuk QRIS.

• Hindari Desain yang Terlalu Abstrak: Seni itu bagus, tapi di aplikasi bank, kejelasan adalah raja. Jangan bikin ikon yang bikin pengguna mikir keras “Ini tombol buat apa, ya?”.

2. Terapkan Konsistensi Gaya (Grid & Style Guide)

Biar aplikasi kelihatan rapi dan profesional, semua ikon wajib punya aturan main yang sama.

• Metode Stroke atau Fill: Tentukan dari awal mau pakai gaya line art (garis tipis) atau filled (blok warna). Umumnya, line art dipakai saat status tombol inaktif, dan filled saat tombol sedang dipilih/di-klik.

• Ukuran Grid yang Presisi: Pakai standar pixel grid (misal 24×24 px) dengan ketebalan garis (stroke width) yang seragam. Ini ngebantu banget biar tampilan UI aplikasi tetap seimbang di berbagai ukuran layar HP.

3. Gunakan Warna dengan Bijak (Color Psychology)

Warna pada ikon gak cuma buat pemanis, tapi juga bawa navigasi psikologis:

• Ikon Utama: Pakai warna identitas brand bank tersebut (misal biru, hijau, atau merah khas branding).

• Ikon Status:

  • Hijau: Transaksi berhasil / Saldo masuk.

  • Merah: Pembayaran / Saldo keluar / Peringatan keamanan.

  • Kuning/Oranye: Transaksi tertunda (pending).

4. Tambahkan Text Label (Gak Boleh Gengsi!)

Banyak desainer pemula terjebak pengen bikin tampilan yang ultra-minimalist sampai cuma nampilin ikon doang tanpa teks. Padahal, aplikasi finansial itu butuh kejelasan ekstra.

Selalu sertakan label teks singkat tepat di bawah ikon (misal: “Transfer”, “Top Up”, “Mutasi”). Ini membantu pengguna baru memahami fungsi tombol dalam hitungan milidetik tanpa ragu-ragu.

5. Micro-Interaction Bikin Pengalaman Menggunakan Aplikasi Lebih Satisfying

Biar gak garing, kasih sedikit animasi kecil saat ikon ditekan. Misalnya:

• Ikon “Lonceng Notifikasi” yang bergetar halus saat ada pesan baru.

• Ikon “Transfer” yang bergeser sedikit saat di-klik.

Sentuhan animasi mikro (micro-animation) ini ngasih umpan balik (feedback) visual yang bikin interaksi di aplikasi berasa lebih responsif dan menyenangkan buat Gen Z.

 Penulis : Adellia SMK SUDJ