Raccontare una storia<\/h2>\n
La chiave per progettare visualizzazioni \u00e8 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<\/a> disponibile pubblicamente, il quale contiene informazioni crowd-sourced sui prodotti culinari da tutto il mondo.<\/p>\n 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<\/strong>) perch\u00e9 ero personalmente preoccupato dall’argomento. \u00c8 saltato fuori che questo argomento preoccupava anche altri ed \u00e8 diventato il progetto pi\u00f9 popolare<\/a> per quel dataset su Kaggle.<\/p>\n Fig. 1: Consumo nazionale medio di zucchero<\/p>\n<\/div>\n 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\u00e9 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’\u00e8 pi\u00f9 personale e importante della propria salute?<\/p>\n 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<\/a>) pu\u00f2 essere grandioso, ma \u00e8 importante presentare una storia che sia quanto pi\u00f9 obiettiva possibile e prendere decisioni etiche su quali parti dei dati vogliamo usare mentre raccontiamo la storia.<\/p>\n Ma cos’\u00e8 esattamente una storia nel contesto della data visualization? Non possiamo cominciare con \u201cc’era una volta\u201d, quindi dobbiamo avvicinarci all’idea in maniera diversa.<\/p>\n Whitney Quesenbery e Kevin Brooks forniscono queste definizioni di storia nel loro libro Storytelling for User Experience<\/cite><\/a>:<\/p>\n E io aggiungerei questo all’elenco:<\/p>\n Affrontare alcuni o tutti questi attributi \u00e8 una sfida in particolare per i grandi dataset per via della quantit\u00e0 di informazioni che pu\u00f2 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\u00f2 avere un’influenza positiva sulle decisioni degli utenti.<\/p>\n Suscita anche altre domande che gli utenti stessi potrebbero porre.<\/p>\n Per esempio, perch\u00e9 alcuni paesi consumano quantit\u00e0 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\u00f2 essere un trampolino per ulteriori scoperte, facendo aumentare la conoscenza dell’utente ed eventualmente influenzando le loro scelte quotidiane da quel momento in poi.<\/p>\n Se state cercando di inserire del significato in una grande visualizzazione attraverso la storia di una sotto-sezione di un dataset, \u00e8 importante:<\/p>\n 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.<\/p>\n<\/div>\n Sebbene estesi, alcuni grandi dataset ruotano gi\u00e0 attorno a una singola storia. Un modo interessante per gestire questa particolare questione \u00e8 di mostrare simultaneamente diversi aspetti di un dataset del genere, permettendo all’utente di scoprire quel significato. Questa tecnica \u00e8 chiamata \u201csmall multiples\u201d. (Fig. 2<\/strong>)<\/p>\n Fig. 2: Visualizzazione del memory stall dal progetto Rivet a Stanford.<\/p>\n<\/div>\n Per esempio, il cluster di visualizzazioni qui sopra ha a che fare con la \u201cstoria\u201d dei problemi di memory stall in un computer. Quello che trovo interessante del cluster \u00e8 che l’heading di ogni visualizzazione comincia con una qualche variazione di \u201cmemory stall time\u201d. Nonostante siano visualizzazioni separate, sono collegate dalla singola storia che raccontano e la presentano da prospettive simultanee ma distinte.<\/p>\n \u00c8 possibile che le prospettive appaiano completamente diverse le une dalle altre se visualizzano diversi tipi<\/em> 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<\/a> illustra in che modo questo potrebbe funzionare (Fig. 3<\/strong>). Permette all’utente di stabilire le proprie narrazioni attraverso la scelta di topic quali il linguaggio o il posto.<\/p>\n Fig. 3: Avendo la libert\u00e0 di esplorare, gli utenti creano spontaneamente una narrazione personale.<\/p>\n Inquadrare le visualizzazioni attorno a un argomento personale (come il linguaggio nativo di qualcuno) influenza in maniera appropriata tutti gli \u201dsmall multiples\u201d: il reinquadramento serve per personalizzare i dati. (Fig. 4<\/strong>)<\/p>\n Fig. 4: Confronto dei dati di genere ed et\u00e0 per gli Australiani e gli Australiani di lingua inglese.<\/p>\n Fig. 5: Analisi dettagliata del Paese di nascita per i cittadini Australiani.<\/p>\n Fig. 6: Scaglioni di reddito per genere per gli Australiani e per gli Australiani di lingua inglese.<\/p>\n Pu\u00f2 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<\/a> mostra tutti i progetti Kickstarter nella dimensione dello spazio, organizzati qui per categoria e citt\u00e0 Americana. (Fig. 7<\/strong>)<\/p>\n Fig. 7: Data visualization ben progettate possono convogliare pi\u00f9 concetti e informazioni in parallelo.<\/p>\n<\/div>\n La visualizzazione \u00e8 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\u00e0 americane o le dimensioni del progetto. (Si noti la prevalenza dei progetti musicali a Nashville e dei progetti di game a Austin e Seattle).<\/p>\n The Lens fa qualcosa di simile nelle sue visualizzazioni del genoma umano (Fig. 8<\/strong>) permettendo agli utenti di cambiare visualizzazioni<\/a> mediante vari filtri.<\/p>\n Fig. 8: I dati possono essere filtrati per mostrare viste diverse del genoma umano.<\/p>\n Questo pu\u00f2 essere ancora pi\u00f9 efficace per gli \u201csmall multiples\u201d mostrati nel tempo. La Fig. 9<\/strong> 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.<\/p>\n Fig. 9: Interagendo con un \u201csmall multiple\u201d si influenzano anche gli altri, mostrando delle relazioni in punti diversi del tempo.<\/p>\n Se il dataset \u00e8 gi\u00e0 centrato attorno a qualche tipo di storia onnicomprensiva, pu\u00f2 essere una buona idea:<\/p>\n 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?<\/p>\n Sebbene ad alcuni dataset manchi un focus specifico (per esempio, \u201cmemory stall time\u201d, \u201cfund performance\u201d o \u201call-Kickstarter-projects-ever\u201d), 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?<\/p>\n Mostrare semplicemente i dati cos\u00ec come sono, anche in una visualizzazione che sembra andar bene, raramente funziona bene. Nella Fig. 10<\/strong>, vediamo le relazioni tra i code package di Python, ma in un modo che non \u00e8 altro che confuso e incoerente quanto lo sono i dati nel loro stato naturale. La mancanza di focus e narrativa si nota. (Detto ci\u00f2, il dataset \u00e8 estremamente largo quindi una singola narrazione non \u00e8 in realt\u00e0 possibile).<\/p>\n Fig. 10: Questa visualizzazione non presenta alcunch\u00e9 su cui agire, nonostante l’enorme quantit\u00e0 di dati.<\/p>\n<\/div>\n Dal momento che una singola storia non \u00e8 possibile in questa situazione, un approccio migliore \u00e8 permettere agli utenti di scoprire la propria<\/em> storia. Il vostro lavoro \u00e8 di facilitare ci\u00f2 mediante l’interaction design della visualizzazione.<\/p>\n Il design browser-based nella Fig. 11<\/strong> (potete esplorarlo qui<\/a>) visualizza anche le relazioni dei code package, (in questo caso, di JavaScript), ma d\u00e0 agli utenti quello di cui hanno bisogno per esplorare i dati in maniera significativa.<\/p>\n Fig. 11: Usate interazioni ben progettate per aiutare gli utenti a lavorare con dei dataset grandi e con narrazioni multiple.<\/p>\n 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 \u00e8 inoltre stata incorporata nell’angolo in alto a sinistra.<\/p>\n Quello che rende pi\u00f9 significativa questa particolare visualizzazione \u00e8 che l’utente pu\u00f2 esplorarla in uno spazio 3D tramite la tastiera e il mouse. Sfruttare questa capacit\u00e0 unicamente digitale nel browser permette agli utenti di cominciare a scoprire la loro storia nell’enorme swarm di dati, \u201cspostandosi\u201d verso aree nella visualizzazione che trovano pi\u00f9 rilevanti per i loro interessi o bisogni. (Fig. 12<\/strong>)<\/p>\n Fig. 12: \u201cSpostarsi\u201d intuitivamente tra i dati permette agli utenti di trovare significati che sono personalmente rilevanti per loro<\/p>\n Una volta che l’utente trova un package o gruppi di package che \u00e8 interessato ad esplorare, pu\u00f2 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 \u00e8 pubblicata sulla sinistra dello schermo, inclusi i nodi visuali collegati direttamente alla pagina Github per quel code package. (Fig. 13<\/strong>)<\/p>\n Fig. 13: Visualizzazione isolata di un package specifico.<\/p>\n Questa visualizzazione, come quella prima di questa, usa l’idea di una rete per mostrare l’immensit\u00e0 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<\/a>. (Fig. 14<\/strong>)<\/p>\n Fig. 14: Cercate dei modi per \u201ctradurre\u201d i dati in concetti semplici e spiegazioni semplici.<\/p>\n Questo design permette agli utenti di puntare su dati per loro interessanti, scegliendo dove andare e quali breadcrumb offrono un insight significativo.<\/p>\n Se un dataset ha bisogno di essere visualizzato completamente ma ha delle storie pi\u00f9 piccole al suo interno, potrebbe essere utile:<\/p>\n I dati sono potenti nelle mani giuste e qualcosa che siamo in grado di presentare nei nostri siti web. Ma aggiungete parole come \u201cbig data\u201d o \u201cdata visualization\u201d e “cerchiamo di prevedere noi stessi” invece di padroneggiarli come parte del nostro workflow. Il web in realt\u00e0 \u00e8 un gran posto per la data visualization.<\/p>\n Sfruttando i benefici degli ambienti e dei tool \u201cdigitali\u201d, 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.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Le buone data visualization danno un nuovo significato all’espressione \u201cUX molto buona\u201d. Trasmettono qualcosa di reale, accessibile e umano. E i nostri design possono aiutare gli utenti a personalizzare quella esperienza. Il web \u00e8 un medium naturale per i dati veramente interattivi, come ci spiega l’autore Byron Houwens.<\/p>\n","protected":false},"author":818,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[279,175,257,9],"tags":[],"coauthors":[502],"class_list":["post-715","article","type-article","status-publish","hentry","category-interaction-design","category-numero-197-29-marzo-2017","category-stato-del-web","category-usabilita"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=715"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=715"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Grafico](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/sugar_chart.jpg\")
<\/p>\n\n
\n
\n
Ma noi abbiamo gi\u00e0 una storia<\/h2>\n
![\"Vari](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/mview.gif\")
<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/select_lang.jpg\")
<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/australia_viz_1.jpg\")
<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/australia_viz_3.jpg\")
<\/p>\n![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/australia_viz_2.jpg\")
<\/p>\nStorytelling attraverso l’interazione<\/h2>\n
![\"Grafici](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/kickstarter2.gif\")
<\/p>\n![\"Barre](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/genome2.gif\")
<\/p>\n![\"Uno](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/finance_interactive2.gif\")
<\/p>\n\n
Ci sono troppe storie<\/h2>\n
![\"Un](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/noisy-viz.jpg\")
<\/p>\n![\"Una](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/npm_overall.jpg\")
<\/p>\n![\"Vista](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/npm_focus.jpg\")
<\/p>\n![\"Primo](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/npm_packages.jpg\")
<\/p>\n![\"Visualizzazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/03\/open_corporates_1.jpg\")
<\/p>\n\n
Visualizzazione con significato<\/h2>\n