Simak Praktik Terbaik untuk Mendesain Dasbor Anda

Dasbor adalah cara unik dan kuat untuk menyajikan intelijen berbasis data menggunakan teknik visualisasi data yang menampilkan data yang relevan dan dapat ditindaklanjuti serta melacak statistik dan indikator kinerja utama (KPI). Dasbor harus menyajikan data ini dalam format cepat, mudah dipindai dengan informasi yang paling relevan dan dapat dipahami secara sekilas.

Istilah ini lahir dari dashboard mobil tradisional, dan mereka telah berevolusi untuk melayani fungsi yang sama di dunia digital. Dalam bukunya , Stephen Few mengatakan yang terbaik:

Dasbor adalah tampilan visual dari informasi paling penting yang diperlukan untuk mencapai satu atau lebih tujuan; dikonsolidasikan dan diatur dalam satu layar sehingga informasi dapat dimonitor sekilas.

Desain dasbor seluler
Desain dasbor seluler oleh Mason Yarnell untuk Mixpanel

Dalam artikel ini, kami menguraikan contoh-contoh strategis, analitis, operasional, dan informasi serta prinsip-prinsip dasar yang menjadi inti dari setiap desain dasbor yang berhasil, terlepas dari jenisnya.

Memiliki pendekatan yang tepat untuk visualisasi data adalah fitur utama dalam meletakkan fondasi dashboard yang sukses. Visualisasi data adalah penyajian data melalui grafik dan gambar — tujuan utamanya adalah membantu pengambil keputusan mengidentifikasi pola atau memahami konsep-konsep sulit yang mungkin tidak terdeteksi dalam aplikasi berbasis teks.

Dalam buku mereka , Visualisasi Data , Noah Iliinsky dan Julie Steele menyatakan:

Tujuan perancang dalam merancang visualisasi data adalah untuk menciptakan hasil yang akan diterima dengan baik dan mudah dipahami oleh pembaca. Semua pilihan desain dan implementasi tertentu harus memenuhi tujuan ini.

Karakteristik Kunci Dasbor Hebat

Dasbor yang efektif menunjukkan informasi yang dapat ditindaklanjuti dan bermanfaat secara sekilas. Ini menyederhanakan representasi visual dari data yang kompleks dan membantu pemangku kepentingan memahami, menganalisis, dan menyajikan wawasan utama.

Elemen dalam desain dasbor
Dasbor Buku Kontrak oleh Toptal Designer Wojciech Dobry

Dasbor hebat jelas, intuitif, dan dapat disesuaikan.

  • Mereka mengkomunikasikan informasi dengan cepat.
  • Mereka menampilkan informasi dengan jelas dan efisien.
  • Mereka menunjukkan tren dan perubahan data dari waktu ke waktu.
  • Mereka mudah disesuaikan.
  • Widget dan komponen data yang paling penting disajikan secara efektif dalam ruang terbatas.

Kustomisasi awal data visual dan informasi untuk kebutuhan pengguna utama akan membantu meningkatkan kegunaan dan menghilangkan kebutuhan untuk persona pengguna yang berbeda.

Representasi elemen dasbor yang dapat disesuaikan
Elemen dasbor yang dapat disesuaikan – Buku Kontrak oleh Toptal Designer Wojciech Dobry

Dasbor hebat menyediakan semuanya dengan sekali klik.

  • Semua informasi penting segera dapat diakses.
  • Data diprioritaskan.
  • Informasi ditampilkan dengan jelas dalam hierarki visual pada satu layar.
  • Desain ini menyediakan gambaran umum yang koheren yang mencakup data awal yang jarang dan jelas dengan peluang tambahan untuk menelusuri lebih banyak.
  • Elemen (bagan, tabel, formulir) ditampilkan dalam tampilan yang diperkecil dengan kemampuan untuk memunculkan lebih banyak detail di jendela modal atau pergi ke halaman dengan lebih detail.
  • Desain meningkatkan kegunaan dengan filter yang memungkinkan pengguna untuk menyesuaikan cara data ditampilkan dan memfilter konten menggunakan label, kategori, dan KPI.
Desain dasbor untuk desktop
Data terperinci diambil dari dashboard dengan modal, oleh Toptal Designer Miklos Philips

