Dashboard modern telah meminjam banyak dari dashboard otomotif. Elemen-elemen menarik juga dapat dilihat di pusat-pusat kendali penerbangan NASA tahun 1960-an dan awal era otomatisasi. Saat ini, situasi yang agak rumit, apakah itu peluncuran rudal atau pertarungan dengan alien di helm Tony Stark, mau tidak mau muncul dalam bentuk semacam dashboard.

Tapi kami di sini bukan untuk pelajaran sejarah, tetapi untuk belajar cara membuat dashboard yang baik. Tugas kita adalah mempelajari jenis-jenis dasbor dan bagan tampilan yang digunakan dalam memantau sistem modern, namun, banyak pelajaran dapat diterapkan dalam konteks lain.

Ada begitu banyak informasi dalam topik ini sehingga sulit untuk mencari tahu dari mana harus memulai! Tapi aku akan membantumu. Dalam proses mempelajari desain dasbor, kami akan melewati poin-poin berikut:

1. Struktur dan skema.
2. Presentasi dan aksesibilitas.
3. Pilihan grafik yang digunakan.
4. Memperbaiki konteks.

Bagian 1. Struktur dan skema

Mari kita berhenti dulu dan bertanya pada diri sendiri dua pertanyaan: siapa target audiens kita dan apa tujuannya?

Mengetahui audiens target Anda dan tugasnya sangat penting untuk sisa pekerjaan. Jika audiens target Anda adalah manajer pengembangan yang perlu mengetahui informasi tingkat tinggi tentang fungsi sistem, maka data yang mereka butuhkan akan sangat berbeda dari yang dibutuhkan oleh insinyur yang masuk.

Sebelum Anda mulai membuat dasbor, ambil selembar kertas dan tuliskan pertanyaan yang akan ditanyakan pengguna target Anda, urutkan berdasarkan urutan prioritas dan tentukan data optimal yang perlu ditampilkan untuk menjawab pertanyaan.


Catatan yang saya tulis saat melakukan wawancara dengan diri saya untuk posting ini.

Pikirkan tentang formulirnya

Setiap elemen yang ditambahkan ke dasbor harus dengan jelas melayani tugas audiens target, dan lokasi widget harus ditentukan oleh kepentingannya. Informasi ini harus ditempatkan pada satu layar tanpa menggulir. Pengguna manusia kami hanya dapat menyimpan tiga atau empat elemen informasi visual dalam memori kerja mereka, jadi Anda perlu menyimpan semua informasi penting di satu tempat (Beberapa, 79). Untuk membantu pengguna, Anda dapat memastikan bahwa dia dapat melihat semua informasi dengan melemparkan satu pandangan sekilas ¹ , dan dia tidak perlu mengingat apa pun.

Jika Anda perlu memvisualisasikan informasi tambahan, maka pertimbangkan untuk membuat dasbor terpisah yang dirancang untuk memenuhi tugas pengguna, misalnya, untuk mempelajari masalah dengan pengumpulan sampah atau untuk crash dependensi hilir. Dalam kasus optimal, prosedur studi tersebut harus dapat digunakan kembali dalam sistem yang berbeda.

Cara terbaik adalah menggunakan tata letak modular . Orang-orang sangat berorientasi pada bidang-bidang kecil yang dijelaskan dalam prinsip - prinsip pengelompokan . Ini nyaman karena hampir semua sistem dasbor modern bekerja dengan cara yang serupa.

Dengan menulis daftar prioritas dan membuat modul, kita dapat mulai menambahkan elemen dasbor. Anda mungkin sudah memiliki gagasan intuitif bahwa elemen paling penting perlu ditempatkan di sudut kiri atas, dan Anda perlu menempatkannya dari kiri ke kanan, dari atas ke bawah.


Kemungkinan besar, Anda tidak memerlukan ilustrasi ini.

Ini adalah pola standar untuk orang-orang yang terbiasa membaca dalam bahasa-bahasa Barat: mata mereka biasanya lebih dulu memperhatikan sudut kiri atas (Few, 107-108) ² . Namun, penting untuk tidak melupakan audiens target Anda: dalam beberapa bahasa lebih dikenal untuk bekerja dari kanan ke kiri atau dari atas ke bawah ³ .

Luangkan waktu Anda dengan implementasi!

Saya tahu Anda tidak bisa menunggu, tetapi sebelum Anda mulai, buat sketsa:


Ini sketsa.

Lihat dia. Diskusikan dengan pengguna. Gantung di kulkas dan nikmati sambil minum kopi. Bagikan dengan tim. Berguna untuk membuat sketsa dan bereksperimen dengan ide-ide. Misalnya, setelah membuat sketsa, saya memutuskan bahwa sebelum melanjutkan, urutannya perlu diubah. Pengguna saya (saya sendiri) memutuskan bahwa mengetahui durasi lebih penting daripada kesalahan.

Baiklah, mari kita mulai!

Setelah membuat skema modular, pengembang biasanya mulai menempatkan grafik dan widget lain dengan ukuran yang sama di grid, pindah ke baris berikutnya ketika tempat itu habis. Anda tidak dapat menempel pada ukuran yang sama, tetapi sesuaikan lebar elemen untuk menekankan pentingnya atau meningkatkan kejelasan. Grafik yang lebih luas tidak hanya menonjol lebih kuat, tetapi juga memiliki sifat bermanfaat lainnya. Tufty mengatakan grafik yang lebih luas menyerupai horizon, dan "mata manusia secara alami beradaptasi untuk melacak penyimpangan dalam garis horizon" (186) ⁴ . Selain itu, dalam grafik lebar, lebih sedikit teks yang perlu ditransfer, yang menekankan hubungan sebab-akibat dari banyak grafik. Ini terutama berlaku untuk grafik garis yang digunakan di banyak dasbor. Efek yang diukur - misalnya, memori yang ditempati atau penundaan - akan ditunjukkan pada sumbu Y, dan waktu pada sumbu X. Ruang yang diperoleh dengan meningkatkan lebar grafik memungkinkan "spesifikasi yang lebih rinci dari nilai primer" (187) ⁴ .


