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

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

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

Un esempio di palette sequenziale monocromatica

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

Un esempio di palette sequenziale divergente

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

Un esempio di palette categorica

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.

Rispetta l'accessibilità

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

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

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

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

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