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.

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.

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