No. 200

Il web non è il luogo tradizionale della data visualization: potreste incontrare un grafico a barre qua e là nel vostro viaggio online in un determinato giorno, ma non sono mai stati un artefatto della storia del web. Sembra però che tutto questo stia cambiando.

Poiché il mondo sta diventando sempre di più data-driven, stiamo assistendo a un maggiore utilizzo delle visualization nelle pagine web e nei nostri brief di progetto. Ci aiutano a raccontare storie che creano un miglior coinvolgimento da parte dei nostri utenti e possono addirittura fargli fare una qualche azione significativa.

Il problema è che questi dataset - a volte così grandi da essere chiamati “big data” - possono rendere difficili le visualizzazioni con un significato. Ma noi designer siamo attrezzati per gestire questa situazione: dobbiamo solo sapere quello che i nostri utenti sperano di ottenere dalla visualizzazione e dall'interazione con tali visualization e noi dobbiamo far sì che ne valga la pena.

I dati hanno un grande potere di persuasione: sono sufficientemente potenti da cambiare il comportamento quotidiano degli utenti, specialmente quando i dati sono informativi, chiari e utilizzabili. Dovremmo mettere al lavoro le data visualization sui nostri siti, migliorando i nostri design per mostrare agli utenti in che modo i dati sono al servizio della storia di cui sono venuti ad apprendere.

La data visualization sul web può avere significato permettendo alle persone di scoprire le storie più piccole che per loro possono avere importanza, personalizzando la loro user experience invece di metterli su un percorso predeterminato.

Gli utenti che cercano di interagire con degli insiemi grandi e generalmente disconnessi di dati mentre navigano su un sito o che cercano di accedere ad informazioni rilevanti finiscono per andare incontro a un compito difficile, se non impossibile. I nostri siti perdono una certa misura di usabilità se non sono ben progettati, anche se il web è un medium naturale per inviare dati veramente interattivi.

Come nel caso del design, l'approccio che usiamo quando creiamo una visualizzazione destinata all'utente è basato sul contesto e sui vincoli con cui dobbiamo lavorare. Le data visualization buone, quelle con un significato, devono essere accessibili e umane anche se i dati vengono raramente descritti con queste parole.

Raccontare una storia

La chiave per progettare visualizzazioni è di concentrarci su qualcosa nel dataset che sia in relazione e con gli utenti e sia per loro importante. Questa cosa l'ho scoperta per caso mentre stavo realizzando una visualizzazione dall'insieme di dati Open Food Facts disponibile pubblicamente, il quale contiene informazioni crowd-sourced sui prodotti culinari da tutto il mondo.

Sebbene il dataset copra un range esteso di informazioni (perfino i materiali del packaging e il numero di additivi), ho scelto di concentrarmi su un confronto del consumo medio di zucchero in vari paesi (Fig. 1) perché ero personalmente preoccupato dall'argomento. È saltato fuori che questo argomento preoccupava anche altri ed è diventato il progetto più popolare per quel dataset su Kaggle.

Grafico a barre che illustra il consumo di quantità di zuccheri per paese

Fig. 1: Consumo nazionale medio di zucchero

Sebbene non avessi usato estensivamente il dataset nella mia visualizzazione rozza e brutta, quello su cui ho scelto di concentrarmi ha raccontato una storia che ha risuonato con le persone perché la maggior parte di loro veniva da paesi elencati o si era reso coscientemente conto dell'alto consumo generale di zuccheri e dei suoi effetti sulla salute. In retrospettiva, cos'è più personale e importante della propria salute?

Selezionare i punti di dati che rafforzano una storia con un risultato positivo (che sia mangiare meno zuccheri o ridurre le emissioni chimiche su larga scala) può essere grandioso, ma è importante presentare una storia che sia quanto più obiettiva possibile e prendere decisioni etiche su quali parti dei dati vogliamo usare mentre raccontiamo la storia.

Ma cos'è esattamente una storia nel contesto della data visualization? Non possiamo cominciare con “c'era una volta”, quindi dobbiamo avvicinarci all'idea in maniera diversa.

Whitney Quesenbery e Kevin Brooks forniscono queste definizioni di storia nel loro libro Storytelling for User Experience:

  • le storie descrivono il contesto di una situazione,
  • le storie possono illustrare i problemi,
  • le storie si possono usare per aiutare le persone a ricordare,
  • le storie possono essere usate per persuadere e intrattenere.

