Visualizzazione dati

Le visualizzazioni dati permettono di rappresentare informazioni complesse in modo chiaro e comprensibile. Scopri come scegliere i modelli visivi più adatti e progettare visualizzazioni efficaci e accessibili, curando colori, tipografia e struttura.

Fondamenti

Metadati e link per approfondire

Semplifica la comprensione e l’accesso ai dati della PA

La visualizzazione dati, in inglese data visualization, è la rappresentazione di informazioni quantitative e qualitative attraverso l’uso di punti, linee, coordinate, numeri, simboli, parole e colori. Ne sono esempi i grafici e i sistemi di grafici.

Rappresentare i dati con forme e colori, invece che soltanto in tabelle, ti permette di:

  • rendere le informazioni più comprensibili e usabili;
  • catturare l’attenzione dell’utente;
  • stabilire un rapporto di fiducia, attraverso la trasparenza.

Le amministrazioni, infatti, devono rendere i dati accessibili e riutilizzabili attraverso le tecnologie digitali, come previsto dall'articolo 50 del Codice dell’amministrazione digitale.

Come progettare una visualizzazione dati

Considera pubblico e obiettivo

Per progettare una visualizzazione efficace, considera il pubblico a cui ti rivolgi e l’obiettivo che vuoi raggiungere. Questi elementi ti aiutano a scegliere la tipologia di visualizzazione e il linguaggio più adatti.

PubblicoObiettivoTipologia di visualizzazioneLinguaggio

Generalista (poca familiarità con l’argomento trattato e la visualizzazione dati)

Informare, Educare

Visualizzazioni singole guidate con grafici semplici

Linguaggio semplice senza tecnicismi

Esperto (familiarità con l’argomento trattato e la visualizzazione dati)

Analizzare, Monitorare

Visualizzazioni complesse con più viste o dashboard

Puoi usare tecnicismi, spiegandoli quando necessario

Scegli il modello visivo più adatto

Esistono diversi modelli visivi di grafici e ognuno ti aiuta comunicare i dati in modo diverso.

Comparazione

Un esempio microcopy per un messaggio di errore

Per evidenziare le differenze tra due o più valori. Rientrano in questa categoria i grafici a barre, i grafici a barre raggruppate, i grafici radar e i grafici a bolle.

Evoluzione nel tempo

Un esempio microcopy per un messaggio di errore

Per mostrare come una serie di valori cambia in un periodo di tempo predefinito. Rientrano in questa categoria i grafici a linee, i grafici ad aree e gli istrogrammi.

Suddivisione

Un esempio microcopy per un messaggio di errore

Per mostrare una parte di un totale. Rientrano in questa categoria i grafici a torta, i grafici bullet, i grafici ad aree impilate e le mappe ad albero (treemaps).

Distribuzione

Un esempio microcopy per un messaggio di errore

Per mostrare come i valori si distribuiscono in categorie.

Correlazione

Un esempio microcopy per un messaggio di errore

Per evidenziare se ci sono rapporti numerici diretti tra due o più indicatori. Rientrano in questa categoria i grafici a dispersione (scatterplots) e le mappe di calore (heatmaps).

Relazione

Un esempio microcopy per un messaggio di errore

Per mostrare legami di senso tra due o più entità. Rientrano in questa categoria i diagrammi alluviali (alluvial diagrams), i diagrammi ad albero (tree diagrams), i diagrammi di rete (network) e le coordinate parallele (parallel coordinates).

Posizione nello spazio

Un esempio microcopy per un messaggio di errore

Per mostrare i dati in relazione ad aree geografiche. Rientrano in questa categoria le mappe coropletiche (choropleth maps), i simboli proporzionali (proportional symbols) e le linee di connessione (connecting lines).

Includi gli elementi costitutivi

Elementi costitutivi di un grafico

Assicurati che siano presenti gli elementi necessari affinchè un grafico sia leggibile, efficace e accessibile:

  1. titolo, un testo conciso che descriva l'evidenza principale che trai dai dati;

  2. sottotitolo, utile a dettagliare il contesto di analisi dei dati;

  3. legenda, spiega l'associazione tra il dato e le variabili visive (colore, forma, dimensione, orientamento, texture). Quando possibile, integrala nel grafico (ad esempio se interattivo o con delle etichette);

  4. assi e griglia, con relative etichette, per aiutare gli utenti a comprendere le proporzioni, gli indicatori coinvolti e l’unità di misura dei dati;

  5. fonte dei dati, possibilmente con link al posto in cui sono pubblicati, per comunicare autorevolezza, agevolare trasparenza e creare fiducia negli utenti;

  6. data di ultimo aggiornamento, per aiutare gli utenti a valutare attualità e affidabilità dei dati.

Colori

I colori facilitano la lettura di una visualizzazione dati e aiutano a mettere in evidenza le informazioni più importanti. Partendo dai colori del design system, combinali nelle diverse palette adatte alla visualizzazione dei dati e verifica che ci sia sempre il contrasto minimo per poter distinguere facilmente tutti gli elementi dei grafici.

Palette sequenziale (quantitativa)

Le palette sequenziali sono utili in presenza di valori numerici per esprimere quantità ordinate o meno.

Palette monocromatica

Un esempio di palette sequenziale monocromatica

Usa una palette monocromatica per evidenziare la distribuzione di valori all’interno del dataset.

Palette divergente

Un esempio di palette sequenziale divergente

Usa una palette divergente per enfatizzare valori sopra o sotto lo zero oppure variazioni rispetto ad una soglia/obiettivo.

Palette categorica (qualitativa)

Un esempio di palette categorica

Le palette categoriche sono utili per distinguere elementi che non hanno relazione di senso tra loro, ad esempio delle categorie. Per massimizzare la leggibilità e l’accessibilità dei colori è importante che l’ordine dei colori sia usato per massimizzare l’accessibilità.

Tipografia

Usa font leggibili e della giusta dimensione, definisci una gerarchia chiara tra gli elementi testuali e assicurati che abbiano sempre un contrasto adeguato rispetto allo sfondo (4.5:1). Mantieni coerenza nella formattazione dei dati per facilitare il confronto.

Rispetta l'accessibilità

  • Accompagna la visualizzazione con una breve descrizione del messaggio principale per fornire contesto, usando sia i testi visibili (titolo e sottotitolo) che i testi alternativi nascosti (alt text).

  • Non usare colore e forme come unica modalità per veicolare messaggi significativi, ma fornisci sempre delle alternative testuali.

  • Rispetta il contrasto minimo: 3:1 per gli elementi dell’interfaccia e 4.5:1 per i testi.

  • Includi sempre la legenda nella visualizzazione. In questo modo, anche chi non distingue i colori può interpretare correttamente le informazioni.

  • Prevedi uno sviluppo accessibile lato front-end e offri alternative per accedere ai dati, come tabelle o descrizioni testuali dei contenuti principali.

  • Evita di mostrare informazioni solo al passaggio del mouse (hover): non sono accessibili alle tecnologie assistive e su dispositivi mobili.

  • Progetta interazioni coerenti tra le diverse visualizzazioni, ad esempio mantenendo la stessa posizione di filtri, menu, o selettori.