L'occhio della mente: uno sguardo alla psicologia della visualizzazione dei dati

La visualizzazione dei dati è un ottimo modo per raccontare una storia sui dati. Ma qual è il modo migliore per farlo? Una comprensione della percezione e della cognizione umana può aiutare i designer a farlo in modo efficace.

Le persone hanno utilizzato immagini per aiutare a raccontare storie e illustrare le risposte a domande essenziali per migliaia di anni. Il primo esempio di visualizzazione dei dati è probabilmente una mappa di circa 27.000 anni fa e per molto tempo è stato raro vedere visualizzazioni dei dati per qualcosa di diverso dalla geografia.

Il nostro cervello è costruito in modo univoco per riconoscere schemi e connessioni? Oggi viviamo in un'età d'oro della visualizzazione dei dati. Comunicare efficacemente i dati può rivelarsi impegnativo e, sebbene i grafici possano aiutarci a comprendere dati complessi e persino a vederli da una nuova prospettiva, quando si tratta di trasmettere correttamente un messaggio a un pubblico o di prendere decisioni aziendali basate sui dati, la visualizzazione può essere un modo fondamentale per realizzarlo. Ma cosa c'è dietro la potenza della visualizzazione dei dati?

Contesto storico della progettazione della visualizzazione dei dati

La visualizzazione dei dati ha una lunga storia e ha fatto progressi significativi tra il XVII e il XIX secolo. L'idea di presentare graficamente i dati quantitativi è nata nel 18° secolo, quando René Descartes ha inventato un sistema di coordinate bidimensionale per visualizzare i valori per le operazioni matematiche. Quel sistema è stato migliorato quando William Playfair ha aperto la strada ai moduli grafici come li conosciamo oggi. È accreditato di aver inventato i grafici a linee e a barre, e successivamente il grafico a torta e il grafico circolare.

Nel corso degli anni, l'utilizzo di grafici quantitativi è diventato più diffuso. La loro metodologia ed efficacia sono notevolmente aumentate nella seconda metà del 20° secolo con la pubblicazione del libro di Jacques Bertin La semiologia della grafica . Il suo lavoro è stato fondamentale perché ha scoperto che per presentare le informazioni in modo intuitivo, chiaro ed efficiente, la percezione visiva operava secondo regole e schemi che potevano essere seguiti.

Bertin ha studiato l'efficacia di diversi tipi di grafici. Nell'esempio seguente, i grafici a torta mostrano la produzione di vari tipi di carne in diversi paesi. Bertin li considerava "inutili". Nel mezzo, utilizzando la visualizzazione a matrice, i modelli di alto livello diventano più immediatamente visibili. E a destra, poiché i paesi e la produzione di carne non hanno un ordine naturale, si possono produrre molte altre matrici, compreso l'esempio mostrato, che ha fornito molta più chiarezza. In questo scenario, il riordino delle categorie ha migliorato significativamente la presentazione dei dati.

Cosa c'entra la psicologia con la visualizzazione dei dati?

La percezione visiva è la capacità di vedere, interpretare e organizzare il nostro ambiente. La visualizzazione dei dati può essere estremamente efficace in quanto sfrutta le capacità naturali del cervello umano. È veloce ed efficiente.

John Tukey, un influente matematico e statistico teorico americano, ha affermato: "Il più grande valore di un'immagine è quando ci costringe a notare ciò che non ci saremmo mai aspettati di vedere".

La cognizione, che è gestita dalla corteccia cerebrale, è molto più lenta e richiede uno sforzo maggiore per elaborare le informazioni. La presentazione dei dati accelera visivamente la nostra percezione e aiuta a ridurre il carico cognitivo.

Nell'esempio seguente, la tabella ci consente di vedere numeri precisi. Tuttavia, potremmo trovare rapidamente le cifre più alte e più basse per le risorse idriche rinnovabili? Non facilmente, ma gli stessi dati diventano molto più chiari e comprensibili se presentati visivamente nel grafico a barre a destra.

