God UI/UX-praxis

Bygga dashboards med shinydashboard

Png Kee Seng

Researcher

Några principer

  1. Var tydlig med dashboardens syfte
  2. Välj lämpliga visualiseringar
  3. Använd färger effektivt och intuitivt
  4. Trunkera stora värden
  5. Undvik för många interaktiva element
  6. Designa dashboarden sist
  • Dessa punkter gäller för dashboards generellt
  • Listan är inte på något sätt uttömmande
  • Rekommendationer snarare än universella sanningar
Bygga dashboards med shinydashboard

1. Var tydlig med dashboardens syfte

  • Vem är dashboarden avsedd för?
  • Vad behöver de veta?
  • Bättre förståelse för användarnas behov förbättrar upplevelsen $^1$
  • Scenario: Bygg en dashboard för Sally
  • Syfte: Redovisa hur hennes portfölj presterar
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Bygga dashboards med shinydashboard

2. Välj lämpliga visualiseringar

  • Gäller enskilda visualiseringar men även dashboards
  • En dashboard består av många visualiseringar
  • Vilken information är relevant för Sally?
  • Det finns alltid en avvägning mellan noggrannhet och tydlighet
  • "The truthful art", av Alberto Cairo $^1$

Diagramtyper att använda, enligt Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Bygga dashboards med shinydashboard

3. Använd färger effektivt och intuitivt

  • Traditionellt förmedlar vissa färger specifika betydelser
  • Exempel
    • Rött signalerar vanligtvis varning eller alert
    • Grönt signalerar vanligtvis ett lyckat resultat
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Olämplig färg använd för ett lyckat meddelande.

Bygga dashboards med shinydashboard

3. Använd färger effektivt och intuitivt

  • Traditionellt förmedlar vissa färger specifika betydelser
  • Exempel
    • Rött signalerar vanligtvis varning eller alert, och användare förväntar sig det
    • Grönt, däremot, signalerar vanligtvis ett lyckat resultat
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Olämplig färg använd för ett lyckat meddelande.

Lämplig färg använd för ett lyckat meddelande.

Bygga dashboards med shinydashboard

4. Trunkera stora värden

  • Tal kan visas i en shinydashboard
  • Viss precision offras för tydlighetens skull
    • Stora tal bör avrundas
round(2.324815454862,2)

[1] 2.32

Icke-trunkerade värden

Trunkerade värden

Bygga dashboards med shinydashboard

5. Undvik för många interaktiva element

  • Var noga med antalet interaktiva element
  • För många sådana element kan förvirra användarna
  • Mer är inte alltid bättre

För mycket stimulans är inte bra.

1 Bild av Freepik
Bygga dashboards med shinydashboard

6. Designa dashboarden sist

  • Hasta inte in i designarbetet
    • Det inkluderar wireframing, estetisk design osv.
  • Fastställ syftet först
    • Det hjälper oss att välja lämpliga visualiseringar
Bygga dashboards med shinydashboard

6. Designa dashboarden sist

  • Hasta inte in i designarbetet
    • Det inkluderar wireframing, estetisk design osv.
  • Fastställ syftet först
    • Det hjälper oss att välja lämpliga visualiseringar

"Syfte: bygg en dashboard för Sally."

  • Hon kanske vill se hur hennes portfölj presterar
  • Hon kanske också vill följa enskilda aktiers utveckling
  • Nu kan vi bestämma hur elementen ska placeras
Bygga dashboards med shinydashboard

Nu kör vi en övning!

Bygga dashboards med shinydashboard

Preparing Video For Download...