Praktik UI/UX yang baik

Membangun Dashboard dengan shinydashboard

Png Kee Seng

Researcher

Beberapa prinsip

  1. Jelaskan tujuan dashboard
  2. Pilih visualisasi yang tepat
  3. Gunakan warna secara efektif/intuitif
  4. Potong nilai besar
  5. Hindari terlalu banyak elemen interaktif
  6. Desain dashboard di tahap akhir
  • Poin-poin ini berlaku untuk semua dashboard
  • Daftar ini tidak lengkap
  • Rekomendasi, bukan kebenaran universal
Membangun Dashboard dengan shinydashboard

1. Jelaskan tujuan dashboard

  • Untuk siapa dashboard ini?
  • Apa yang perlu mereka ketahui?
  • Memahami kebutuhan pengguna meningkatkan pengalaman pengguna $^1$
  • Skenario: Buat dashboard untuk Sally
  • Tujuan: Melaporkan kinerja portofolionya
1 François, Mathilde, dkk. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Membangun Dashboard dengan shinydashboard

2. Pilih visualisasi yang tepat

  • Berlaku untuk visualisasi tunggal dan juga dashboard
  • Dashboard terdiri dari banyak visualisasi
  • Informasi apa yang berguna bagi Sally?
  • Selalu ada trade-off antara akurasi dan kejelasan
  • "The Truthful Art" oleh Alberto Cairo $^1$

Jenis grafik yang disarankan menurut Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Membangun Dashboard dengan shinydashboard

3. Gunakan warna secara efektif/intuitif

  • Secara konvensi, warna menyampaikan makna berbeda
  • Contoh
    • Merah biasanya menandakan peringatan/alert
    • Hijau biasanya menandakan pesan sukses
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Warna yang tidak tepat untuk pesan sukses.

Membangun Dashboard dengan shinydashboard

3. Gunakan warna secara efektif/intuitif

  • Secara konvensi, warna menyampaikan makna berbeda
  • Contoh
    • Merah biasanya menandakan peringatan/alert; pengguna pun mengharapkannya
    • Sebaliknya, hijau biasanya menandakan pesan sukses
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Warna yang tidak tepat untuk pesan sukses.

Warna yang tepat untuk pesan sukses.

Membangun Dashboard dengan shinydashboard

4. Potong nilai besar

  • Angka dapat ditampilkan di shinydashboard
  • Kadang presisi dikorbankan demi kejelasan
    • Bulatkan angka besar
round(2.324815454862,2)

[1] 2.32

Nilai tidak dipotong

Nilai dipotong

Membangun Dashboard dengan shinydashboard

5. Hindari terlalu banyak elemen interaktif

  • Perhatikan jumlah elemen interaktif
  • Terlalu banyak elemen dapat membingungkan sebagian pengguna
  • Lebih banyak tidak selalu lebih baik

Terlalu banyak simulasi tidak baik.

1 Gambar oleh Freepik
Membangun Dashboard dengan shinydashboard

6. Desain dashboard di tahap akhir

  • Jangan terburu-buru mendesain dashboard
    • Termasuk wireframe, estetika, dll.
  • Tentukan tujuan terlebih dahulu
    • Ini membantu memilih visualisasi yang tepat
Membangun Dashboard dengan shinydashboard

6. Desain dashboard di tahap akhir

  • Jangan terburu-buru mendesain dashboard
    • Termasuk wireframe, estetika, dll.
  • Tentukan tujuan terlebih dahulu
    • Ini membantu memilih visualisasi yang tepat

"Tujuan: buat dashboard untuk Sally."

  • Ia ingin melihat kinerja portofolionya
  • Ia juga ingin memantau kinerja tiap saham
  • Sekarang kita bisa menentukan penempatannya
Membangun Dashboard dengan shinydashboard

Ayo berlatih!

Membangun Dashboard dengan shinydashboard

Preparing Video For Download...