Desain dasbor

Dasbor adalah kumpulan visualisasi pada satu layar yang dibaca berulang untuk menjawab pertanyaan yang tetap. Topik ini mengajarkan tiga prinsip desain yang berlaku pada alat apa pun, yaitu penetapan pertanyaan per layar, penataan zona mengikuti pola pemindaian mata, dan keputusan desain yang padat. Ketiga prinsip itu diuji pada mockup dasbor sekolah yang ditampilkan dalam dua versi, yaitu versi rapi dan versi yang sengaja dibuat berantakan. Hasil akhirnya adalah daftar periksa sederhana untuk menilai dasbor sebelum disebarluaskan.

Satu layar, satu pertanyaan#

Desain dasbor dimulai dari pertanyaan, bukan dari grafik yang kebetulan tersedia. Dasbor yang efektif menjawab pertanyaan yang tetap dan ditanyakan berulang, dan satu layar sebaiknya mengangkat satu pertanyaan utama. Dasbor sekolah pada topik ini menjawab dua pertanyaan, yaitu kelas mana yang memerlukan perhatian dan siswa mana yang berisiko. Apabila daftar pertanyaan bertambah hingga tidak muat dalam satu layar, layarnya dipecah sehingga setiap layar tetap membawa satu pertanyaan utama.

Pertanyaan per layar ditetapkan sebelum komponen apa pun digambar karena urutan ini menentukan seleksi isinya. Setiap grafik dan angka yang tidak membantu menjawab pertanyaan utama dikeluarkan dari layar, dan langkah seleksi itulah yang menjaga dasbor tetap ringkas. Judul layar dapat mengambil alih peran pertanyaan tersebut, misalnya “Ringkasan nilai kelas 7” pada layar pertama dan “Siswa yang perlu pendampingan” pada layar kedua.

Pola pemindaian dan tiga zona#

Pembaca memindai layar dasbor mengikuti pola yang stabil, yaitu mulai dari kiri atas, bergerak ke kanan, kemudian turun ke bawah. Pola ini membuat letak komponen menjadi keputusan desain yang penting, karena komponen yang dibaca paling awal akan paling diingat. Prinsipnya sederhana, yaitu informasi yang paling sering ditanyakan ditempatkan di kiri atas, ringkasan visual mengikuti di sebelah kanan, dan rincian yang dibaca terakhir diletakkan di bagian bawah.

Susunan tersebut lazim dibagi menjadi tiga zona. Zona KPI menampung indikator kinerja utama (key performance indicator, KPI) beserta pembandingnya, zona tren menampung grafik utama layar, dan zona rincian menampung tabel untuk pembaca yang mencari detail. Diagram berikut memperlihatkan pembagian zona beserta arah pemindaian mata pada satu layar.

Letak zona sebaiknya dipertahankan dari hari ke hari karena pembaca menghafal posisi informasi yang dicarinya. Perpindahan komponen antarkunjungan memaksa pembaca memindai ulang seluruh layar, sehingga keuntungan tata letak yang konsisten hilang. Aturan yang sama berlaku untuk urutan KPI, yaitu angka yang paling sering ditanyakan ditempatkan paling kiri.

Keputusan desain yang padat#

Dasbor yang efektif berisi keputusan yang padat, bukan grafik sebanyak-banyaknya. Keputusan pertama adalah warna, yaitu satu warna aksen digunakan untuk menekankan pesan utama, sedangkan elemen lainnya dijaga netral agar penekanan tetap terlihat. Keputusan kedua adalah pembanding, karena nilai kini hampir tidak bermakna tanpa pembandingnya, baik berupa target, periode sebelumnya, maupun kelompok pembanding.

Angka pada dasbor sekolah memperlihatkan keputusan kedua tersebut. Rata-rata matematika seluruh siswa sebesar 79.5 hanya menyatakan posisi umum, sedangkan pembanding antarkelas berupa 81.42 untuk 7A dan 77.58 untuk 7B langsung menunjukkan kelas yang berada di bawah. Keputusan ketiga adalah pemilihan bentuk sesuai pertanyaan, yaitu grafik batang untuk perbandingan antarkelas dan tabel untuk daftar siswa berisiko. Grafik hiasan memperbesar biaya pemindaian tanpa menambah jawaban, sehingga perbaikan satu-satunya adalah menghapusnya dari layar.

Galeri antidasbor#

Stephen Few dalam makalah Common Pitfalls in Dashboard Design mengelompokkan kesalahan yang paling sering muncul pada dasbor nyata. Kesalahan-kesalahan itu jarang berasal dari niat buruk, melainkan dari alat yang membuat dekorasi mudah ditambahkan. Tabel berikut merangkum enam jebakan yang paling sering dijumpai beserta bentuk umum dan perbaikannya, dan galeri semacam ini berguna saat menilai dasbor yang sudah jadi.