Kami telah memperluas jadwal untuk menekankan pentingnya Rasio Keberhasilan.

Perhatikan bahwa bahkan grafik "biasa" pada dasbor ini lebih lebar daripada tinggi. Ini bagus untuk alasan yang disebutkan di atas, dan di samping itu, bagus untuk dilihat karena prinsip rasio emas .

Untuk meringkas

Selamat! Anda mulai membuat dasbor di bawah bimbingan pikiran terbaik dalam pengembangan dasbor. Ini akan menjadi dasar yang bagus dalam pengembangan dasbor Anda.


Awal yang bagus.

Pengulangan singkat

Mari kita ulangi apa yang kita pelajari di sini:

• Bertindak secara sadar, pelajarilah pengguna Anda dan pertanyaan yang diajukannya
• Jaga kesederhanaan, jangan memaksa pengguna untuk menggulir dan mengingat
• Buat dasbor terkait tambahan sesuai kebutuhan
• Posting informasi penting di tempat-tempat penting untuk kesadaran
• Gunakan tata letak modular dan berikan preferensi untuk bagan lebar daripada sempit.

Sumber dan catatan

1. Orang biasanya hanya memiliki sepasang mata.
2. Stephen Few (Beberapa, Stephen). Desain Dashboard Informasi . Analytics Press, 2013.
3. Jika dasbor Anda untuk alien atau robot, maka bacalah panduan desain yang sesuai.
4. Edward R. Tufte (Tufte, Edward R). Tampilan Visual Informasi Kuantitatif . Graphics Press, 1998.

Bagian 2. Presentasi dan aksesibilitas

Jadi, kami memiliki kisi-kisi yang indah dan bobot visual yang diperlukan dipilih untuk setiap elemen kisi ini. Sekarang kita perlu berpikir tentang menampilkan data kepada pengguna. Dan di sini semuanya bisa serba salah, jadi Anda perlu menjaga kejelasan dan keteguhan desain.

Prinsip panduan harus menjadi tugas pengguna dan integritas data yang ditampilkan. Karena parameter ini dapat sangat bervariasi - jumlah pengguna, waktu yang dihabiskan untuk pengumpulan sampah, dan jumlah kesalahan yang tidak dapat diprediksi, kita harus membuat semacam kerangka kerja yang dapat digunakan untuk memilih solusi.

Mari kita pelajari untuk apa visualisasi metrik sistem yang berkualitas tinggi.

Pemilihan data

Anda mungkin berharap bahwa di bagian ini saya akan mengatakan data spesifik apa yang harus ditempatkan di dasbor. Bahkan, sebagian besar terserah Anda, pembaca! Ingat tentang pengguna dan tujuan mereka. Gunakan daftar Anda dan putuskan yang terbaik untuk apa yang oleh Beberapa orang disebut empat tahap pemantauan informasi (32) ¹ :

1. Memperbarui data situasi di tingkat tinggi.
2. Identifikasi elemen-elemen spesifik yang membutuhkan perhatian dan fokus padanya.
   
   1. Memperbarui informasi tentang item ini dengan peningkatan detail
   2. Menentukan perlunya tindakan
3. Jika suatu tindakan diperlukan, maka informasi tambahan harus diakses untuk menentukan informasi yang diperlukan.
4. Responnya.

Secara umum, pensinyalan terbaik dari operasi dan kesadaran sistem tingkat tinggi disediakan oleh metode RED dan / atau metode USE . Dalam kasus optimal, dasbor harus hanya berisi indikator kinerja utama (KPI) yang diperlukan untuk membiasakan diri dengan situasi, dan tidak mempelajari data (Beberapa, 30-31) ¹ . Namun, ada banyak kasus di mana, selain KPI standar, informasi yang lebih spesifik diperlukan. Jika Anda tidak yakin yang mana, maka lihat tujuan pengguna. Apakah masing-masing elemen yang dipertimbangkan perlu untuk melakukan tugas-tugas pengguna?

Perlu juga diingat bahwa dasbor seperti itu sering melacak sistem, bacaan yang sering berubah. Anda perlu menambahkan diagram unit terpisah atau widget waktu untuk melacak KPI baru dan menarik, atau hanya data penting untuk tugas saat ini. Seiring pertumbuhan organisasi Anda, organisasi Anda harus secara kritis memeriksa dasbor dan membuang semua artefak yang tidak lagi berguna. Lihatlah tabel yang Anda tambahkan ketika ada masalah kebocoran deskriptor file dan tanyakan pada diri sendiri: apakah Anda membutuhkannya hari ini? Anda tahu meja mana yang ada dalam pikiran saya.

Kinerja visualisasi

Di palet widget untuk dasbor Anda, kemungkinan besar akan ada banyak opsi untuk dipilih. Dan menarik untuk menggunakan yang paling indah! Tetapi tidak semua dari mereka sama - orang berbeda merasakan berbagai jenis informasi visual. Pengguna ingin menavigasi dengan cepat, jadi tugas kami adalah menyajikan data dengan cara yang paling efisien.


