Bab 16: Membangun Dashboard Interaktif

Dari Worksheet Menuju Dashboard

Pada Bab 15, kamu sudah mempelajari cara membangun satu worksheet sederhana menggunakan dimension dan measure. Namun dalam praktik nyata, tim manajemen jarang hanya membutuhkan satu chart tunggal untuk memahami kondisi bisnis secara menyeluruh. Mereka biasanya membutuhkan beberapa sudut pandang sekaligus, misalnya tren penjualan dari waktu ke waktu, perbandingan performa antar kategori, dan sebaran geografis pelanggan, yang idealnya bisa dilihat dalam satu tampilan yang sama tanpa perlu berpindah-pindah antar file atau worksheet terpisah.

Dashboard adalah kumpulan beberapa worksheet atau elemen visual yang disusun bersama dalam satu kanvas, dirancang agar pengguna bisa melihat berbagai sudut pandang data sekaligus, dan yang membedakan dashboard yang baik dari sekadar kumpulan chart yang ditempel bersamaan adalah interaktivitas serta keterhubungan antar elemen di dalamnya. Dashboard yang baik memungkinkan penggunanya untuk menjelajahi data secara mandiri, misalnya memfilter tampilan sesuai kebutuhan spesifik mereka, tanpa harus meminta bantuan seorang Data Analyst setiap kali ingin melihat sudut pandang yang berbeda.

Cross-Filtering: Elemen yang Saling Terhubung

Cross-filtering adalah kemampuan sebuah dashboard di mana interaksi pada satu elemen visual secara otomatis memengaruhi tampilan elemen visual lainnya yang ada dalam dashboard yang sama, tanpa perlu pengaturan filter terpisah untuk masing-masing elemen. Konsep ini mirip dengan Slicer pada Pivot Table yang sudah dipelajari di Bab 8, namun pada BI Tool, kemampuan ini bisa diterapkan langsung melalui interaksi pada chart itu sendiri, tidak selalu memerlukan elemen filter terpisah.

Sebagai ilustrasi, bayangkan dashboard Belanjain memiliki dua elemen, sebuah bar chart yang menampilkan total penjualan per kategori produk, dan sebuah tabel yang menampilkan daftar produk terlaris. Dengan cross-filtering diaktifkan, ketika seorang pengguna mengklik batang "Fashion" pada bar chart, tabel produk terlaris di sebelahnya akan secara otomatis memperbarui tampilannya, hanya menampilkan produk-produk dari kategori Fashion saja, tanpa pengguna perlu mengatur filter tambahan secara manual. Interaksi semacam ini membuat dashboard terasa jauh lebih hidup dan eksploratif, karena pengguna bisa "menggali" data hanya dengan mengklik elemen visual yang menarik perhatian mereka.

Action Filter: Interaksi yang Lebih Terarah

Action filter adalah bentuk interaktivitas yang lebih spesifik dibanding cross-filtering, di mana kamu sebagai perancang dashboard menentukan secara eksplisit chart mana yang menjadi "sumber" aksi (yang bisa diklik untuk memicu filter), dan chart mana yang menjadi "target" yang akan terpengaruh oleh aksi tersebut. Berbeda dengan cross-filtering yang sering kali berlaku otomatis ke seluruh elemen dashboard, action filter memberikan kontrol lebih presisi mengenai elemen mana yang saling terhubung dan elemen mana yang tetap independen.

Sebagai ilustrasi kebutuhan action filter yang lebih spesifik, bayangkan dashboard Belanjain memiliki tiga elemen: peta sebaran penjualan per kota, bar chart kategori produk, dan sebuah kartu ringkasan (summary card) yang menampilkan total revenue keseluruhan perusahaan yang sengaja ingin selalu ditampilkan secara utuh tanpa terpengaruh filter apa pun, sebagai angka acuan pembanding. Dengan action filter, kamu bisa mengatur agar klik pada peta kota hanya memengaruhi bar chart kategori produk, namun tidak memengaruhi kartu ringkasan total revenue, sehingga pengguna tetap memiliki angka pembanding yang konsisten meskipun sedang menjelajahi data kota tertentu secara mendalam.

Parameter: Fleksibilitas yang Dikontrol Pengguna

