Per essere efficace, una visualizzazione dei dati deve informare visivamente, semplicemente e rapidamente. Il rendering dei dati in forma grafica mira ad offrire una lettura semplificata che ti permetterà di capire meglio e decidere con calma, più veloce e più semplice.

Tecnologie disponibili

La visualizzazione dei dati è una disciplina particolarmente adatta alle tecnologie web e ai sottoinsiemi HTML5. Oggi esistono due famiglie principali tra le tecnologie più utilizzate: le rappresentazioni grafiche basate sulla tecnologia SVG e quelle che utilizzano la tecnologia CANVAS. Se entrambi presentano possibilità interattive, questi due approcci si basano su filosofie diverse che dovrebbero essere studiate a monte.

     

La scelta giusta dipende fortemente dalla tua stessa esigenza, dalla copertura desiderata, dal parco e dal pubblico interessato. I framework SVG offrono i cosiddetti rendering vettoriali, vale a dire che sono costruiti da elementi grafici disegnati tra punti individuati. Il file immagine di tipo .svg è in realtà un file contenente il codice che descrive i punti di giunzione e il modo in cui verranno uniti per disegnare un'immagine identica in proporzione qualunque sia la sua dimensione. I framework basati sulla tecnologia CANVAS manipolano i pixel.

La costruzione di un cruscotto efficace e adattato

Costruire una buona dashboard richiede una riflessione significativa prima dello sviluppo. A chi sono destinati i dati? Quali sono le motivazioni per rendere disponibili queste informazioni? Quali sono i messaggi da trasmettere? Cosa è importante? I dati stessi? Il suo volume? La sua evoluzione? Il suo valore oggi o la sua media in un dato periodo? La sua rappresentazione deve essere in scala? A volte, distorcere lo spazio e le sue proporzioni attirerà l'attenzione del visitatore sulla parte della grafica da evidenziare.

L'importanza della scelta del colore

Il significato da attribuire ai dati visualizzati si basa sul volume che rappresenta ma anche sul colore utilizzato per veicolare il messaggio. Ad esempio, su un grafico a torta che rappresenta il volume delle vendite di diversi prodotti, è ovvio che la quota maggiore sarà senza dubbio la migliore e sarà probabilmente illustrata con un colore positivo come il verde. Possiamo anche utilizzare immagini metaforiche per aumentare ulteriormente la chiarezza, ad esempio le barre di un grafico di piccole auto per rimanere nell'esempio precedente. Più grandi sono le vendite, più piccole auto ci sono.
Se invece un grafico a torta rappresenta il numero di assenze dei dipendenti di un'azienda, la parte più importante sarà anche la più preoccupante e, infatti, motiverà l'uso di un colore che porti questa connotazione come il rosso o l'arancione per esempio.

In ogni caso, una dashboard efficace è una dashboard chiara. I dati illustrati nelle rappresentazioni grafiche devono essere chiaramente didascalici e ogni rappresentazione deve riportare un titolo che permetta all'utente di capire cosa sta guardando. La rappresentazione deve essere l'elemento proposto. Se troppo testo illustra il perché del grafico, l'utente tenderà a prestare molta più attenzione alle spiegazioni che al messaggio veicolato dai dati e alla loro rappresentazione. Allo stesso modo, l'uso di pittogrammi può fornire un ulteriore livello di informazioni consentendo agli utenti di comprendere rapidamente il materiale esposto.

L'obiettivo del dashboard

I dati da visualizzare sono quindi direttamente correlati al messaggio da trasmettere, che è anche direttamente correlato al target di riferimento. In genere non cerchiamo di dire la stessa cosa allo stesso modo quando ci rivolgiamo alla direzione generale di un'azienda, ai suoi azionisti o ai suoi dipendenti.

Interattività

Un altro vantaggio molto importante delle rappresentazioni grafiche rispetto alle tabelle di dati è sicuramente la possibilità di aggiungere semplicemente l'interattività. Poter far sparire un dato e riavviare il calcolo della proporzione di ciascuno dei restanti può consentire un fine confronto e una semplice analisi. Inoltre, si può anche considerare di consentire all'utente di specificare il tipo di rappresentazioni grafiche che desidera utilizzare per questo o quel tipo di dati. In altre parole, anche offrire all'utente di modificare leggermente la sua dashboard per adattarla perfettamente al suo utilizzo è una ricca funzionalità!

Inoltre, più rappresentazioni grafiche possono lavorare insieme e interagire, cioè un cambio di stato e proporzione di una prima rappresentazione ne modificherà una seconda che verrà automaticamente aggiornata. Con questo metodo, capiremo l'impatto di un dato su un altro che non è o non sembra essere necessariamente collegato al primo.

Rappresenta un set di dati masterizzato. Più dati ci sono, meno vengono compresi.

Anche se un grafico può visualizzare un numero elevato di voci, è preferibile suddividere il tutto in più schermate, o meglio in più report. Ad esempio, se rappresentiamo le vendite di auto in tutto il mondo, la maggior parte degli utenti sarà interessata alle prime 5 o 10 classifiche. Probabilmente molto meno da brand più locali e quindi meno diffusi. Sceglieremo qui di rappresentare un primo grafico a torta con i 9 migliori punteggi, quindi una 10a fetta che combinerà tutti i risultati rimanenti in relazione alla massa complessiva.
Tuttavia, se l'utente è interessato a una maggiore granularità, gli verrà proposto di fare clic sull'"altra" slice (la 10a slice) e questo clic avrà l'effetto di consentire all'utente di "entrare" nel grafico, ovvero il la rappresentazione verrà ridisegnata ma questa volta l'intero grafico a torta rappresenterà solo il volume inizialmente contenuto nella 10a fetta. L'utente vedrà così comparire il secondo livello del grafico, ovvero le quote da 10 a 19 e il 20° rappresenterà ancora una volta il volume cumulativo dei dati rimanenti.
Come avrai capito, costruire una dashboard efficace si basa su molto buon senso. Anche questo tipo di interfaccia si basa sulle stesse regole di un'interfaccia più classica.
Alcuni framework consigliati:
D3.js (open source), HighCharts (a pagamento), ElyCharts (open source), iCharts ecc.
Di Yann Cadoret
Partner @UXRepublic
[actionbox color=”default” title=”” description=”UX-REPUBLIC è un'agenzia specializzata in design incentrato sull'utente. Siamo anche un centro di formazione riconosciuto. Trova tutti i nostri corsi di formazione in UX-DESIGN e Front Development (HTML/CSS/JS) sul nostro sito web training.ux-republic.com” btn_label=”I nostri corsi di formazione” btn_link=”http://training.ux-republic. com ” btn_color=”primario” btn_size=”grande” btn_icon=”stella” btn_external=”1″]