Visualizzazione dati

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 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.

Scegli il modello visivo più adatto

Ogni modello visivo permette di mettere in evidenza aspetti diversi dei dati, come differenze, andamenti nel tempo o parti di un totale. Scegli il grafico in base a ciò che vuoi far emergere: lo stesso modello può essere usato per scopi diversi.

Comparazione

Per evidenziare le differenze tra due o più valori, puoi usare i grafici a barre, i grafici a barre raggruppate, i grafici a bolle e i grafici radar.

Evoluzione nel tempo

Per mostrare come una serie di valori cambia in un periodo di tempo predefinito, puoi usare i grafici a linee, i grafici ad aree e gli istogrammi.

Suddivisione

Per mostrare una parte di un totale, puoi usare i grafici a ciambella, i grafici bullet, i grafici ad aree impilate e i grafici ad aree gerarchiche (treemap).

Distribuzione

Per mostrare come i valori si distribuiscono in categorie, puoi usare i grafici a dispersione e le matrici.

Correlazione

Per evidenziare rapporti numerici diretti tra due o più indicatori, puoi usare i grafici a dispersione (scatterplot) e le mappe di calore (heatmap).

Relazione

Per mostrare legami di senso tra due o più entità, puoi usare i diagrammi alluviali (alluvial diagram), i diagrammi ad albero (tree diagram) e i diagrammi di rete (network).

Posizione nello spazio

Per mostrare i dati in relazione ad aree geografiche, puoi usare le mappe coropletiche (choropleth map), le mappe con simboli proporzionali (proportional symbols) e le mappe con linee di connessione (connecting lines).

Includi gli elementi costitutivi

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.

Facilita la lettura con l'uso dei colori

I colori aiutano a distinguere gli elementi di una una visualizzazione dati e a mettere in evidenza le informazioni più importanti. Partendo dai colori del design system, combinali in diverse palette adatte alla visualizzazione dati e in linea con l'identità del tuo sito o servizio. Verifica che ci sia sempre il contrasto minimo per poter distinguere facilmente elementi grafici e testuali dallo sfondo.

Palette sequenziale (quantitativa)

Le palette sequenziali sono utili per rappresentare valori numerici in ordine crescente o decrescente.

Palette monocromatica

Usa una palette monocromatica per mostrare la distribuzione di valori all’interno di un dataset ed evidenziarne gli estremi.

Palette divergente

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

Opponi a un colore il suo complementare, o un colore analogo al suo complementare, per creare una forte differenziazione visiva. Ad esempio:

• blu, grigio, arancio;
• blu, grigio, rosso;
• verde, giallo, arancio.

Palette categorica (qualitativa)

Le palette categoriche sono utili per rappresentare dati non numerici che hanno una relazione di senso tra loro.

• Associa colori diversi ad ogni categoria di dato in modo da distinguere chiaramente gli elementi del grafico e facilitarne la lettura.
• Mantieni un contrasto adeguato tra i colori scelti: l'ordine e il tono della palette nell'immagine sono ottimizzati per ottenere un contrasto adeguato.

Mantieni coerenza tra gli stili tipografici

Usa font leggibili e di dimensioni adeguate, definisci una gerarchia chiara tra gli elementi testuali e assicurati che abbiano sempre un contrasto adeguato rispetto allo sfondo (almeno 4.5:1).

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 il colore come unica modalità per veicolare messaggi significativi, ma combinalo con altre variabili visive (forma, tinta, tono, texture e orientamento).

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

• Quando possibile, aggiungi le etichette della legenda direttamente sugli elementi del grafico.

• 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 esperienze coerenti tra le diverse visualizzazioni, ad esempio mantenendo la stessa posizione di filtri, menu o selettori.