Persepsi tugas dalam urutan akurasi.

Di atas adalah indikator numerik tugas persepsi orang (Mackinley, 125) ² , yang membuatnya mudah untuk memahami betapa sederhananya visualisasi akan menjadi otak pengguna. Bahkan, beberapa komponen visual diproses secara tidak sadar , menggunakan persepsi pada tingkat perhatian subthreshold . Penggunaan warna, bentuk, posisi, dan gerakan yang tepat dapat sangat memudahkan dan mempercepat persepsi informasi penting pada dasbor (Beberapa, 80) ¹ .


Contoh atribut di tingkat perhatian subthreshold. Anda dapat melihat mereka tanpa memikirkannya!

Skala dan Unit

Setelah mempelajari sedikit lebih dalam tentang form, Cleveland dan McGill (830) ³ memeringkat tugas berdasarkan akurasi dan menemukan bahwa posisi pada skala umum lebih akurat daripada pada skala yang berbeda. Beberapa (40-41) melengkapi ini dengan menyarankan penggunaan satuan ukuran dan rincian yang diperlukan sehingga pengguna tidak harus melakukan perhitungan yang tidak perlu. Karena itu, jika mungkin, skala, kapak, dan satuan ukuran yang sama harus digunakan.


Tiga grafik dari data yang sama: tanpa unit, dengan unit dan dengan diskalakan. 250 kenapa?! Grafik kiri dan tengah lebih mudah untuk dibandingkan, dan grafik tengah lebih mudah dimengerti. Penyelarasan dan unit adalah penting!

Berkat informasi ini, Anda dapat lebih efektif memilih opsi visualisasi, memilih yang memungkinkan pembaca untuk dengan cepat memahami data.

Waktu

Kami secara aktif menggunakan grafik urutan waktu , jadi kami harus mempertimbangkan tampilan waktu dengan cermat. Grafik harus menggunakan jendela waktu yang sama. Jika grafik pertama menunjukkan irisan dalam satu jam dan terikat dengan momen saat ini, yang sama harus di semua grafik lainnya. Ini terutama benar jika pemilih waktu atau kontrol "global" lainnya digunakan.

Banyak dasbor memiliki "kursor" yang berguna: ketika Anda mengarahkan kursor ke satu bagan, bagan lainnya juga menunjukkan titik waktu yang sama. Ini membantu pengguna untuk memahami waktu, dan juga memperjelas semua penyimpangan dalam hubungan waktu dan ruang, seperti yang dapat dilihat pada contoh di bawah ini, di mana satu grafik lebih lebar daripada yang lain:


Grafik yang lebih rendah lebih lebar dari dua yang atas, tetapi bilah vertikal "kursor" memungkinkan Anda untuk menyelaraskannya.

Prinsip yang sama berlaku untuk tata letak horizontal. Widget atau grafik yang tidak mempertahankan hubungan yang sama antara waktu dan ruang harus dengan jelas menyampaikan hal ini baik dengan perbedaan visual (misalnya, widget dengan "nilai tunggal") atau indikasi yang jelas.

Agregasi tersembunyi

Ingatlah bahwa dalam banyak visualisasi kita perlu berurusan dengan agregasi data, yang dilakukan secara otomatis .

Agar sistem berfungsi, dasbor harus mendukung jendela waktu yang bervariasi pada rentang nilai yang luas. Secara default, dasbor dari sebagian besar sistem menggunakan tampilan "saat ini", menunjukkan nilai dalam interval dari satu jam hingga lima belas menit terakhir. Dengan asumsi data ditangkap pada interval sepuluh detik, setiap jam harus berisi 360 titik data! Karena setiap bagan individual mengandung sangat sedikit piksel informatif, alat dasbor harus memutuskan bagaimana menyesuaikan semua titik ini ke dalam bidang berukuran kecil.


Grafik atas menunjukkan data selama 15 menit, dan grafik yang lebih rendah menunjukkan satu minggu. Perhatikan bahwa kami benar-benar kehilangan informasi tentang peningkatan latensi berkala karena agregasi standar data rata-rata. Resolusi widget ditampilkan di sebelah kanan judul grafik.

Biasanya ini diimplementasikan menggunakan agregasi data: grafik menunjukkan rata-rata, jumlah, atau yang serupa. Pilihan default dapat sangat memengaruhi tampilan. Mari kita lihat pada grafik sebelumnya, hanya alih-alih rata-rata, nilai maksimum yang dikumpulkan:


Ketika menggabungkan nilai data maksimum selama seminggu, penundaannya menjadi sekitar 30% lebih tinggi.

Anda dapat mengetahui cara kerjanya di dokumentasi alat pembuatan dasbor Anda. Kami akan mempertimbangkan topik ini ketika kami berbicara tentang berbagai jenis grafik.

Penambahan: rasio dan jumlah

Dalam pengalaman saya, ini adalah salah satu masalah paling umum di dasbor sistem. Dengan menampilkan penghitung sebagai rasio atau penjumlahan, kami dapat sangat memengaruhi pemahaman data oleh pengguna. Jika kami menampilkan jumlah kesalahan sebagai rasio, maka setiap titik dalam grafik akan menjadi jumlah kesalahan yang dibagi dengan waktu yang telah berlalu. Jika kita menampilkan jumlahnya, maka secara alami kita akan melihat jumlahnya. Ini berarti bahwa formulir data akan sama, hanya skalanya yang berbeda.