Parameter adalah elemen kontrol yang memungkinkan pengguna dashboard mengubah nilai tertentu yang memengaruhi bagaimana data ditampilkan, namun berbeda dari filter yang hanya menyaring data yang sudah ada, parameter bisa dipakai untuk mengubah logika perhitungan itu sendiri secara dinamis. Sebagai ilustrasi, bayangkan tim manajemen Belanjain ingin bisa mengubah-ubah ambang batas nilai transaksi yang didefinisikan sebagai "Transaksi Besar" secara langsung dari dashboard, tanpa perlu meminta Data Analyst mengubah calculated field setiap kali definisi ini berubah sesuai kebutuhan diskusi.

Dengan parameter, kamu bisa membuat sebuah kontrol input (misalnya berupa slider atau kotak angka) yang memungkinkan pengguna memasukkan angka ambang batas sesuai keinginan mereka, dan calculated field yang sudah dibahas pada Bab 15 bisa dirujuk pada nilai parameter tersebut, alih-alih angka tetap yang di-hardcode. Hasilnya, ketika pengguna mengubah nilai parameter dari misalnya 500 ribu menjadi 1 juta, seluruh visualisasi yang bergantung pada calculated field tersebut akan otomatis menyesuaikan diri, memberikan fleksibilitas eksplorasi yang jauh lebih besar dibanding dashboard statis yang nilai ambang batasnya sudah ditetapkan secara permanen oleh Data Analyst yang membangunnya.

Prinsip UI/UX untuk Pengguna Bisnis

Membangun dashboard yang secara teknis berfungsi dengan baik belum tentu berarti dashboard tersebut mudah dipahami dan nyaman digunakan oleh penggunanya. Beberapa prinsip UI/UX dasar berikut ini penting diperhatikan, khususnya karena pengguna dashboard biasanya adalah tim bisnis yang tidak memiliki latar belakang teknis, dan sering kali memiliki waktu terbatas untuk memahami apa yang ditampilkan.

Visual hierarchy adalah prinsip pengaturan elemen visual sedemikian rupa sehingga informasi paling penting langsung menarik perhatian pengguna terlebih dahulu, sebelum informasi pendukung lainnya. Sebagai ilustrasi penerapan, pada dashboard Belanjain, angka total revenue bulan berjalan sebaiknya ditempatkan di posisi paling menonjol, misalnya di bagian atas dengan ukuran font yang jauh lebih besar dibanding elemen lainnya, karena angka ini kemungkinan besar menjadi informasi yang paling ingin segera diketahui oleh siapa pun yang membuka dashboard tersebut. Elemen pendukung seperti breakdown per kategori atau per kota bisa ditempatkan di bagian bawah atau samping, dengan ukuran yang lebih kecil, karena sifatnya sebagai informasi detail yang dilihat setelah gambaran besar sudah tertangkap.

Grid alignment adalah prinsip menyusun elemen-elemen dashboard mengikuti garis kisi (grid) yang konsisten, sehingga elemen-elemen tersebut terlihat rapi dan sejajar satu sama lain, bukan tersusun secara acak dengan ukuran dan posisi yang tidak konsisten. Dashboard dengan grid alignment yang baik akan terasa lebih profesional dan mudah dinavigasi, karena mata pengguna tidak perlu menyesuaikan diri dengan pola penempatan yang berubah-ubah di setiap bagian layar. Sebagai kebiasaan praktis, sebelum mulai menambahkan elemen ke kanvas dashboard, ada baiknya merencanakan terlebih dahulu pembagian area secara kasar, misalnya membagi kanvas menjadi beberapa baris dan kolom yang konsisten, sebelum mengisi setiap area tersebut dengan elemen visual yang sesuai.

Warna juga memainkan peran penting dalam UI/UX dashboard, khususnya dalam konteks konsistensi dan makna. Sebagai praktik yang baik, warna yang dipakai untuk merepresentasikan kategori tertentu sebaiknya konsisten di seluruh elemen dashboard, misalnya jika kategori Fashion direpresentasikan dengan warna biru pada satu chart, kategori yang sama sebaiknya tetap berwarna biru pada chart lainnya dalam dashboard yang sama, agar pengguna tidak bingung menginterpretasikan warna yang berbeda-beda untuk kategori yang sebenarnya sama.

