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

Scegli il modello visivo più adatto

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

Categoria modello visivo 1

Descrizione testuale della categoria, a cosa serve e quali grafici rientrano.

Categoria modello visivo 2

Descrizione testuale della categoria, a cosa serve e quali grafici rientrano.

Categoria modello visivo 3

Descrizione testuale della categoria, a cosa serve e quali grafici rientrano.

Categoria modello visivo 4

Descrizione testuale della categoria, a cosa serve e quali grafici rientrano.

Categoria modello visivo 5

Descrizione testuale della categoria, a cosa serve e quali grafici rientrano.

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.

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.

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

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 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. Mantieni coerenza nella formattazione dei dati per facilitare il confronto.

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.

Rispetta l'accessibilità

1. Non usare il colore come unica modalità per veicolare messaggi significativi. Usa forme diverse o pattern, mantenendoli puliti e semplici, ma non dare per scontato che tutti capiranno o riconosceranno cosa significano senza alcuna spiegazione.

2. Rispetta il contrasto minimo: scegli palette colori che siano inclusive e che garantiscano il rapporto minimo di contrasto 3:1 per elementi dell’interfaccia; 4.5:1 nel caso dei testi.

3. Includi la legenda nel grafico se possibile, etichettando direttamente i data point. Gli utenti che non riescono a distinguere determinati colori potranno comunque interpretare i dati.

4. Sollecita uno sviluppo accessibile lato front end e pensa ad alternative di accesso ai dati by default (ad esempio tabelle, alt-text descrittivi dei punti focali e della storia).

5. Evita informazioni che appaiono solo all'hover del mouse: è spesso difficile o impossibile da rendere leggibile da tecnologia assistiva, oltre a non essere una funzionalità disponibile su mobile. Cerca invece di rendere l’informazione visibile.

6. Progetta aree di navigazione coerenti tra le diverse visualizzazioni, per rendere più facile la lettura dei contenuti (ad esempio mantenendo la stessa posizione di filtri, menu, o selettori).

7. Supporta il grafico con una breve descrizione del messaggio generale per dare un contesto, sia attraverso Titolo e sottotitolo (visibili) che alt-text (invisibile)