Disarankan agar Anda menunjukkan dengan jelas dalam judul bagan jenis data yang ditampilkan: rasio atau jumlah. Saat memilih antara dua opsi, diskusikan masalah ini dengan pengguna dan pilih formulir yang paling sesuai dengan kebutuhan Anda. Apa yang dia harapkan untuk dilihat di grafik?

Catatan : saat bekerja dengan agregasi, pertimbangkan untuk menggunakan rasio dan jumlah!

Peringatan: tidak ada data

Jika ada masalah selama pengukuran, maka beberapa titik data mungkin hilang. Jika pengguna mengharapkan tampilan poin data secara teratur, ini bisa menjadi masalah. Jika ini terjadi, pertimbangkan penggunaan interpolasi. Biasanya, dasbor sistem menggunakan interpolasi linier untuk menghubungkan data yang hilang. Kadang-kadang mereka bahkan tidak tahu sama sekali bahwa data tersebut hilang. Terkadang resolusi data berubah.


Garis biru mengisi data yang hilang dengan nol. Garis merah menggunakan interpolasi linier.

Karena kurang ajar, saya menghubungi Stephen Few sendiri dan mengajukan pertanyaan tentang masalah ini. Saya sudah lama tertarik dengan tugas ini, dan saya ingin tahu bagaimana ia menyarankan bekerja dengan data yang hilang pada interval yang tidak teratur dan berubah:

Jika Anda menampilkan nilai pada garis waktu, maka interval pada garis waktu ini biasanya konstan. Artinya, mereka berada pada jarak yang sama satu sama lain. Jika interval berubah, maka jarak antara interval juga harus berubah sesuai untuk mengindikasikan perubahan ini secara visual, dan harus tetap konstan kecuali ukuran interval berubah lagi, setelah itu jarak juga harus berubah. Nilai yang terkait dengan interval waktu berurutan harus dihubungkan oleh garis, tetapi jika karena alasan tertentu tidak ada nilai dalam interval, maka garis dalam interval ini tidak boleh dilanjutkan. Jika nilai hanya dibaca dari waktu ke waktu (misalnya, ketika beberapa peristiwa terjadi), dan tidak pada interval yang sama, maka mereka tidak boleh dihubungkan oleh garis. Dalam kasus seperti itu, Anda perlu menggunakan titik atau kolom data terpisah untuk menyandikan nilai. Semoga beruntung menemukan alat yang mengimplementasikan ini.

Sangat menarik! Saya tidak yakin bagaimana ini bisa diimplementasikan secara programatik, jadi untuk menyelesaikan masalah saya membuat sketsa.


Bagian tengah adalah interval yang lebih cepat. Tidak ada data di kedua sisi itu. Data yang hilang tidak terhubung. Sorotan merah muda adalah untuk tujuan informatif dan tidak ditampilkan pada grafik yang dilihat pengguna.

Anda mungkin bertanya-tanya: mengapa paket penciptaan dasbor tunggal tidak mengimplementasikan fungsi seperti itu? Sebagian besar karena pengembang tidak tahu apakah data hilang atau tidak. Biasanya kita campur tangan dalam interval ketika metrik tiba, dan di dunia modern wadah abstrak, metrik ini dapat muncul dan menghilang dalam sepersekian detik. Ya, ini adalah masalah kompleks yang menginspirasi Anda untuk menemukan solusi.

Rekomendasi umum

Beberapa tips yang lebih bermanfaat:

• . , . .
• . , . .
• , , 3D-, .

Pengguna mungkin mengalami kesulitan menafsirkan dasbor jika mereka tidak memenuhi prinsip aksesibilitas untuk para penyandang cacat. Untuk kenyamanan pengguna, ikuti pedoman aksesibilitas W3C . Beberapa mungkin lebih mudah diimplementasikan daripada yang lain (tergantung pada alat khusus), tetapi bagaimanapun juga itu layak dipertimbangkan.

• Buta warna sangat umum: 1/12 pria dan 1/200 wanita di dunia memiliki warna merah dan hijau yang tidak bisa dibedakan . Ini sangat penting untuk dasbor, karena di dalamnya warna hijau dan merah sering menunjukkan status "baik" dan "buruk". Gunakan berbagai teknik untuk sinyal (lihat bagian "Efisiensi"): ukuran, warna, teks dan ikon.
• : W3C 4.5:1 . . Consumer Finance Protection Bureau .
• , (). . , CSV , .
• Gunakan fitur navigasi dan penambangan data yang tersedia untuk memanfaatkan fitur pembantu browser dengan alat-alat seperti WAI-ARIA .
• Akan seperti apa tampilan pengguna? Dasbor untuk TV besar kemungkinan besar akan berbeda dari yang digunakan pada layar 13-inci laptop insinyur yang berkunjung. Ingatlah ini ketika merancang dasbor untuk perangkat Anda.

Untuk meringkas

Pengguna pemetaan data perlu berpikir dengan hati-hati. Banyak aspek yang harus diperhitungkan, dan di bagian artikel ini saya menjelaskan secara terperinci apa yang harus dipertimbangkan oleh perancang dan pengembang yang membuat alat pemantauan sistem.

Pengulangan singkat

• Gunakan KPI seperti RED dan USE. Metrik tambahan ditentukan berdasarkan tugas pengguna.
• , , CASE , !
• , , , . , !
• .
• , . .
• , . .
• . , .

1. (Few, Stephen). Information Dashboard Design . Analytics Press, 2013.
2. . (Mackinlay, Jock D.) Automating the Design of Graphical Presentations of Relational Information. ACM Transactions on Graphics, Vol. 5, 1986
3. . , (Cleveland, William S., McGill, Robert). Graphical Perception and Graphical Methods for Analyzing Scientific Data. American Association for the Advancement of Science, 1985.

