Bune practici UI/UX

Crearea dashboardurilor cu shinydashboard

Png Kee Seng

Researcher

Câteva principii

  1. Clarificați scopul dashboard-ului
  2. Alegeți vizualizări adecvate
  3. Utilizați culorile eficient/intuitiv
  4. Trunchiați valorile mari
  5. Evitați prea multe elemente interactive
  6. Proiectați dashboard-ul la final
  • Aceste puncte se aplică oricărui dashboard în general
  • Lista nu este în niciun caz exhaustivă
  • Sunt sugestii, nu adevăruri universale
Crearea dashboardurilor cu shinydashboard

1. Clarificați scopul dashboard-ului

  • Pentru cine este dashboard-ul?
  • Ce trebuie să știe?
  • O mai bună înțelegere a cerințelor utilizatorilor îmbunătățește experiența $^1$
  • Scenariu: Construiți un dashboard pentru Sally
  • Scop: Raportați performanța portofoliului său
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Crearea dashboardurilor cu shinydashboard

2. Alegeți vizualizări adecvate

  • Se aplică vizualizărilor individuale, dar și unui dashboard
  • Un dashboard este alcătuit din multe vizualizări
  • Ce informații îi vor fi utile lui Sally?
  • Întotdeauna există un compromis între acuratețe și claritate
  • „The truthful art", de Alberto Cairo $^1$

Tipuri de grafice recomandate de Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Crearea dashboardurilor cu shinydashboard

3. Utilizați culorile eficient/intuitiv

  • Convențional, unele culori transmit semnificații diferite
  • Exemple
    • Roșu indică de obicei un avertisment sau o alertă
    • Verde indică de obicei un mesaj de succes
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Culoare inadecvată pentru un mesaj de succes.

Crearea dashboardurilor cu shinydashboard

3. Utilizați culorile eficient/intuitiv

  • Convențional, unele culori transmit semnificații diferite
  • Exemple
    • Roșu indică de obicei un avertisment sau o alertă, iar utilizatorii se vor aștepta la asta
    • Verde, pe de altă parte, indică de obicei un mesaj de succes
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Culoare inadecvată pentru un mesaj de succes.

Culoare adecvată pentru un mesaj de succes.

Crearea dashboardurilor cu shinydashboard

4. Trunchiați valorile mari

  • Numerele pot fi afișate într-un shinydashboard
  • Este necesară sacrificarea preciziei în favoarea clarității
    • Numerele mari ar trebui rotunjite
round(2.324815454862,2)

[1] 2.32

Valori netrunchiate

Valori trunchiate

Crearea dashboardurilor cu shinydashboard

5. Evitați prea multe elemente interactive

  • Fiți atenți la numărul de elemente interactive
  • Prea multe astfel de elemente pot deruta utilizatorii
  • Mai mult nu înseamnă întotdeauna mai bine

Prea multă stimulare nu este benefică.

1 Image by Freepik
Crearea dashboardurilor cu shinydashboard

6. Proiectați dashboard-ul la final

  • Nu vă grăbiți să proiectați dashboard-ul
    • Aceasta include wireframing, design estetic etc.
  • Stabiliți mai întâi scopul
    • Acest lucru ne ajută să alegem vizualizări adecvate
Crearea dashboardurilor cu shinydashboard

6. Proiectați dashboard-ul la final

  • Nu vă grăbiți să proiectați dashboard-ul
    • Aceasta include wireframing, design estetic etc.
  • Stabiliți mai întâi scopul
    • Acest lucru ne ajută să alegem vizualizări adecvate

"Scop: construiți un dashboard pentru Sally."

  • Poate dori să vadă cum evoluează portofoliul său
  • Poate dori și să urmărească performanța acțiunilor individuale
  • Acum putem decide plasarea acestora
Crearea dashboardurilor cu shinydashboard

Să exersăm!

Crearea dashboardurilor cu shinydashboard

Preparing Video For Download...