E io aggiungerei questo all'elenco:

  • le storie possono farvi mettere in questione lo stato di una situazione.

Affrontare alcuni o tutti questi attributi è una sfida in particolare per i grandi dataset per via della quantità di informazioni che può rendere difficile individuare un filo narrativo. Ma, grandi o no, i principi rimangono gli stessi. Visualizzare un qualunque tipo di storia data-driven che risuoni può avere un'influenza positiva sulle decisioni degli utenti.

Suscita anche altre domande che gli utenti stessi potrebbero porre.

Per esempio, perché alcuni paesi consumano quantità maggiori di zucchero? Sono quelli che immaginiamo? L'informazione potrebbe mettere in discussione un pregiudizio o due che qualcuno potrebbe aver avuto prima di vedere i risultati. Ricordatevi solo che la visualizzazione può essere un trampolino per ulteriori scoperte, facendo aumentare la conoscenza dell'utente ed eventualmente influenzando le loro scelte quotidiane da quel momento in poi.

Se state cercando di inserire del significato in una grande visualizzazione attraverso la storia di una sotto-sezione di un dataset, è importante:

  • scoprire quello che interessa ai vostri utenti nel dataset. Rendetelo rilevante ai loro bisogni personali, desideri e interessi.
  • Concentratevi spietatamente su quella sotto-sezione. Liberatevi da qualsiasi altra cosa che non faccia avanzare la storia che la vostra visualizzazione sta raccontando.
  • Prestate attenzione a prendere decisioni etiche e imparziali riguardo a quali data point usate per creare delle visualizzazioni che potrebbero influenzare i vostri utenti.
  • State attenti a non dare tutte le risposte alle persone: permettetegli di porre le loro domande e di fare le loro scoperte sui dati.

Questo approccio vi permette di creare qualcosa che non solo ha importanza a livello personale, ma che presenta anche un significato in un modo che incoraggia e permette agli utenti di agire.

Ma noi abbiamo già una storia

Sebbene estesi, alcuni grandi dataset ruotano già attorno a una singola storia. Un modo interessante per gestire questa particolare questione è di mostrare simultaneamente diversi aspetti di un dataset del genere, permettendo all'utente di scoprire quel significato. Questa tecnica è chiamata “small multiples”. (Fig. 2)

Vari grafici che illustrano visivamente i dati come visti dalla memory view, code view e process view

Fig. 2: Visualizzazione del memory stall dal progetto Rivet a Stanford.

Per esempio, il cluster di visualizzazioni qui sopra ha a che fare con la “storia” dei problemi di memory stall in un computer. Quello che trovo interessante del cluster è che l'heading di ogni visualizzazione comincia con una qualche variazione di “memory stall time”. Nonostante siano visualizzazioni separate, sono collegate dalla singola storia che raccontano e la presentano da prospettive simultanee ma distinte.

È possibile che le prospettive appaiano completamente diverse le une dalle altre se visualizzano diversi tipi di dati. Per esempio, i grafici a barre e i grafici ad area possono coesistere armoniosamente se le rappresentazioni sono appropriate per i dati che stanno mostrando. L'Australian Census Explorer illustra in che modo questo potrebbe funzionare (Fig. 3). Permette all'utente di stabilire le proprie narrazioni attraverso la scelta di topic quali il linguaggio o il posto.

Screenshot dell'elenco dei linguaggi nativi nell'Australian Census Explorer

Fig. 3: Avendo la libertà di esplorare, gli utenti creano spontaneamente una narrazione personale.

Inquadrare le visualizzazioni attorno a un argomento personale (come il linguaggio nativo di qualcuno) influenza in maniera appropriata tutti gli ”small multiples”: il reinquadramento serve per personalizzare i dati. (Fig. 4)

Screenshot che mette a confronto due grafici a barre orizzontali che mostrano i dati di genere ed età per gli Australiani e gli Australiani che parlano inglese

Fig. 4: Confronto dei dati di genere ed età per gli Australiani e gli Australiani di lingua inglese.

Screenshot che mostra i dati Country of Birth, elencando le percentuali per vari paesi e una mappa globale con le linee che collegano l'Australia a ciascun paese

Fig. 5: Analisi dettagliata del Paese di nascita per i cittadini Australiani.

Screenshot che mette a confronto due grafici a barre verticali che mostrano i range di reddito per genere per gli Australiani e gli Australiani di lingua Inglese.