3. ?

Tunggu, tetapi apakah tabel benar-benar visualisasi? Ya, dan masih banyak lagi! Beberapa ¹ mengingatkan kita bahwa jika kita menampilkan nilai unit, maka tidak ada alasan untuk menggunakan (114) ¹ grafik . Jika hanya ada beberapa nilai, maka cukup efektif untuk menggunakan tabel.


Meja tua yang bagus.

Tabel adalah visualisasi yang umum dan dipahami dengan baik untuk menemukan makna. Tabel di atas membuatnya sangat mudah untuk menemukan nilai dan parameter yang terkait. Versi ini mungkin terlalu kelebihan untuk dasbor sistem, tetapi kita dapat mengubahnya menjadi "nilai tunggal" seperti ini:


Tabel dikompresi menjadi volume yang sesuai untuk widget.

Jika pengguna perlu mengetahui satu nilai, misalnya, jumlah, nilai rata-rata atau instan, maka penggunaan angka atau tabel individual adalah ideal.

Grafik garis

Grafik garis sangat cocok untuk sebagian besar data yang ditampilkan. Grafik garis adalah titik yang dihubungkan oleh segmen garis lurus. Perlu juga dicatat bahwa pada grafik urutan waktu, interpolasi data ini memberi pengguna rasa koneksi bentuk dan waktu . Anda akan sering mendengar dari orang-orang yang menonton pembaruan grafik bahwa metrik naik atau turun.


Bentuknya visual. Sesuatu terjadi dengan penundaan!

Grafik garis adalah visualisasi populer karena mereka menyertakan banyak atribut pada tingkat perhatian sub-ambang batas dengan jumlah piksel minimum. Garis memiliki kemiringan dan sudut, posisi dan warna, yang memungkinkan Anda untuk mengekstrak banyak informasi tanpa ragu-ragu. Anda dapat menyulitkan tampilan sedikit dan menggunakan ketebalan dan kecerahan garis untuk menarik perhatian:


Jelas, garis coklat adalah yang paling penting di sini.

Tidak semuanya terbatas pada grafik garis.

Sebelum Anda menutup tab dengan artikel dan mengubah semua widget menjadi grafik garis, saya akan berbicara tentang beberapa aspek yang perlu Anda berhati-hati. Terlalu banyak garis pada bagan dapat menyembunyikan bentuknya, mengaburkan warnanya, meningkatkan keterlambatan persepsi dan menjadikannya tidak berguna (pada bagan seperti itu, Anda hanya dapat menganalisis outlier). Dalam hal ini, peta panas akan membantu kami (lihat di bawah).


Garis-garis itu begitu dekat satu sama lain sehingga sulit dibedakan.

Garis grafik menginterpolasi data antara dua titik menggunakan garis. Dalam kebanyakan kasus, ini diinginkan karena bentuk yang diciptakan oleh garis membantu persepsi. Sayangnya, interpolasi juga dapat menyembunyikan informasi yang hilang, atau bahkan melukai: membuat kami berpikir bahwa kami memiliki data yang sebenarnya tidak kami miliki. Ambil contoh grafik garis di atas, tambahkan poin untuk setiap bacaan:


Titik-titik memberitahu kita bahwa kita hanya mendapatkan satu pembacaan untuk setiap perubahan penundaan.

Panjang garis bisa menyesatkan bahwa ada lebih banyak pengukuran daripada yang sebenarnya, misalnya, perubahan seperti pada grafik di atas.

Bagan Area

Pertama, jangan gunakan bagan dengan area yang tidak tumpang tindih . Tumpang tindih satu grafik dengan yang lain hanya menyembunyikan data dan membingungkan.


Tentang apa semua ini? Selain hijau, tidak ada yang terlihat.

Bagan area paling baik digunakan ketika semua totalnya penting . Mereka memiliki banyak kesamaan dengan grafik garis karena mereka menunjukkan bentuk. Sayangnya, formulir ini juga merupakan kelemahan mereka: ketika salah satu daerah yang lebih rendah berubah, hal yang sama terjadi dengan semua daerah di atasnya. Pengguna mungkin tidak mengerti apa yang menyebabkan perubahan. Menemukan perubahan nyata dapat menjadi tantangan dalam situasi seperti itu.


Penundaan bervariasi sekitar 4 detik, tetapi kami tidak dapat menentukan apa yang mempengaruhi perubahan. Apakah nilai semua baris berubah?

Alih-alih membuat bagan dengan wilayah, Beberapa menyarankan menggunakan satu bagan garis dengan jumlah dan bagan tambahan yang menunjukkan kontribusi nilai-nilai individu (Beberapa, 146) ¹ . Ini membuat pelacakan perubahan lebih mudah.


Data yang sama disajikan di sini seperti pada bagan area di atas. Grafik kiri menunjukkan jumlah penundaan, dan grafik kanan menunjukkan setiap elemen yang mempengaruhi penundaan. Nilai-nilai yang mempengaruhi penundaan dipahami dengan baik dan pada saat yang sama kita bisa melihat jumlahnya!

Grafik batang

Grafik garis menunjukkan bentuk, grafik batang menunjukkan nilai "akurat". Sebagian besar metrik sistem lebih baik menggunakan grafik garis. Pengecualian mungkin berupa grafik yang membandingkan beberapa metrik:


Kita dapat dengan mudah membandingkan dua urutan waktu ini menggunakan kolom. Jika ada lebih banyak nilai, maka itu akan lebih sulit.

Grafik batang membantu dalam membandingkan nilai pada setiap interval karena hubungan yang jelas antara interval dan kemudahan membandingkan panjang. Jika Anda memilih grafik batang, itu artinya hal terpenting bagi pengguna Anda adalah membandingkan sejumlah kecil nilai.

Hati-hati dan coba hindari moire . Itu bisa terjadi jika kolomnya kecil dan berjarak sama. Tambahkan ruang kecil di antara kolom untuk memisahkannya secara visual, seperti yang dilakukan pada gambar di atas.

Hamparan Kolom

Lihat semua yang ditulis tentang tumpang tindih diagram dengan area. Kolom hamparan biasanya jarang digunakan, kolom hanya diperlukan jika nilai secara keseluruhan penting. Pengguna mengalami kesulitan membandingkan kolom yang ditumpuk.

Heatmaps

Gunakan heatmap jika Anda memiliki grafik garis dengan terlalu banyak garis. Heatmaps menggunakan perubahan kecerahan warna, sehingga sejumlah besar data dapat dikemas dalam ruang kecil. Di mana dalam grafik garis tumpang tindih garis mengganggu persepsi, peta panas dalam kasus tumpang tindih meningkatkan warna. Ini memiliki efek samping yang baik: heatmap menunjukkan banding pada overlay, yang membantu dalam mengenali pola dan outlier.


Grafik garis mengerikan dalam segala hal kecuali deteksi outlier. Heatmaps menunjukkan di mana array data utama dikelompokkan.

Kemampuan untuk menampilkan lebih banyak data dan pengenalan pola datang pada harga. Dalam heatmap, akurasi menurun karena orang tidak dapat dengan mudah membedakan antara banyak kecerahan warna. Sedikit yang mengatakan bahwa batas pembedaan adalah 5 gradasi kecerahan (Few, 86) ¹ . Ini berarti bahwa heatmap paling baik digunakan dalam situasi di mana akurasi kurang penting daripada bentuk umum visualisasi.

Timbangan, spidol, interval, dll.

Gunakan kendala dalam visualisasi hanya ketika data benar-benar memiliki kendala tersebut. Misalnya, menampilkan jumlah permintaan per detik dalam bentuk skala membingungkan, karena indikator ini tidak memiliki maksimum!

Jika Anda perlu menunjukkan batas, seperti persentase atau antrian dengan kedalaman maksimum, maka menggunakan visualisasi seperti itu bisa sangat berguna. Mereka memungkinkan kami untuk melaporkan nilai batas, dan juga memperjelas seberapa dekat nilainya dengan batas ini. Gunakan jenis visualisasi ini ketika metrik memiliki dasar untuk perbandingan!


Ini adalah contoh penggunaan interval yang dapat diterima karena memiliki batasan dan membantu pengguna menavigasi.

Saat menambahkan warna pada visualisasi ini, kami akan memungkinkan pengguna untuk dengan cepat memahami nilai saat ini, batas atas dan bawah, serta urgensi dari nilai saat ini.

Sayangnya, saya tidak tahu alat apa pun yang memungkinkan Anda untuk sepenuhnya menggunakan skala grafik . Paling-paling, alat dasbor hanya menggunakan satu penanda.

Grafik lainnya

Grafik lain yang tidak pantas seluruh bagian.

• Pie chart: jangan menggunakannya. Orang biasanya tidak dapat memperkirakan area sektor dari grafik. Gunakan kolom sebagai gantinya.
• Donat chart: ini biasanya cara yang indah untuk menunjukkan makna tunggal. Atau hanya diagram lingkaran dengan lubang di dalamnya.
• Grafik garis overlay: mirip dengan diagram dengan wilayah, tetapi lebih buruk daripada mereka, karena kurangnya pengisian di wilayah membuat mereka tak terduga. Hindari mereka.
• Grafik nyala: bagus untuk beberapa kasus penggunaan, tetapi biasanya tidak untuk dasbor sistem, tetapi lebih untuk profiler.
• Sparklines: Bagus untuk menampilkan nilai tunggal, tetapi tanpa elemen bagan garis yang sudah dikenal, mereka sering kekurangan konteks. Beberapa menyarankan grafik, yang disebutnya busi - mereka menambahkan garis-garis warna atau nuansa untuk membantu pengguna menavigasi. Sayangnya, saya tidak tahu alat apa pun yang memiliki grafik ini.
• Block diagram: jarang ada di alat kami
• Plot pencar: sebaliknya gunakan diagram batang. Mungkin mereka bisa berguna jika data langka datang dalam jangka waktu yang lama?
• Plot pencar: bagus untuk menemukan korelasi, tetapi ini adalah aplikasi khusus, jadi kami tidak melihatnya di sini.
• Disk dan skala: jika data Anda tidak benar-benar memiliki batas bawah dan atas, maka menampilkannya dalam bentuk indikator disk membingungkan. Selain itu, mereka memakan banyak ruang dengan sia-sia.

Untuk meringkas

Sebelum Anda mulai mengkritik saya karena tidak menyebutkan beberapa visualisasi langka yang dimiliki alat Anda, izinkan saya mengingatkan Anda bahwa jika pengguna memahami dasbor, grafik, atau visualisasi, maka itu bagus . Jika Anda memperluas skenario penggunaan dan basis pengguna, Anda harus kembali ke panduan pemilihan visualisasi di Bagian 2.


Kemungkinan besar, garis adalah apa yang Anda butuhkan. Mungkin sesuatu yang lain akan berguna. Lobster bukan timeline.

Gunakan grafik garis, sangat bagus! Nilai individual atau grafik tabular sangat baik untuk menampilkan nilai instan / tunggal. Kolom sangat cocok untuk membandingkan sejumlah kecil set data, dan heatmap juga memiliki bidang aplikasi sendiri.

Sumber

1. Stephen Few (Beberapa, Stephen). Desain Dashboard Informasi . Analytics Press, 2013.

Bagian 4. Memperbaiki konteks.

Dasar-dasar: teks

Orang membaca dengan cukup baik. Pengembang dasbor biasanya rentan terhadap singkatnya. Di bagian 2, kami melihat skala dan unit. Dengan menandai data dan berpikir melalui bentuk label ini, kita dapat meningkatkan persepsi data.

Tapi jangan masuk lebih dalam: hanya meningkatkan tanda tangan di tangga lagu. Jangan mengubah huruf! Bayangkan Anda adalah operator baru dan pertama kali melihat dasbor. Apa yang perlu kamu ketahui?


Pembuat bagan kiri tidak membuat banyak usaha. Di sebelah kanan, ada tanda tangan logis yang membantu pengguna memahami konteks visualisasi.

Dasar-Dasar: Langkah Selanjutnya

Jika pengguna ingin tahu lebih banyak tentang visualisasi tertentu, lalu bagaimana ia bisa melakukannya? Biasanya cukup klik pada judul, setelah itu versi layar penuh akan terbuka, memungkinkan Anda untuk lebih mempelajari visualisasi. Ini adalah tempat yang nyaman untuk menempatkan tabel data dan informasi berguna lainnya:


Saat Anda membuka bagan dalam layar penuh, alat-alat baru muncul karena pengguna telah menunjukkan minat pada studi yang lebih dalam.

Jika pengguna melihat pembacaan yang buruk pada grafik, maka ia mungkin perlu menggunakan alat lain atau memberi tahu kolega. Mengapa tidak menyematkan fitur ini di menu bagan?


Menu ini dapat mengarahkan kita ke fungsi pelacakan pengecualian, mentransfer informasi ke Slack, atau memulai proses mencatat insiden.

Tindakan manusia, data manajemen

Di bagian "Grafik Linier" pada bagian 3, kami berbicara tentang pentingnya fakta bahwa waktu dalam grafik yang dijalankan ditampilkan pada sumbu X. Ini sangat berguna bagi pengguna karena menunjukkan perubahan waktu, tetapi perjalanan waktu bukan merupakan faktor penyebab untuk data kami. Untuk ini kita perlu lebih banyak konteks.


Banyak alasan yang dapat menyebabkan perubahan.

Tufty mengusulkan memperbaiki tampilan dengan "memasukkan variabel tambahan ke dalam desain grafis" (38) untuk meningkatkan kelengkapan hubungan sebab-akibat ² . Ini berfungsi dengan baik untuk dasbor sistem, karena perubahan yang dilakukan oleh orang atau sistem otomatis seringkali menjadi sumber efek sistem. Melacak dan memvisualisasikan peristiwa semacam itu memberi pengguna informasi penting tentang peristiwa yang mungkin terkait dengan perilaku sistem.


Belah ketupat biru menunjukkan bahwa saat penempatan sangat berkorelasi dengan penurunan latensi. Hebat!

Data tingkat kontrol ini memiliki frekuensi jauh lebih rendah daripada sinyal yang diukur dalam sistem kami. Penting untuk memberikan prioritas tinggi agar perubahan tersebut dicatat dan ditampilkan di satu tempat dengan dasbor. Ini sangat meningkatkan kecepatan tugas pengguna.

Implementasi: menandai acara

Sayangnya, sebagian besar alat untuk membuat dasbor sistem memiliki dukungan parsial untuk data ini, sering disebut "anotasi". Acara biasanya sulit untuk digunakan kembali, tidak diketik, dan sering dianggap instan . Beberapa paket memiliki dukungan untuk acara dengan stempel waktu dari awal dan akhir untuk melakukan penyebaran dan perubahan "langkah" lainnya.

Selain itu, untuk mentransfer anotasi ke dasbor, Anda sering harus mengkonfigurasi lusinan sistem pemisahan secara manual. Maka Anda harus mencari cara untuk menghubungkan semua acara yang relevan dengan dasbor. Sangat tidak nyaman!

Berikut adalah beberapa kiat untuk menerapkan perilaku ini dengan benar:

• Gunakan output umum, seperti Acara CloudTrail dan sistem CI / CD.
• Berusaha keras untuk menggunakan kembali acara sehingga pengguna tidak harus membuat sendiri, hanya bekerja di dasbor mereka.
• Hindari kekacauan: terlalu banyak peristiwa seburuk ketidakhadiran mereka!
• Pastikan ada tautan dalam acara tersebut sehingga pengguna dapat mengkliknya dan mencari tahu informasi lebih lanjut. Ini memberikan konteks kepada pengguna, tetapi memungkinkan dasbor untuk tidak berubah menjadi antarmuka administrasi. Lebih baik bila pengguna cukup mengeklik tautan.

Standar, Tugas dan Perjanjian

Beberapa KPI memiliki rentang yang dapat diterima, tujuan internal, atau bahkan kewajiban kontraktual. Menambahkan informasi ini ke grafik yang sesuai dapat menjadi bagian dari visualisasi (lihat bagian “Timbangan, spidol, interval, dll.” Dari bagian 3) atau menjadi konteks di dalam widget. Konteks ini memungkinkan pengguna untuk menghindari persyaratan bagaimana grafik harus "terlihat" atau bagaimana nilai saat ini dapat mempengaruhi pemangku kepentingan.