Executive Dashboard dan "5-Second Test"

Sebagai standar praktis untuk mengevaluasi apakah sebuah dashboard, khususnya dashboard yang ditujukan untuk level eksekutif, sudah dirancang dengan baik, sering dipakai konsep yang disebut 5-second test. Prinsip ini menyatakan bahwa seorang eksekutif yang sibuk seharusnya bisa menangkap informasi paling penting dari sebuah dashboard hanya dalam waktu lima detik pertama melihatnya, tanpa perlu membaca detail atau berinteraksi terlebih dahulu.

Sebagai ilustrasi penerapan 5-second test pada dashboard Belanjain, bayangkan seorang direktur membuka dashboard penjualan di sela-sela rapat yang padat. Dalam lima detik pertama, mereka seharusnya sudah bisa menangkap apakah performa bulan ini secara umum baik atau buruk (misalnya melalui indikator warna hijau atau merah pada angka utama), tren kasar arah pergerakan bisnis (misalnya melalui sekilas bentuk line chart yang naik atau turun), dan area mana yang mungkin membutuhkan perhatian lebih (misalnya melalui penyorotan visual pada kategori atau kota dengan performa di bawah target). Jika seorang direktur perlu menatap dashboard selama satu menit penuh dan masih kebingungan menyimpulkan kondisi bisnis secara umum, dashboard tersebut kemungkinan besar gagal memenuhi standar 5-second test, dan perlu dirancang ulang dengan visual hierarchy yang lebih jelas.

Untuk mencapai standar ini, kombinasi seluruh prinsip yang sudah dibahas sepanjang bab ini menjadi sangat penting: visual hierarchy yang menonjolkan angka paling krusial, warna yang secara konsisten menandakan performa baik atau buruk, grid alignment yang membuat mata pengguna bisa dengan mudah menelusuri dashboard secara berurutan, serta cross-filtering dan action filter yang memungkinkan eksplorasi lebih dalam bagi mereka yang memang membutuhkan detail lebih lanjut, tanpa membebani tampilan awal dashboard dengan terlalu banyak informasi sekaligus.

Merangkai Executive Dashboard untuk Belanjain

Untuk mengaplikasikan seluruh konsep yang sudah dibahas, mari bayangkan skenario menyeluruh membangun sebuah Executive Dashboard bagi tim manajemen Belanjain, yang perlu lolos standar 5-second test yang sudah dijelaskan sebelumnya.

Pada bagian paling atas dashboard, dengan visual hierarchy paling menonjol, ditempatkan beberapa kartu ringkasan (summary card) yang menampilkan metrik utama seperti total revenue bulan berjalan, dilengkapi indikator warna hijau atau merah yang menandakan apakah angka tersebut berada di atas atau di bawah target, sebuah pendekatan yang langsung menjawab pertanyaan paling mendasar dalam hitungan detik pertama. Di bagian tengah dashboard, disusun dengan grid alignment yang konsisten, ditempatkan sebuah line chart tren penjualan bulanan di sisi kiri, dan sebuah bar chart perbandingan performa antar kategori produk di sisi kanan, keduanya dalam ukuran yang sejajar dan seimbang.

Di bagian bawah, ditempatkan peta sebaran penjualan antar kota, yang dihubungkan melalui action filter dengan bar chart kategori produk di atasnya, sehingga ketika pengguna mengklik salah satu kota pada peta, bar chart kategori produk akan otomatis memperbarui tampilannya khusus untuk kota tersebut, memungkinkan eksplorasi lebih dalam bagi pengguna yang tertarik menyelidiki performa kota tertentu, tanpa mengubah tampilan kartu ringkasan total revenue di bagian atas yang sengaja tetap menampilkan angka keseluruhan perusahaan sebagai acuan pembanding, konsisten dengan prinsip action filter yang sudah dibahas sebelumnya.

Dashboard yang dirancang dengan struktur seperti ini memungkinkan dua jenis pengguna sekaligus terlayani dengan baik: eksekutif yang hanya memiliki waktu lima detik untuk menangkap gambaran umum melalui kartu ringkasan di bagian atas, maupun analis atau manajer yang ingin menggali lebih dalam melalui interaksi cross-filtering dan action filter pada elemen-elemen di bagian bawah dashboard.