L'influenza dominante della percezione visiva rispetto ad altri sensi è adeguatamente illustrata in un esempio dal fisico danese Tor Norretranders. Ha dimostrato il potere delle immagini convertendo la capacità dei sensi umani in velocità di elaborazione standard dei computer. La vista esce in cima in quanto ha la stessa larghezza di banda di una rete di computer. La sua capacità del canale è 10 volte superiore al tatto e 100 volte più forte dell'udito o dell'olfatto. Il quadratino nell'angolo in basso a destra è il punto in cui siamo cognitivamente consapevoli delle esperienze sensoriali.

Elaborazione preattenta

Non solo l'elaborazione visiva domina gli input sensoriali, ma la quantità di dati e la velocità con cui elaboriamo sono molto più elevate di quanto siamo consapevoli. Questo fenomeno è noto come "elaborazione pre-attenta". È subconscio e veloce. Occorrono 200-500 millisecondi perché l'occhio trasmetta e il cervello elabori la proprietà pre-attentiva dello stimolo visivo (è molto più veloce di come il cervello può elaborare i dati del foglio di calcolo).

“L'elaborazione pre-attentiva è l'accumulo inconscio di informazioni dall'ambiente. Tutte le informazioni disponibili vengono elaborate con pre-attenzione. Quindi, il cervello filtra ed elabora ciò che è importante. Le informazioni che hanno la più alta rilevanza (uno stimolo che si distingue di più) o la rilevanza per ciò a cui una persona sta pensando vengono selezionate per un'analisi più completa e successiva mediante un'elaborazione cosciente (attenta)". – da Wikipedia

L'elaborazione pre-attenta è un vantaggio per i progettisti perché la sua abile distribuzione consente alle persone di comprendere ciò che viene presentato più rapidamente. Un designer altamente competente può aiutare chi visualizza le visualizzazioni dei dati ad assorbire più informazioni più velocemente e con meno sforzo, poiché alleggerisce l'elaborazione consapevole e riduce il carico di memoria.

Vantaggi della lavorazione preattenta:

• Veloce/Automatico
• Emotivo
• Impulsi/Drive
• Abitudini
• Credenze
• Stereotipato
• Subconscio

Molte variabili visive innescano una risposta pre-attenta. Imparando quali elementi visivi vengono enfatizzati automaticamente e quindi incorporandoli nei dashboard, possiamo progettare visualizzazioni che raccontano la storia dei dati in modo efficace.

Variabili visive

Introdotte da Jacques Bertin, le variabili visive sono le differenze tra gli elementi percepiti dall'occhio umano. Studiate a lungo, queste variabili forniscono i mezzi con cui capire come il cervello umano elabora e naviga le informazioni visive. L'insieme originale di "variabili retiniche" consisteva in sette variabili: posizione, dimensione, forma, valore, tonalità del colore, orientamenti e consistenza.

I grafici seguenti mostrano esempi di variabili visive utili per mostrare differenze qualitative o quantitative, secondo Bertin. Dimostrano anche un modo per presentare gli attributi attraverso punti, linee o aree.

Uno studio del 1984 di William Cleveland e Robert McGill ha classificato gli aspetti più comuni che due forme possono avere in base alla facilità con cui il cervello umano rileva le differenze tra di loro. Hanno ordinato le seguenti caratteristiche visive dalla più alla meno accurata:

Posizione lungo una scala comune

Poiché condividiamo un sistema di riferimento spaziale comune, la posizione è la caratteristica più semplice da riconoscere e valutare rispetto agli elementi nello spazio.

Esempi: grafici a barre, grafici a dispersione

Posizioni lungo scale identiche non allineate

È facile confrontare scale separate ripetute con lo stesso asse anche se non sono allineate. I diagrammi a pannello, o "piccoli multipli", ne sono un ottimo esempio. Il risultato è una griglia di grafici che seguono tutti lo stesso formato visivo ma mostrano set di dati diversi. Rispetto a un singolo grafico più grande, multipli piccoli possono aiutare con l'overplotting, quando i dati possono diventare oscurati o occlusi a causa della presenza di troppi elementi tracciati.

Esempio: multipli piccoli (aka grafici Rellis, Lattice, Grid e Panel)

Lunghezza

La lunghezza può rappresentare efficacemente informazioni quantitative perché la lunghezza di un elemento può scalare al valore dei dati che rappresentano. Il cervello umano riconosce facilmente le proporzioni e valuta la lunghezza, anche se gli oggetti non sono allineati.