Banyak alat mendukung fitur garis air yang serupa. Menambahkannya memberi pengguna konteks tambahan bahwa urutan waktu bukanlah nilai arbitrer, tetapi perbandingan dengan harapan kami.


SLO layanan kami ditambahkan ke bagan dalam bentuk "saluran air".

Kami dapat memperluas fungsionalitas ini dengan menambahkan pergeseran waktu, bias rata-rata, atau berbagai jenis deteksi anomali untuk menunjukkan nilai yang diharapkan:


Beginilah tampilan bacaan normal. Pola perulangan ini terlihat benar!

Karena kami mengetahui batas dan nilai yang diharapkan ini, kami dapat mengambil langkah maju dan memproses informasi untuk pengguna terlebih dahulu. Jika norma atau harapan dilanggar, kami dapat secara proaktif menunjukkan pelanggaran ini. Maka pengguna akan memperhatikan informasi yang paling penting (Beberapa, 54) ¹ .


Sepertinya kita melanggar SLO pada grafik saat ini!

Kami meninggalkan garis anonim pada bagan untuk situasi dengan sejumlah besar konteks dan indikasi yang jelas tentang keadaan sistem. Kami jelas melihat kelebihan dari SLO!

Sinyal bahaya atau kondisi sakit lainnya

Biasanya, dasbor sistem digunakan untuk mendiagnosis crash, terutama dalam menanggapi sinyal bahaya. Konteks kecepatan kontrol yang ditunjukkan di atas dapat dilengkapi dengan data dari sinyal bahaya. Kapan dan bagaimana cara kerjanya?


Label garis waktu untuk sinyal bahaya, pelanggaran yang disorot, dan nilai pewarnaan yang melebihi ambang batas.

Informasi ini memungkinkan pengguna untuk memahami apa yang menyebabkan alarm, membantunya menavigasi masalah. Grafik lain dapat memberikan konteks tambahan atau menu yang ditambahkan oleh kami akan membantu dengan tindakan lebih lanjut.

Proyeksi dan data sintetis lainnya

Volume utama dari data yang ditampilkan adalah pengukuran langsung dari pembacaan sistem. Oleh karena itu, Anda harus berhati-hati dengan tampilan data yang diproyeksikan, diprediksi, atau disintesis agar pengguna memahami apa yang harus ia percayai. Biro Perlindungan Keuangan Konsumen memiliki panduan tentang cara mengecilkan data ini .

Contoh dari masalah seperti itu adalah bagan penggemar sementara.


Nilai taksiran dan kisaran kemungkinan nilai di masa depan memungkinkan pengguna untuk melihat apa yang mungkin terjadi.

Pengulangan singkat

• Pikirkan dengan cermat tanda tangan pada bagan, tambahkan judul, subjudul, dan semua informasi lain yang diperlukan.
• Pekerjaan kami tidak berakhir dengan urutan waktu. Pengguna perlu konteks untuk memahami apa yang sedang terjadi. Konteks ini harus diambil dari berbagai departemen dalam organisasi / perusahaan.
• Menampilkan data peristiwa pada urutan waktu membantu pengguna memahami apa yang mungkin telah berubah. Peristiwa semacam itu adalah data pengamatan dan memiliki rasio signal-to-noise yang lebih tinggi.
• Data pada bagan dapat ditingkatkan dengan menambahkan nilai normal, diharapkan atau target, yang memungkinkan pengguna untuk menavigasi dengan lebih baik.
• Menambahkan informasi bahaya membantu mempercepat waktu respons insiden.
• Penggunaan segala jenis proyeksi membutuhkan visualisasi yang dipikirkan secara matang.

Untuk meringkas

Berkat bantuan pengguna saya, saya belajar banyak tentang cara membuat dasbor yang bagus . Banyak pelajaran yang bertentangan dengan pandangan dan saran saya sebelumnya. Banyak dari rekomendasi ini menunjukkan betapa kita perlu meningkatkan alat kita, terutama dalam konteks.

Semua ini sangat penting . Banyak organisasi menggunakan dasbor ini sebagai sumber utama informasi mereka tentang status, kinerja, dan ketersediaan layanan penting misi. Mereka juga merupakan sumber pertukaran informasi untuk organisasi desain. Dalam banyak kasus, dasbor adalah bisnis karena perusahaan tidak dapat melihat garis orang yang menggunakan situs web. Satu-satunya metode pengamatan kami adalah data yang kami kumpulkan dan tampilkan.

Dasbor dan grafik adalah sumber daya yang dapat sangat meningkatkan laba atas upaya pengembangnya. Beberapa hari pengembangan desain yang matang akan dihargai dengan ribuan jam disimpan oleh insinyur, manajer dan / atau pengguna. Dalam banyak kasus, mereka dapat menyebabkan respons yang lebih cepat terhadap masalah.

Ini sepadan dengan waktu Anda, bukan?

Saya harap Anda juga menikmati membaca artikel ini, ketika saya mempelajari informasi dan menulisnya. Saya sarankan Anda mempelajari sumber-sumber yang ditunjukkan pada akhir setiap bagian untuk mempelajari topik ini lebih dalam.

Sumber

1. Stephen Few (Beberapa, Stephen). Desain Dashboard Informasi . Analytics Press, 2013.
2. Edward R. Tufte (Tufte, Edward R.). Tampilan Visual Informasi Kuantitatif. Graphics Press, 1998.