Buone pratiche UI/UX

Creare dashboard con shinydashboard

Png Kee Seng

Researcher

Alcuni principi

  1. Chiarisci lo scopo del dashboard
  2. Scegli visualizzazioni appropriate
  3. Usa i colori in modo efficace/intuitivo
  4. Tronca i valori grandi
  5. Evita troppi elementi interattivi
  6. Progetta il dashboard per ultimo
  • Questi punti valgono per qualsiasi dashboard
  • L’elenco non è esaustivo
  • Sono suggerimenti, non verità universali
Creare dashboard con shinydashboard

1. Chiarisci lo scopo del dashboard

  • Per chi è il dashboard?
  • Di cosa ha bisogno di sapere?
  • Capire meglio i requisiti utente migliora la UX $^1$
  • Scenario: creare un dashboard per Sally
  • Scopo: riportare l’andamento del suo portafoglio
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Creare dashboard con shinydashboard

2. Scegli visualizzazioni appropriate

  • Riguarda le singole visualizzazioni, ma vale anche per un dashboard
  • Un dashboard è composto da molte visualizzazioni
  • Quali info saranno utili a Sally?
  • C’è sempre un compromesso tra accuratezza e chiarezza
  • "The truthful art", di Alberto Cairo $^1$

Tipi di grafici da usare, secondo Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Creare dashboard con shinydashboard

3. Usa i colori in modo efficace/intuitivo

  • In genere, alcuni colori hanno significati diversi
  • Esempi
    • Il rosso di solito indica avviso/allerta
    • Il verde di solito indica un successo
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Colore inappropriato per un messaggio di successo.

Creare dashboard con shinydashboard

3. Usa i colori in modo efficace/intuitivo

  • In genere, alcuni colori hanno significati diversi
  • Esempi
    • Il rosso di solito indica avviso/allerta e l’utente se lo aspetta
    • Il verde, invece, di solito indica un successo
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Colore inappropriato per un messaggio di successo.

Colore appropriato per un messaggio di successo.

Creare dashboard con shinydashboard

4. Tronca i valori grandi

  • I numeri possono essere mostrati in shinydashboard
  • A volte serve sacrificare precisione per chiarezza
    • Conviene arrotondare i numeri grandi
round(2.324815454862,2)

[1] 2.32

Valori non troncati

Valori troncati

Creare dashboard con shinydashboard

5. Evita troppi elementi interattivi

  • Fai attenzione al numero di elementi interattivi
  • Troppi elementi possono confondere alcuni utenti
  • Più non è sempre meglio

Troppe simulazioni non vanno bene.

1 Immagine di Freepik
Creare dashboard con shinydashboard

6. Progetta il dashboard per ultimo

  • Non buttarti subito nel design del dashboard
    • Inclusi wireframe, estetica, ecc.
  • Definisci prima lo scopo
    • Ti aiuta a scegliere visualizzazioni appropriate
Creare dashboard con shinydashboard

6. Progetta il dashboard per ultimo

  • Non buttarti subito nel design del dashboard
    • Inclusi wireframe, estetica, ecc.
  • Definisci prima lo scopo
    • Aiuta a scegliere visualizzazioni appropriate

"Scopo: creare un dashboard per Sally."

  • Potrebbe voler vedere l’andamento del suo portafoglio
  • E anche tracciare le performance dei singoli titoli
  • Ora possiamo decidere i posizionamenti
Creare dashboard con shinydashboard

¡Vamos a practicar!

Creare dashboard con shinydashboard

Preparing Video For Download...