Costruire una dashboard in 6 passaggi: dalla UX allo UI design

Una dashboard è un insieme di visualizzazioni interattive che nasce allo scopo di facilitare il confronto tra più dati. Di conseguenza, una dashboard è principalmente uno strumento che permette di generare insights a partire da un set di dati e innescare call-to-action.

Una dashboard è anche un sistema in cui si stratificano diversi livelli di progettazione, che riguardano sia il mondo della UX sia dello UI design. Di fronte a questa complessità, affrontiamo tutto un passo alla volta! Scopriamo insieme come.

 

  1. Definisci il tuo obiettivo: scegli quale tipo di dashboard utilizzare

Prima di iniziare a creare una dashboard, è importante decidere quale sarà il suo scopo. Dovrà dare risposta a delle domande precise oppure fornirà un’analisi più generica? Si baserà su un aggiornamento periodico dei dati o dovrà mostrarli in tempo reale? Una dashboard può rispondere a queste e ad altre domande in maniera diversa. A seconda del loro obiettivo finale, possiamo suddividere le dashboard in queste 3 macrocategorie:

  • Strategiche: sono dashboard che si concentrano su strategie a lungo termine e metriche di alto livello. Di solito vengono utilizzate per visualizzare un insieme di indicatori chiave di prestazione (KPI). Offrono una panoramica ampia sui dati e spesso propongono un confronto con valori target.
  • Operative: sono dashboard che vengono utilizzate per monitorare i processi e tracciare le prestazioni delle metriche chiave e dei KPIs. Si concentrano sulla variazione nel tempo di informazioni critiche, richiedendo un aggiornamento frequente dei dati. Portano ad ulteriori analisi e a call to action: per questo spesso forniscono la possibilità di drill-down dei dati e la presenza di alert.
  • Analitiche: sono dashboard che contengono una grande quantità di dati per identificare tendenze e modelli utili per decisioni e previsioni. Il loro scopo è facilitare l’analisi dettagliata, anche a livello di riga. I dati sono spesso connessi in tempo reale.

Quando lo scopo della dashboard è stato definito e hai scelto a quale categoria di dashboard fare riferimento, possiamo passare ad analizzare il contesto per cui verrà creata.

 

  1. Analizza il contesto: comprendi i bisogni degli utenti

 

Nel mondo della UX design, ma in generale nel mondo del design, progettare significa dare risposta ai bisogni espressi da un’utenza specifica. Per comprendere qual è la nostra utenza e quali sono i suoi bisogni, è fondamentale analizzare il contesto in cui ci troviamo a lavorare. Tre domande chiave possono supportarci in questo percorso:

  • Chi?

Questa prima domanda serve a definire chi utilizzerà la dashboard, identificando il responsabile delle decisioni. Come conseguenza, le caratteristiche della dashboard cambieranno in base al ruolo dell’utente, alla sua familiarità con i dati, alla sua formazione, ecc… L’obiettivo è quello di fornire il giusto messaggio o comunicazione al giusto pubblico.

  • Cosa?

Questa domanda ci serve a stabilire a quali bisogni cerchiamo di dare risposta. Dopo aver capito qual è la nostra utenza, dovremo identificare quale problema o questione sta guidando la costruzione della dashboard. Dobbiamo comunicare qualcosa di rilevante per l’utenza in modo chiaro.

  • Come?

Questa domanda ci porta a capire come possiamo usare i dati a supporto della storia che racconteremo con le visualizzazioni. A partire dai dati disponibili, creiamo delle visualizzazioni da inserire nelle dashboard, o meglio dei gruppi di visualizzazioni che presentano al meglio i dati. Inoltre, consideriamo fin da subito come la dashboard verrà utilizzata, ovvero su quale device sarà visualizzata.

A partire dalle risposte date a queste domande, possiamo capire come presentare i dati visivamente nella maniera più efficace: l’obiettivo è quello di costruire una comunicazione chiara che permetta di dare risposta al problema posto dall’utenza.

 

  1. Scegli le visualizzazioni: seleziona le informazioni da mostrare

“Minimizzare il carico cognitivo per massimizzare l’usabilità”: fornire solo ciò che è necessario per gli utenti è la chiave per evitare che vengano sopraffatti dai dati presentati nella dashboard. L’eccessivo carico cognitivo, ovvero la quantità di elementi visivi che il cervello deve elaborare, porta alla paralisi dell’analisi. Dando troppe informazioni agli utenti, essi tendono ad essere confusi, il che ritarda il processo di decisione. Gli esseri umani elaborano le informazioni visive tramite la memoria a breve termine: l’attenzione può essere fornita solo per un piccolo periodo di tempo, quindi è importante visualizzare solo ciò che è fondamentale.

Ma come si fa a sapere cosa è necessario e cosa no? È qui che entra in azione la ricerca sull’utenza che abbiamo condotto. Usiamo la nostra conoscenza del contesto per identificare le informazioni fondamentali che saranno più necessarie per gli utenti. Scegliere il formato giusto per visualizzare i dati è un passo importante durante la progettazione della dashboard: esistono diverse tipologie di grafico, e non sono tutte uguali! Ognuno risponde a necessità specifiche di analisi e si adatta a dati diversi. Quindi, teniamo in considerazione questi fattori quando vogliamo scegliere il giusto tipo di grafico:

  • Quale tipologia di dati abbiamo a disposizione (numerosità, dettaglio, campi presenti)
  • Che cosa voglio mostrare (messaggio principale)
  • Quale tipo di relazione voglio analizzare (rapporti tra i dati)
  • Cosa voglio mostrare esattamente nella visualizzazione (dettaglio ed elementi di supporto)

 

  1. Definisci la gerarchia: dai priorità alle informazioni

 

Abbiamo stabilito lo scopo della dashboard, il suo contesto e le visualizzazioni che ne faranno parte. A questo punto dobbiamo definire come verrà riempito lo spazio della dashboard, definendone il layout. Una buona pratica è avere in mente la “regola dei 5 secondi”: se l’utente non riesce a trovare quello che sta cercando entro 5 secondi, perde la concentrazione sul contenuto. Catturare l’attenzione dell’utente velocemente e mantenerla per tutto il tempo è invece il nostro obiettivo principale.

Capire l’importanza di ogni visualizzazione ci permette di assegnare ad ognuna di loro un ruolo. In relazione ai ruoli stabiliti, possiamo creare delle gerarchie visive che supportino la lettura del contenuto. In questo modo concentreremo l’attenzione dell’utente subito sulla parte principale della dashboard e la manterremo poi attiva con le visualizzazioni di supporto.

Un modo per ottenere questo è dedicare la parte superiore della pagina a quell’insieme di dati che hanno la priorità nella lettura. Una volta definita questa parte, si può proseguire creando raggruppamenti di visualizzazioni che analizzano le metriche associate. Il raggruppamento permette all’utente di trovare facilmente le informazioni rilevanti e quindi di rendere la dashboard logicamente coerente. Questo tipo di struttura è il F-pattern layout, perché riprende la forma di una F maiuscola: le informazioni si seguono a cascata dalla più importante fino al dettaglio.

Un’altra modalità di costruzione dei layout che supporta la creazione di gerarchie visive è lo Z-pattern layout. Questo layout si basa sul ripercorrere il percorso che l’occhio umano occidentale traccia naturalmente quando legge: da sinistra a destra, dall’alto al basso. Senza altre indicazioni, l’utente della dashboard seguirà il percorso a “z” attraverso lo schermo mentre legge le informazioni. Posizionare gli elementi in ordine di importanza lungo questo percorso stabilisce automaticamente una gerarchia tra le parti.

 

  1. Implementa l’interattività: favorisci l’esplorazione


 Il potere di una dashboard è quello di fornire interattività e analisi side-by-side: progettiamo dashboard, non report! L’aggiunta di interazioni a una dashboard permette all’utente di controllare l’ambito di analisi. Questa è una mossa intelligente da parte di chi progetta una dashboard: visualizzare troppi dati può travolgere l’utente, ma al tempo stesso restringere eccessivamente l’ambito dei dati visualizzati può penalizzare le possibilità di analisi. Dare il controllo all’utente è un’ottima soluzione che si pone nel mezzo tra le due.

Una dashboard interattiva ben costruita fornisce una varietà di modi per interagire con i dati.

Usando le interazioni, l’utente dovrebbe essere in grado di esplorare facilmente i dati per scoprire una vasta gamma di insights. Le interazioni inoltre aiutano a far emergere informazioni secondarie. Queste sono le azioni sui dati che generalmente possiamo implementare in una dashboard:

  • Drop-down Menu filter: filtra attraverso un elenco, fornendo una panoramica approfondita
  • Click-to-Filter: filtra tramite l’interazione con le visualizzazioni in maniera veloce e intuitiva
  • Drill-Through: mostra informazioni aggiuntive a partire da un dettaglio
  • Drilldown: aggiunge dettaglio a partire da un punto specifico della visualizzazione
  • Selection button: filtra o cambia la misura visualizzata con un click
  • Toggle button: cambia la misura o la visualizzazione con un click

La chiave per favorire una buona interazione è un’interfaccia chiara e facilmente comprensibile, in modo tale da consentire all’utente di decidere quali dati visualizzare e come raggiungere il dettaglio desiderato. Progettiamo con attenzione le interazioni in base al dispositivo su cui sarà possibile visualizzare la dashboard: non solo le dimensioni fisiche del dispositivo, ma anche una diversa modalità di fruizione (più dettagliata o più veloce) richiedono proposte di interazioni diverse.

 

  1. Definisci i dettagli: calibra gli aspetti grafici con cura

 

L’aspetto che diamo ad una dashboard ha una profonda influenza sulla lettura delle visualizzazioni. Anche se il focus del nostro lavoro è l’analisi dei dati, questo non significa che non dobbiamo dare una forma curata e accattivante al nostro strumento di analisi. Creando delle strutture visive di supporto e calibrando l’uso del colore, la dashboard offrirà una visibilità chiara dei dati, una navigazione semplice tra gli elementi e un aspetto sorprendente.

Dobbiamo tenere in considerazione una serie di elementi grafici per ottenere un risultato efficace e calibrato con cura:

  • Colore

La decisione sullo schema dei colori è una delle più importanti da prendere per una dashboard. In alcuni casi possiamo avere palette colori complete già predefinita, ma quando abbiamo l’opportunità di creare una tavolozza personalizzata assicuriamoci di essere consapevoli della teoria del colore. Lavorare con palette monocromatiche o armoniche è diverso rispetto ad utilizzare colori complementari o opposti. Il colore usato correttamente migliora l’analisi per tutti: progetta in un’ottica di efficacia e accessibilità.

  • Icone

Le icone sono la rappresentazione grafica di una funzionalità o di un concetto, rendendone immediato il riconoscimento da parte dell’utente. Le icone aggiungono molto all’usabilità di un’interfaccia. Per la loro lettura immediata, trovano utilizzo come bottoni, come legende o come supporto ai testi. Possiamo scegliere di usare icone esistenti già conosciute dagli utenti o creare immagini personalizzate.

  • Bottoni

I bottoni vengono utilizzati principalmente per due scopi: consentire la navigazione tra sezioni diverse (bottoni navigazione) o attivare delle azioni governate da filtri e parametri. Sono elementi molto importanti per l’usabilità della dashboard e richiedono di essere facilmente identificati: usa testi o icone all’interno dei bottoni e costruiscili con forme riconoscibili come cliccabili.

  • Testi

Le dashboard richiedono l’uso di diversi elementi testuali oltre a quelli presenti nelle visualizzazioni. Titoli, sottotitoli, testi esplicativi ed etichette sono le categorie principali. Iniziamo scegliendo un font unico per tutti questi elementi e costruiamo una struttura gerarchica definendo la dimensione, il peso e la spaziatura per ogni tipologia di testo.

  • Legende e info

Infine, non dimentichiamo di controllare l’aspetto delle legende e degli info button. Essendo elementi che completano la lettura delle visualizzazioni, è importante che siano integrati anche visivamente nel sistema della dashboard.

Hai letto gli altri articoli sulla data visualization con Tableau? Puoi recuperarli qui! E soprattutto puoi vedere tutte le viz anche sul nostro profilo Twitter.