Esempio: grafici a barre

Direzione

La direzione è facilmente riconoscibile dall'occhio umano. Può utilizzare grafici a linee e trend, ad esempio, per presentare dati che cambiano nel tempo.

Esempio: grafici di tendenza

Angolo

Gli angoli aiutano a fare confronti fornendo un senso delle proporzioni. Gli studi dimostrano che gli angoli sono più difficili da valutare rispetto alla lunghezza o alla posizione. Tuttavia, i grafici a torta sono efficienti quanto i grafici a barre in pila, a meno che non vi siano più di tre parti nell'intero.

Esempio: grafici a torta

La zona

La grandezza relativa delle aree è più difficile da confrontare con la lunghezza delle linee. La seconda direzione richiede uno sforzo maggiore per l'elaborazione e l'interpretazione.

Esempio: grafici a bolle

Volume

Il volume si riferisce all'uso di oggetti 3D in spazi bidimensionali, che li rendono notevolmente più difficili da valutare. Tuttavia, gli studi suggeriscono che gli oggetti 3D possono essere percepiti in modo più preciso quando si confrontano due forme della stessa dimensionalità.

Esempio: grafici a barre 3D

Saturazione del colore

La saturazione del colore si riferisce all'intensità di una singola tonalità. Intensità crescenti di colore possono essere percepite intuitivamente come numeri di valore crescente. Tuttavia, è difficile valutare con precisione i risultati.

Esempio: mappe di calore

Comprendere la classifica delle variabili visive è essenziale per creare visualizzazioni di dati accattivanti. Tuttavia, ciò non significa che i progettisti debbano limitarsi a grafici a barre e grafici a dispersione. Cleveland e McGill osservano: "L'ordinamento non si traduce in una prescrizione precisa per la visualizzazione dei dati, ma piuttosto è un quadro all'interno del quale lavorare".

Colore

La saturazione del colore e l'ombreggiatura sono le meno accurate quando si tratta della percezione di modelli e comportamenti, secondo William Cleveland. Tuttavia, il colore può essere un potente strumento per i progettisti di visualizzazione dei dati per trasmettere significato e chiarezza durante la visualizzazione dei dati. È fondamentale, tuttavia, che i designer capiscano come funziona il colore e cosa fa e cosa non fa bene.

Colore nel contesto

La nostra percezione del colore dipende dal contesto, dal colore e dal suo contrasto con gli oggetti circostanti.

Un ottimo esempio è un esperimento di Akiyoshi Kitaoka, professore presso il Dipartimento di Psicologia dell'Università Ritsumeikan in Giappone, in cui fa scorrere un pezzo di carta grigia su un gradiente da nero a bianco. La carta sembra cambiare colore mentre si sposta da un lato all'altro. In ogni momento, percepiamo il colore in modo diverso mentre diverse sfumature di grigio lo circondano. Guarda il video qui sotto:

Nel suo articolo Regole pratiche per l'uso del colore nei grafici , Stephen Few trae alcune regole pratiche da queste osservazioni:

1. Se vuoi che oggetti diversi dello stesso colore in una tabella o in un grafico abbiano lo stesso aspetto, assicurati che lo sfondo, il colore che li circonda, sia coerente.
2. Se vuoi che gli oggetti in una tabella o in un grafico siano facilmente visibili, usa un colore di sfondo che contrasti sufficientemente con l'oggetto.

Il colore racconta una storia

Il colore non è solo decorazione. È meglio se usato in modo significativo e strategico. Il colore dovrebbe aiutare a raccontare una storia e comunicare l'obiettivo del set di dati presentato. Come si suol dire, "less is more".

I colori contrastanti dovrebbero essere applicati solo alle differenze di significato nei dati per ridurre il carico cognitivo. Il colore può anche enfatizzare gli elementi principali della visualizzazione.

L'assenza di colore non rende un buon grafico meno efficace. Il grigio è un buon punto di partenza nella fase di ideazione e, una volta identificato un punto focale, l'applicazione del colore enfatizzerà quelle parti.

Definisci le tavolozze dei colori

L'insieme di colori applicato da un designer di visualizzazione dei dati può cambiare completamente il significato dei dati. Molti strumenti possono aiutare a selezionare una tavolozza di colori significativa, a seconda della natura dei dati. Eccone un paio:

• ColorBrewer. Le tavolozze sono divise in tre tipi:
  • Categoriale (usato per separare gli articoli in gruppi distinti)
  • Sequenziale (usato per codificare differenze quantitative)
  • Divergente
• Viz tavolozza. Viz Palette si occupa dell'accessibilità, della progettazione per il daltonismo e delle sfumature percettivamente uniformemente distanziate. Include un "rapporto colore" che identifica le sfumature che potrebbero apparire uguali in varie situazioni.

Applicazione dei principi della Gestalt alla visualizzazione dei dati

I principi gestaltici della percezione possono aiutare a chiarire come il cervello organizza gli elementi sulla base di caratteristiche comuni mentre cerca di dare un senso alle informazioni visive. La teoria della Gestalt si basa sull'idea che il cervello umano tenterà di semplificare e organizzare immagini o progetti complessi costituiti da molti elementi disponendo inconsciamente le parti in un sistema organizzato che crea un tutto, piuttosto che solo una serie di elementi disparati.

Somiglianza

Il principio di somiglianza dice che le nostre menti raggrupperanno automaticamente gli elementi con proprietà visive condivise come "simili". Colori simili, forme simili, dimensioni simili e orientamenti simili sono percepiti come un gruppo. Questo principio è illustrato nei grafici seguenti.

A differenza del grafico a sinistra con le barre di colori diversi, sono lo stesso blu a destra. Dato che esiste una sola variabile (costi/ricavi), questo ha senso. Avere le barre dello stesso colore facilita la comprensione dei dati e rimuove lo sforzo cognitivo aggiuntivo causato dall'uso di colori diversi a sinistra.

Prossimità

La vicinanza è più efficace della somiglianza perché l'occhio umano percepisce gli elementi da mettere in relazione in base a quanto sono vicini l'uno all'altro.

Nel grafico sottostante, l'obiettivo è confrontare le vendite per paese in tre trimestri. Sebbene sia facile confrontare le vendite di ciascun paese entro un trimestre a causa della loro vicinanza, sarebbe difficile analizzare le vendite per paese.

Il grafico rivisto lo comunica più chiaramente. In questo caso, alle informazioni viene data la priorità per concentrarsi sull'obiettivo di visualizzazione, poiché mantiene i punti dati principali più vicini tra loro.

Allegato

Il principio della regione comune, introdotto da Palmer nel 1992, dimostra come la chiusura di elementi con un confine ben definito tenda a essere percepita come un gruppo se condividono un'area comune.

Nell'esempio seguente, le tre barre all'interno dell'area ombreggiata in grigio sembrano far parte di un gruppo. Questa tecnica aiuta gli spettatori a concentrarsi su un gruppo di oggetti in un grafico.

Conclusione

La comprensione degli elementi chiave della percezione umana e del processo cognitivo è una parte essenziale della progettazione di visualizzazioni di dati eccellenti. Quando lavorano su prodotti con esigenze di visualizzazione dei dati, che si tratti di un dashboard B2B o di un'app finanziaria, i designer devono essere consapevoli del processo di percezione visiva del cervello umano e dei principi fondamentali di progettazione della visualizzazione dei dati.

Una familiarità con i noti principi della Gestalt della percezione visiva può essere un grande vantaggio per i designer e aiutarli a capire come il cervello trasforma immagini complesse in schemi. Essere consapevoli di questi principi è prezioso nel processo verso il raggiungimento di una gerarchia visiva più esplicita durante l'elaborazione di visualizzazioni di dati e la progettazione di grafici più efficaci.

Inoltre, essere consapevoli dell'elaborazione preattenta e delle variabili visive, nonché della corretta applicazione del colore, consentirà ai designer di creare visualizzazioni di dati più efficaci.

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• Una panoramica completa dei migliori strumenti di visualizzazione dei dati
• Visualizzazione dei dati: buone pratiche e fondamenti
• Principali esempi di visualizzazione dei dati e design di dashboard
• Progettazione dashboard: considerazioni e best practice
• COVID-19: l'ultimo caso d'uso del Design Thinking