Goede UI/UX-praktijken

Dashboards bouwen met shinydashboard

Png Kee Seng

Researcher

Enkele principes

Wees duidelijk over het doel van het dashboard
Kies passende visualisaties
Gebruik kleuren effectief/intuitief
Kort grote waarden in
Vermijd te veel interactieve elementen
Ontwerp het dashboard als laatste

Deze punten gelden voor elk dashboard
De lijst is niet uitputtend
Richtlijnen, geen absolute waarheden

1. Wees duidelijk over het doel van het dashboard

Voor wie is het dashboard?
Wat moeten ze weten?
Beter begrip van gebruikersbehoeften verbetert de UX $^1$
Scenario: maak een dashboard voor Sally
Doel: rapporteer de prestaties van haar portefeuille

¹ François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552

2. Kies passende visualisaties

Geldt voor losse visualisaties, maar ook voor een dashboard
Een dashboard bestaat uit meerdere visualisaties
Welke info is nuttig voor Sally?
Altijd een afweging tussen nauwkeurigheid en duidelijkheid
“The Truthful Art”, door Alberto Cairo $^1$

Welke grafiek te gebruiken, volgens Alberto Cairo.

¹ Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016

3. Gebruik kleuren effectief/intuitief

Bepaalde kleuren hebben conventionele betekenissen
Voorbeelden
- Rood staat meestal voor waarschuwing of alert
- Groen staat meestal voor een succesmelding

sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Onjuiste kleur gebruikt voor een succesmelding.

3. Gebruik kleuren effectief/intuitief

Bepaalde kleuren hebben conventionele betekenissen
Voorbeelden
- Rood staat meestal voor waarschuwing of alert; gebruikers verwachten dat
- Groen staat daarentegen meestal voor een succesmelding

sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Onjuiste kleur gebruikt voor een succesmelding.

Juiste kleur gebruikt voor een succesmelding.

4. Kort grote waarden in

Je kunt getallen tonen in een shinydashboard
Lever wat precisie in voor duidelijkheid
- Rond grote getallen af

round(2.324815454862,2)

[1] 2.32

Niet-afgekorte waarden

Afgekorte waarden

5. Vermijd te veel interactieve elementen

Let op het aantal interactieve elementen
Te veel kan gebruikers verwarren
Meer is niet altijd beter

Te veel simulatie is niet goed.

¹ Afbeelding door Freepik

6. Ontwerp het dashboard als laatste

Ga niet te snel ontwerpen
- Inclusief wireframes, visueel ontwerp, enz.
Bepaal eerst het doel
- Dan kies je passende visualisaties

6. Ontwerp het dashboard als laatste

Ga niet te snel ontwerpen
- Inclusief wireframes, visueel ontwerp, enz.
Bepaal eerst het doel
- Dan kies je passende visualisaties

"Doel: maak een dashboard voor Sally."

Ze wil misschien zien hoe haar portefeuille presteert
Ze wil mogelijk ook individuele aandelen volgen
Nu kunnen we de plaatsing bepalen

Laten we oefenen!

Dashboards bouwen met shinydashboard

Preparing Video For Download...