Fig. 6: Scaglioni di reddito per genere per gli Australiani e per gli Australiani di lingua inglese.

Storytelling attraverso l'interazione

Può essere molto utile con questo approccio includere un'interazione in un design che sia in grado di influenzare gli altri, qualcosa che aiuti l'utente a vedere delle relazioni tra i data point che potrebbero non aver preso in considerazione prima. Questo esempio tratto dal sito Polygraph mostra tutti i progetti Kickstarter nella dimensione dello spazio, organizzati qui per categoria e città Americana. (Fig. 7)

Grafici a punti che mostrano le categorie, il numero di progetti e la dimensione dei progetti in una selezione di città Americane.

Fig. 7: Data visualization ben progettate possono convogliare più concetti e informazioni in parallelo.

La visualizzazione è particolarmente interessante se permette agli utenti di vedere la relazione di una variabile (in questo caso, la categoria del progetto) con le altre, come le città americane o le dimensioni del progetto. (Si noti la prevalenza dei progetti musicali a Nashville e dei progetti di game a Austin e Seattle).

The Lens fa qualcosa di simile nelle sue visualizzazioni del genoma umano (Fig. 8) permettendo agli utenti di cambiare visualizzazioni mediante vari filtri.

Barre orizzontali allineate con i loro rispettivi segmenti della sequenza del genoma umano

Fig. 8: I dati possono essere filtrati per mostrare viste diverse del genoma umano.

Questo può essere ancora più efficace per gli “small multiples” mostrati nel tempo. La Fig. 9 mostra in che modo questo approccio sia usato sul sito web di un gestore di fondi di investimento. Cambiando il periodo di tempo della performance di un fondo di investimento mostra anche in che modo la valutazione di rischio e la crescita di un investimento cambiano durante quel periodo. Sfruttando delle animazioni web intuitive, possiamo vedere degli snapshot dei dati in momenti precisi nel tempo.

Uno stack di grafici a barre sovrapposti che mostrano diversi tracking items, più uno slider verticale che mostra i cambiamenti nei tracking items quando vengono mossi su punti diversi lungo la riga

Fig. 9: Interagendo con un “small multiple” si influenzano anche gli altri, mostrando delle relazioni in punti diversi del tempo.

Se il dataset è già centrato attorno a qualche tipo di storia onnicomprensiva, può essere una buona idea:

  • mostrare parti diversi del dataset simultaneamente in visualizzazioni separate;
  • trattare queste visualizzazioni separate come individuali su misura per i dati che stanno presentando (i grafici a barre e i grafici ad area possono vivere insieme in armonia se i dati lo rendono appropriato);
  • se c'è interazione, assicuratevi che influenzi l'intero approccio della visualizzazione così che le relazioni tra i data point siano più evidenti;
  • applicate delle tecniche di animazione pensate bene per essere sicuri che l'interazione sia intuitiva.

Ci sono troppe storie

Cosa facciamo quando un dataset non ha una singola grande storia da raccontare ma abbiamo ancora bisogno di visualizzare tutti i dati al suo interno?

Sebbene ad alcuni dataset manchi un focus specifico (per esempio, “memory stall time”, “fund performance” o “all-Kickstarter-projects-ever”), i data point potrebbero avere delle relazioni interne che rivelano delle storie minuscole. Come creiamo un significato in base a cui agire per queste visualizzazioni?

Mostrare semplicemente i dati così come sono, anche in una visualizzazione che sembra andar bene, raramente funziona bene. Nella Fig. 10, vediamo le relazioni tra i code package di Python, ma in un modo che non è altro che confuso e incoerente quanto lo sono i dati nel loro stato naturale. La mancanza di focus e narrativa si nota. (Detto ciò, il dataset è estremamente largo quindi una singola narrazione non è in realtà possibile).

Un grafico che illustra numerosi tipi di dati, con linee da tipo a tipo per mostrarne le relazioni

Fig. 10: Questa visualizzazione non presenta alcunché su cui agire, nonostante l'enorme quantità di dati.

Dal momento che una singola storia non è possibile in questa situazione, un approccio migliore è permettere agli utenti di scoprire la propria storia. Il vostro lavoro è di facilitare ciò mediante l'interaction design della visualizzazione.

Il design browser-based nella Fig. 11 (potete esplorarlo qui) visualizza anche le relazioni dei code package, (in questo caso, di JavaScript), ma dà agli utenti quello di cui hanno bisogno per esplorare i dati in maniera significativa.