Dua jebakan pada tabel berhubungan langsung dengan kejujuran. Sumber data tak terlihat membuat pembaca tidak dapat memeriksa definisi angka, sedangkan rentang waktu yang curang menyembunyikan penurunan di belakang periode yang dipilih. Keduanya tidak terlihat pada tampilan yang indah, sehingga pemeriksaan kejujuran dilakukan terhadap datanya, bukan hanya terhadap tampilannya.

Demo: versi baik dan versi buruk#

Angka pada demo berikut dihitung dari dataset kanonik nilai_ujian.csv yang diperkenalkan pada bagian penyiapan jalur. Salinan dataset berikut disimpan di samping topik ini agar skrip penghitungnya berdiri sendiri. Skrip berikut menghitung rata-rata per kelas untuk tiga mata pelajaran, rata-rata matematika seluruh siswa, dan daftar siswa berisiko dengan kriteria nilai matematika di bawah 70 serta kehadiran di bawah 90.

siswa,kelas,nilai_matematika,nilai_fisika,nilai_literasi,hadir_persen
Ali,7A,78,74,71,92
Budi,7A,85,83,80,95
Citra,7A,92,90,88,98
Dewi,7A,68,65,79,88
Eka,7A,74,72,70,91
Fajar,7A,88,86,84,96
Gita,7A,81,79,77,94
Hana,7A,90,88,91,97
Indra,7A,66,64,73,85
Joko,7A,77,75,72,93
Kartika,7A,95,93,89,99
Laila,7A,83,81,78,95
Nanda,7B,72,70,68,90
Oki,7B,80,78,74,93
Putri,7B,87,85,82,96
Rahmat,7B,63,61,66,82
Sari,7B,76,74,71,91
Tono,7B,84,82,79,95
Umar,7B,70,68,72,89
Vina,7B,91,89,86,98
Wulan,7B,79,77,75,94
Yusuf,7B,65,63,70,84
Zahra,7B,89,87,85,97
Bayu,7B,75,73,69,92

Skrip berikut membaca salinan tersebut dengan pandas dan menghitung ketiga kelompok angka itu dalam satu kali eksekusi. Kriteria siswa berisiko ditetapkan langsung pada baris saringannya, sehingga definisi lain dapat diujikan dengan mengubah baris yang sama.

"""Menghitung angka yang tampil pada mockup dasbor nilai ujian."""
import pandas as pd

data = pd.read_csv("nilai_ujian.csv")

kolom = ["nilai_matematika", "nilai_fisika", "nilai_literasi"]
rata = data.groupby("kelas")[kolom].mean().round(2)
print(rata)
print()
keseluruhan = data["nilai_matematika"].mean().round(1)
print("Rata-rata matematika seluruh siswa:", keseluruhan)
print()
berisiko = data[(data["nilai_matematika"] < 70) & (data["hadir_persen"] < 90)]
print(berisiko[["siswa", "kelas", "nilai_matematika", "hadir_persen"]].to_string(index=False))

       nilai_matematika  nilai_fisika  nilai_literasi
kelas                                                
7A                81.42         79.17           79.33
7B                77.58         75.58           74.75

Rata-rata matematika seluruh siswa: 79.5

 siswa kelas  nilai_matematika  hadir_persen
  Dewi    7A                68            88
 Indra    7A                66            85
Rahmat    7B                63            82
 Yusuf    7B                65            84

Keluaran tersebut menjadi isi mockup dasbor sekolah pada demo berikut. Jalankan demo, amati versi baiknya terlebih dahulu, kemudian tekan tombol Versi buruk dan perhatikan perubahan yang muncul pada badge, warna, dan font. Tekan tombol Versi baik lagi untuk kembali ke tampilan awal.

Kedua versi memuat angka yang persis sama, sehingga perbedaan yang terasa murni berasal dari keputusan desain. Pada versi baik, KPI berada di kiri atas dengan satu warna aksen, grafik batang menempati zona tengah, dan tabel siswa berisiko berada di bawah. Pada versi buruk, badge acak menarik perhatian ke elemen yang tidak membawa data, warna yang berlebihan menghapus penekanan, dan dua font membuat perhatian berhenti pada gaya huruf alih-alih pada angkanya. Perbedaan kecepatan pemindaian antara kedua versi itulah yang dijelaskan oleh pola zona dan galeri antidasbor pada bagian sebelumnya.

Ringkasan#

• Dasbor menjawab pertanyaan yang tetap pada satu layar, dan pertanyaan per layar ditetapkan sebelum komponen apa pun dibuat.
• Tata letak mengikuti pola pemindaian dari kiri atas ke kanan bawah melalui tiga zona, yaitu KPI, tren dan perbandingan, serta rincian.
• Keputusan desain yang padat mencakup satu warna aksen, nilai kini yang selalu datang bersama pembandingnya, dan bentuk grafik yang sesuai pertanyaan.
• Galeri antidasbor berisi enam jebakan yang diperiksa sebelum dasbor disebarluaskan, karena dasbor yang curang berpengaruh pada banyak pembaca sekaligus.

Referensi#

• Common Pitfalls in Dashboard Design — Perceptual Edge — Makalah Stephen Few yang menjadi dasar galeri jebakan desain dasbor pada topik ini.