Kompleksitas yang Dikurangi Memberikan Kejelasan

Dalam dunia yang kewalahan dengan data, memberikan informasi yang jelas adalah salah satu hal yang paling sulit untuk dicapai. Hanya menyajikan data yang paling relevan di dasbor adalah penting — semakin banyak informasi yang kami tampilkan, semakin sulit bagi pengguna untuk menemukan apa yang mereka butuhkan.

Ketika dihadapkan dengan terlalu banyak data untuk dipilih, perancang harus hanya menampilkan subset yang paling relevan. Kita perlu memprioritaskan dan menghapus metrik yang menyesatkan dan tidak hati-hati.

Keputusan desain dasbor yang efektif harus dipandu oleh:

  • tujuan proyek
  • sifat data
  • kebutuhan pengguna
Elemen desain dasbor
Desain dasbor oleh Toptal Designer Stelian Subotin

Saat membaca visualisasi (atau jenis komunikasi lainnya), pembaca Anda memiliki kekuatan otak yang terbatas untuk membaktikan masalah. Sebagian dari kekuatan otak ini akan didedikasikan untuk mendekode visualisasi; kekuatan otak apa pun yang tersisa dapat digunakan untuk memahami pesan (jika pembaca belum menyerah dengan frustrasi). – Noah Iliinsky dan Julie Steele (Visualisasi Data)

Tujuan inti dari dasbor adalah membuat informasi yang rumit dapat diakses dan mudah dicerna. Oleh karena itu, antarmuka yang menyajikan data harus bersih dan mudah untuk meminimalkan beban kognitif pengguna dan waktu yang dihabiskan untuk mencari.

Arsitektur informasi harus menyajikan data penting terlebih dahulu sambil memungkinkan akses ke metrik pendukung atau sekunder. Sistem drill-down progresif harus dirancang yang dimulai dengan gambaran umum dan kemudian masuk ke lebih detail — ini memfasilitasi penentuan prioritas data, dan menciptakan kejelasan.

Desain dasbor seluler untuk iOS
Desain dasbor seluler oleh Jan Losert

Menentukan Tujuan Dasbor dan Menampilkan Data yang Tepat

Saat merancang dasbor, perancang dasbor yang sukses mulai dengan serangkaian tujuan yang ditetapkan dengan fokus pada masalah yang harus dipecahkan dan kunci, wawasan yang dapat ditindaklanjuti yang perlu diambil orang dari data.

Tujuan desain yang baik mempromosikan eksekusi yang efisien dan tepat. Menggunakan kerangka kerja SMART untuk menetapkan tujuan menempatkan fokus pada tujuan spesifik , terukur , dapat ditindaklanjuti , realistis , dan berdasarkan waktu .

Beberapa pertanyaan kunci untuk ditanyakan saat menentukan tujuan desain dasbor:

  • Berapa banyak langkah yang perlu dilakukan pengguna untuk mencapai tujuan tertentu?
  • Apakah antarmuka cukup intuitif bagi pengguna untuk mencapai tujuannya sendiri?
  • Informasi apa yang dibutuhkan pengguna untuk berhasil mencapai tujuannya?

Untuk menentukan apa tujuan dari desain dasbor tertentu, tentukan dengan bertanya, “Masalah apa yang akan dipecahkan oleh desain ini untuk pengguna?” Jawabannya akan memberikan wawasan tentang apa metrik, properti, nilai, visual, dan data adalah konsekuensi.

Menggunakan bagan donat dalam desain dasbor
Desain dasbor oleh Toptal Designer Miklos Philips

Desain yang berfokus pada tujuan berfokus pada solusi untuk masalah nyata dan merupakan dasar untuk semua desain dasbor yang hebat. Mulailah dengan pemahaman yang jelas tentang tujuan bisnis, pertimbangkan tujuan pengguna, dan kemudian sampaikan informasi utama yang perlu dikomunikasikan.

Konteks dalam Desain Dasbor

Salah satu tantangan terbesar dari desain dasbor adalah melayani banyak orang. Setelah setiap peran pengguna didefinisikan, menjadi penting untuk memahami di mana kebutuhan mereka tumpang tindih dan di mana mereka berbeda.

Komunikasi yang efektif adalah prinsip dasar dari setiap desain dasbor yang sukses. Meramalkan skenario potensial di mana pengguna dapat menemukan diri mereka sendiri akan berkontribusi pada pemahaman yang lebih baik tentang keadaan pengguna.

Selalu ingat konteks pengguna saat mendesain — mengidentifikasi pengetahuan teknis mereka, keakraban mereka dengan sistem secara keseluruhan, tujuan mereka, dan sebagainya.

Elemen kontekstual dalam desain dasbor
Desain dasbor oleh Toptal Designer Miklos Philips

Pastikan untuk mengajukan pertanyaan berikut saat mencoba menentukan perilaku dan konteks pengguna:

  • Apakah desain mempertimbangkan arah yang digunakan pengunjung untuk membaca?
  • Apakah interaksi dengan dasbor memerlukan pengetahuan teknis?
  • Akankah pengguna berhasil menyelesaikan sebagian besar tindakan hanya dengan beberapa klik?
  • Apakah desain sejajar dengan konteks pengguna dengan membuat menu menelusuri; apakah itu menggunakan ikonografi sugestif dan palet warna?

Palet warna yang digunakan dalam desain dasbor juga harus dianggap sebagai konteks. Banyak dasbor produk SaaS bisnis-ke-bisnis dirancang dalam UI bertema gelap karena digunakan selama beberapa jam terus menerus.

UI bertema gelap dapat membantu mengurangi ketegangan mata dan mendukung kejernihan visual dalam antarmuka. Namun, mengambil pendekatan ini membutuhkan evaluasi yang cermat terhadap arah desain — kelebihan, kekurangan, dan potensi jebakan seperti yang diuraikan dalam artikel blog desain sebelumnya: Dark UI Memang Terlihat Elegan, namun Apa Baik Buruknya? .

Desain UI dashboard Analytics
Desain, analitik, dan infografis UI Dashboard bekerja dengan baik pada UI yang gelap tetapi masih harus “ditangani dengan hati-hati” untuk memastikan kontras yang cukup (oleh Alex Gilev ).

Desain Dashboard yang lebih baik dengan Penelitian Pengguna

Penelitian pengguna membantu menciptakan lingkungan di mana pengguna disajikan dengan data yang relevan, jelas, dan ringkas. Ini membantu mereka berpikir tentang konten dan data yang mereka cari, daripada bagaimana menggunakan dan mengaksesnya.

Beberapa dasbor harus berfungsi — atau disesuaikan dengan mudah bagi pengguna dari berbagai peran yang melihat dasbor dasar yang sama. Riset pengguna penting karena membantu menentukan tujuan pengguna, model mental, konteks lingkungan, dan poin rasa sakit. Ini adalah faktor yang sangat mempengaruhi desain dasbor akhir.

Ikhtisar desain dasbor
Desain dasbor oleh Toptal Designer Stelian Subotin

Perancang, peneliti, dan penulis pengalaman pengguna Mike Kuniavsky mencatat bahwa ini adalah “proses memahami dampak desain pada audiens.”

Seorang desainer harus mendefinisikan tipe pengguna yang berbeda dan memahami di mana tujuan mereka sama, dan di mana mereka berbeda. Informasi apa yang paling dapat ditindaklanjuti untuk satu jenis pengguna vs yang lain? Mereka harus mempertimbangkan apakah perlu ada tata letak yang berbeda dari satu jenis pengguna ke yang lain, atau jika ada solusi untuk kasus penggunaan yang lebih umum.

Mempertimbangkan hal ini, adalah ide yang baik untuk memulai dengan gambar rangka yang belum sempurna dan beralih ke prototipe yang dapat diuji dengan pengguna aktual selama fase penelitian pengguna. Wawasan yang benar-benar berharga dapat muncul dari fase penelitian pengguna singkat dengan hanya lima pengguna — dan itu akan menghemat banyak waktu.

Desain dashboard wireframe low-fidelity
Gambar rangka dasbor oleh Aaron Sananes

Pengungkapan Progresif dalam Desain Dasbor