Una descrizione 3D delle relazioni tra i dati generata dal computer

Fig. 11: Usate interazioni ben progettate per aiutare gli utenti a lavorare con dei dataset grandi e con narrazioni multiple.

Di nuovo, a prima vista la visualizzazione sembra confusa e incoerente, ma osservate meglio. Gli utenti possono investigare ogni singolo package di codice, incluse le sue relazioni personali (elencate in basso a sinistra). Una comoda barra di ricerca è inoltre stata incorporata nell'angolo in alto a sinistra.

Quello che rende più significativa questa particolare visualizzazione è che l'utente può esplorarla in uno spazio 3D tramite la tastiera e il mouse. Sfruttare questa capacità unicamente digitale nel browser permette agli utenti di cominciare a scoprire la loro storia nell'enorme swarm di dati, “spostandosi” verso aree nella visualizzazione che trovano più rilevanti per i loro interessi o bisogni. (Fig. 12)

Vista dettagliata di specifici nodi di dati in una visualizzazione 3D generata dal computer di relazioni tra i dati

Fig. 12: “Spostarsi” intuitivamente tra i dati permette agli utenti di trovare significati che sono personalmente rilevanti per loro

Una volta che l'utente trova un package o gruppi di package che è interessato ad esplorare, può cliccare su uno per una visualizzazione specifica e focalizzata del package isolato, incluse le sue relazioni con altri package. Un'analisi dettagliata completa di queste relazioni è pubblicata sulla sinistra dello schermo, inclusi i nodi visuali collegati direttamente alla pagina Github per quel code package. (Fig. 13)

Primo piano isolato di uno specifico data note e l'informazione ad esso associata in una visualizzazione 3D generata a computer delle relazioni tra i dati

Fig. 13: Visualizzazione isolata di un package specifico.

Questa visualizzazione, come quella prima di questa, usa l'idea di una rete per mostrare l'immensità dei dati, ma usa anche delle interazioni intuitive e permette all'utente di esplorare per estrarre dei significati personalmente rilevanti. Usa i moderni vantaggi offerti dal web per gestire i problemi moderni dei grandi data set, in maniera molto simile a quello che fa la seguente visualizzazione tratta da OpenCorporates. (Fig. 14)

Visualizzazione computer-generated di silhouette di paesi ridimensionate a seconda dei dati forniti e illustrante le linee di relazione da paese a paese e da città a città

Fig. 14: Cercate dei modi per “tradurre” i dati in concetti semplici e spiegazioni semplici.

Questo design permette agli utenti di puntare su dati per loro interessanti, scegliendo dove andare e quali breadcrumb offrono un insight significativo.

Se un dataset ha bisogno di essere visualizzato completamente ma ha delle storie più piccole al suo interno, potrebbe essere utile:

  • mostrare tutti i dati ma dare agli utenti l'abilità di creare dei chunk o dei segmenti che desiderano esplorare;
  • sfruttare i vantaggi dell'essere digitale. Per esempio, esplorare in che modo i device di input (e.g., tastiera e mouse) possono facilitare il modo in cui gli utenti interagiscono coi dati;
  • usare metafore visuali che supportano associazioni di relazioni estensive ed intricate, come un albero o una rete.

Visualizzazione con significato

I dati sono potenti nelle mani giuste e qualcosa che siamo in grado di presentare nei nostri siti web. Ma aggiungete parole come “big data” o “data visualization” e "cerchiamo di prevedere noi stessi" invece di padroneggiarli come parte del nostro workflow. Il web in realtà è un gran posto per la data visualization.

Sfruttando i benefici degli ambienti e dei tool “digitali”, possiamo aiutare gli utenti a ottenere quello di cui hanno bisogno da grandi, complicati dataset. Cercano insight, informazioni significative presentate in maniera semplice, storie che risuonano: storie di dati a cui sono interessati. Possiamo aiutarli a trovare quelle storie mescolando qualche nuova tecnica da parte nostra, come la sotto-selezione dei dati, l'uso di piccoli multipli per mostrare le relazioni tra i data point o addirittura permettere un focus user-driven sull'intero dataset.

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Byron Houwens

Byron Houwens è un designer, un developer, uno scrittore e uno speaker che si gode il sole di Cape Town, Sud Africa. Generalmente, o cerca di fare il figo in cucina, o ritwitta cose su @BHouwens o pensa a relazioni future tra data science e design.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA