Belajar UI Designer - Data Visualization UI

#Pendahuluan

Setelah di episode 16 produk kita bergerak dengan baik, pada episode ini kita menyajikan data — dan bagi aplikasi keuangan seperti Kantongin, data adalah inti produknya: saldo, pengeluaran, tabungan, laporan. Dashboard yang baik bukan sekadar kumpulan chart cantik; ia adalah cerita yang bisa dibaca dalam sekejap.

Mengapa data visualization wajib dikuasai UI designer? Karena visualisasi data adalah desain yang paling mudah menipu — sumbu yang dipotong membuat perbandingan menyesatkan, warna merah-hijau membuat pengguna buta warna kehilangan informasi, chart 3D yang "menarik" justru merusak akurasi. UI designer bertanggung jawab agar data tersampaikan dengan jujur dan jelas.

#Memilih Chart yang Tepat

Chart bukan dekorasi — ia alat komunikasi. Tiap jenis punya kekuatan:

Pertanyaan data	Chart yang tepat	Contoh Kantongin
Perubahan seiring waktu	Line chart	Tren pengeluaran 30 hari
Perbandingan kategori	Bar chart	Pengeluaran per kategori
Bagian dari keseluruhan	Donut/pie (≤ 5 slice)	Porsi kategori bulan ini
Proporsi bertumpuk	Stacked bar	Pengeluaran per bulan per kategori
Distribusi	Histogram	Rentang nominal transaksi
Dua variabel	Scatter	Jumlah vs nominal transaksi

Aturan kunci: jangan gunakan pie chart untuk lebih dari 5-6 bagian, dan jangan pakai 3D chart untuk data yang presisi. Jika pengguna perlu membandingkan akurat, bar chart hampir selalu lebih baik daripada pie.

#Prinsip Visualisasi Data

#Mulai Sumbu di Nol (untuk Perbandingan Jujur)

Memotong sumbu Y membuat selisih kecil tampak dramatis. Untuk perbandingan yang jujur, bar chart dimulai dari nol. Line chart boleh dipotong — tapi harus ditandai jelas (break pada sumbu) agar tidak menyesatkan.

Sumbu penuh vs dipotong (jangan menipu)

BAR (jujur)      BAR (menyesatkan)
  40 ┤ ██          │ ██    ← mulai dari 30
  30 ┤ ██          │ ██
  20 ┤ ██ ██       │ ██ ██  ← selisih tampak besar
   0 ┴────────      └────────  padahal 20 vs 25

#Pilih Warna yang Bermakna

Data memakai warna semantik (episode 3): satu hue netral untuk semua bar, warna aksen untuk bar yang sedang dibahas. Hindari rainbow tanpa makna dan pasangan merah-hijau untuk perbandingan. Tambahkan pola/texture atau label untuk dukungan non-warna (episode 15).

#Label yang Jelas

Axis labels selalu ada (bulan, nominal) — jangan mengandalkan hover saja.
Angka langsung — untuk satu-dua nilai penting, tampilkan angka di chart, bukan hanya sumbu.
Tooltip detail — detail lengkap lewat tooltip/expand, nilai inti langsung terlihat.

#Don't Chart, Tell

Dashboard terbaik tidak selalu berupa chart raksasa — seringkali satu angka headline lebih komunikatif:

Ringkasan kartu di dashboard Kantongin

┌─────────────────────────────┐
│ Pengeluaran bulan ini       │
│ Rp 1.240.000                │  ← angka besar, langsung terbaca
│ ▼ 8% dibanding bulan lalu   │
│ ▏▏▏▏▏▏▏▏ 62% dari budget   │  ← progress bar sekilas
└─────────────────────────────┘

Aturan praktis: "show the number, tell the story, provide the detail". Angka headline → konteks/arah → detail on demand.

Tip

Sebelum menggambar chart, tulis kalimat yang ingin disampaikan chart itu dalam satu kalimat — misal "pengeluaran makan melonjak 20% minggu ini". Lalu pilih chart dan highlight yang mendukung kalimat itu. Jika chart tidak bisa dirangkum satu kalimat, mungkin ia menampilkan terlalu banyak hal sekaligus.

#Dashboard Layout

Dashboard = halaman yang penuh data. Tata letaknya harus punya hierarki informasi yang jelas:

Angka kunci di atas — saldo, pengeluaran bulan ini, target tabungan (paling sering dilihat).
Alur kiri-ke-kanan — headline → trend → detail kategori.
Grid konsisten — kartu sejajar dengan grid 12 kolom (episode 5); hindari ukuran kartu yang "random".
Progressive disclosure — ringkasan di layar utama, detail di halaman drill-down.

Grid dashboard Kantongin (desktop)

[ Headline 4col ] [ Headline 4col ] [ Headline 4col ]
[         Tren pengeluaran 8col          ] [ Kategori 4col ]
[              Transaksi terbaru 8col               ] [ Target 4col ]

#Data UI yang Salah (Pitfalls)

Chart demi chart — menumpuk visualisasi tanpa cerita; dashboard jadi poster, bukan alat.
Menyesatkan dengan sumbu — skala dipotong tanpa tanda; perbandingan jadi bohong.
Warna tanpa makna — rainbow chart yang tidak membantu perbandingan.
Hanya bergantung warna — pengguna buta warna kehilangan sinyal (episode 15).
Mengabaikan loading & empty — chart yang kosong atau memuat tanpa state yang jelas.

Warning

Visualisasi data yang menyesatkan bukan sekadar "jelek" — dalam konteks keuangan ia bisa merugikan keputusan pengguna (misal mengira saldo lebih besar dari sebenarnya karena sumbu dipotong). Jadikan kejujuran data sebagai prinsip desain, bukan hanya preferensi.

#Praktik: Dashboard Kantongin

Tentukan satu kalimat cerita untuk dashboard pengeluaran ("pengeluaran bulan ini turun 8%").
Pilih 2-3 visualisasi yang mendukung cerita (angka headline + line trend + bar kategori).
Susun dalam grid 12 kolom dengan hierarki: headline → tren → detail.
Pastikan warna data dari palette semantik, dengan label dan dukungan non-warna.
Desain state loading (skeleton) dan empty (belum ada transaksi).

#Penutup

Pada episode 17 ini, kalian telah menyajikan data Kantongin dengan jujur, jelas, dan mudah dibaca sekilas.

Inti yang harus dibawa pulang:

Pilih chart sesuai pertanyaan data; pie maksimal 5-6 slice, hindari 3D.
Prinsip: sumbu jujur, warna bermakna, label jelas, angka headline.
Dashboard layout = hierarki: angka kunci → tren → detail, dalam grid konsisten.
Data yang menyesatkan adalah kegagalan desain, bukan sekadar selera.

Di episode 18 selanjutnya kita akan membahas ethical & trustworthy UI — menghindari dark patterns dan merancang antarmuka yang jujur untuk Kantongin. Sampai jumpa di episode 18!