Pengungkapan progresif adalah teknik yang digunakan untuk mempertahankan perhatian pengguna dengan mengurangi kekacauan. Menciptakan sistem pengungkapan progresif membantu menciptakan lingkungan yang berpusat pada pengguna, yang membantu memprioritaskan perhatian pengguna, menghindari kesalahan, dan menghemat waktu. Ini juga memungkinkan pengguna untuk fokus pada fitur-fitur utama yang penting bagi mereka dan tidak dipaksa untuk melalui semua fitur-termasuk yang mereka tidak butuhkan atau tidak tertarik.

Pengungkapan progresif adalah praktik terbaik desain dasbor yang juga akan mengurangi tingkat kesalahan secara signifikan; itu akan meningkatkan efisiensi dan membantu pengguna meningkatkan pemahaman mereka tentang dasbor ketika sistem didasarkan pada prioritas fitur.

Desain Dashboard UI dan visualisasi data
Desain dasbor oleh Jan Losert

Pengungkapan progresif menurunkan fitur-fitur canggih atau jarang digunakan ke layar sekunder, membuat aplikasi lebih mudah dipelajari dan lebih sedikit kemungkinan kesalahan. – Jakob Nielsen

Animasi adalah cara yang bagus untuk memenuhi berbagai kebutuhan pengguna sambil juga memenuhi berbagai fungsi. Ini merupakan pilihan yang bagus untuk digunakan saat data dan visual dimuat dan merupakan solusi pengungkapan progresif tingkat lanjut.

Animasi adalah proses menciptakan ilusi gerak; itu adalah dinamika yang menciptakan rasa kemajuan dan umpan balik yang konstan, sehingga mengurangi ketidakpastian pengguna dan meningkatkan kinerja yang dirasakan.

Animasi UI Dashboard
Dashboard oleh Virgil Pana

Keuntungan menggunakan pengungkapan progresif di dasbor:

  • Mengurangi ketidakpastian dan kecemasan pengguna (dengan menampilkan tanda-tanda kemajuan, pengguna yakin bahwa semuanya berfungsi sebagaimana mestinya)
  • Memberi pengguna sesuatu untuk dilihat (sebagian tampilan data) alih-alih membuat mereka menunggu
  • Memberi pengguna harapan yang jelas tentang langkah-langkah yang akan datang, dan menciptakan pemahaman tentang cara informasi disajikan secara hierarkis

Masalah potensial dengan pengungkapan progresif dan pemuatan data termasuk:

  • Menggunakan indikator dan pengungkapan dengan cara yang tidak pantas. Waktu pemuatan yang pendek dan langkah-langkah yang tidak berguna akan menciptakan gangguan dan bekerja melawan prinsip-prinsip kegunaan.
  • Keterlambatan dalam pengambilan data tanpa indikator kemajuan yang jelas dapat menyebabkan ketidakpastian pengguna dan tingkat pentalan yang lebih tinggi.
  • Menggunakan indikator kemajuan statis adalah solusi dengan sedikit makna, dan tidak menawarkan informasi yang cukup tentang kemajuan, yang juga dapat menyebabkan ketidakpastian pengguna dan tingkat bouncing yang lebih tinggi.
Desain Dashboard UI dan UX
Desain dasbor oleh Mason Yarnell

Ringkasan

Dashboard adalah cara yang ampuh untuk mengkomunikasikan data dan informasi lainnya, terutama dengan desain yang berpusat pada pengguna, yang berpusat pada tujuan yang mengikuti praktik terbaik desain dasbor dan visualisasi data yang tepat. Meskipun setiap dasbor berbeda dan memiliki tujuan, persyaratan, dan batasannya sendiri, mengikuti prinsip-prinsip dasar ini akan membantu dalam menciptakan desain yang luar biasa terlepas dari spesifik:

  • Pertama dan terutama, berempati dengan tipe pengguna Anda dan memahami tujuan mereka.
  • Sampaikan kisah yang jelas kepada pengguna dengan memanfaatkan visual, label, teknik pengungkapan progresif, dan animasi yang sugestif.
  • Buat hal-hal rumit menjadi mudah dengan menerapkan teknik riset pengguna.
  • Mengungkapkan data dan informasi pada waktu yang tepat, dalam sistem drill-down.
  • Gunakan visualisasi data untuk mengungkapkan informasi dengan cara yang bermakna.

sumber: toptal.com

Latest articles

41.6k Followers
Follow

Related articles