Ochiul minții – O privire asupra psihologiei vizualizării datelor

Vizualizarea datelor este o modalitate excelentă de a spune o poveste despre date. Dar care este cel mai bun mod de a o face? O înțelegere a percepției umane și a cunoașterii poate ajuta designerii să o facă în mod eficient.

Oamenii au folosit imaginile pentru a spune povești și pentru a ilustra răspunsuri la întrebări esențiale de mii de ani. Cel mai vechi exemplu de vizualizare a datelor este probabil o hartă de acum aproximativ 27.000 de ani și, pentru o lungă perioadă de timp, a fost rar să vezi vizualizări de date pentru altceva decât geografie.

Este creierul nostru construit în mod unic pentru a recunoaște tipare și conexiuni? Astăzi, trăim într-o epocă de aur a vizualizării datelor. Comunicarea eficientă a datelor se poate dovedi o provocare și, deși graficele ne pot ajuta să înțelegem datele complexe și chiar să le vedem dintr-o nouă perspectivă, atunci când vine vorba de transmiterea corectă a unui mesaj către un public sau de luarea deciziilor de afaceri bazate pe date, vizualizarea poate fi o modalitate esențială. pentru a o realiza. Dar ce se află în spatele puterii vizualizării datelor?

Contextul istoric al proiectării vizualizării datelor

Vizualizarea datelor are o istorie lungă și a făcut progrese semnificative între secolele al XVII-lea și al XIX-lea. Ideea prezentării grafice a datelor cantitative a apărut în secolul al XVIII-lea, când Rene Descartes a inventat un sistem de coordonate bidimensional pentru a afișa valorile pentru operațiile matematice. Acest sistem a fost îmbunătățit atunci când William Playfair a inițiat formele grafice așa cum le cunoaștem astăzi. El este creditat că a inventat diagramele cu linii și bare, iar mai târziu diagrama circulară și graficul circular.

De-a lungul anilor, utilizarea graficelor cantitative a devenit mai răspândită. Metodologia și eficacitatea lor au crescut semnificativ în a doua jumătate a secolului al XX-lea odată cu publicarea cărții lui Jacques Bertin, Semiologia graficii . Munca sa a fost crucială deoarece a descoperit că, pentru a prezenta informațiile în mod intuitiv, clar și eficient, percepția vizuală a funcționat conform regulilor și tiparelor care puteau fi urmate.

Bertin a studiat eficacitatea diferitelor tipuri de diagrame. În exemplul de mai jos, diagramele circulare arată producția de diferite tipuri de carne în mai multe țări. Bertin le-a considerat „inutile”. La mijloc — prin folosirea vizualizării matriceale, modelele de nivel înalt devin mai vizibile imediat. Și în dreapta, întrucât țările și producția de carne nu au o ordine naturală, pot fi produse multe alte matrice – inclusiv exemplul prezentat – care au oferit mult mai multă claritate. În acest scenariu, reordonarea categoriilor a îmbunătățit semnificativ prezentarea datelor.

Ce legătură are psihologia cu vizualizarea datelor?

Percepția vizuală este capacitatea de a vedea, interpreta și organiza mediul nostru. Vizualizarea datelor poate fi extrem de eficientă, deoarece profită de abilitățile naturale ale creierului uman. Este rapid și eficient.

John Tukey, un influent matematician și statistician teoretic american, a spus: „Cea mai mare valoare a unei imagini este atunci când ne obligă să observăm ceea ce nu ne așteptam niciodată să vedem”.

Cogniția, care este gestionată de cortexul cerebral, este mult mai lentă și necesită mai mult efort pentru procesarea informațiilor. Prezentarea vizuală a datelor ne accelerează percepția și ajută la reducerea încărcăturii cognitive.

În exemplul de mai jos, tabelul ne permite să vedem numere precise. Cu toate acestea, am putea ajunge rapid cu cele mai mari și mai mici cifre pentru resursele regenerabile de apă? Nu este ușor, dar aceleași date devin mult mai clare și mai ușor de înțeles atunci când sunt prezentate vizual în diagrama cu bare din dreapta.

Influența dominantă a percepției vizuale în comparație cu alte simțuri este ilustrată în mod adecvat într-un exemplu de fizicianul danez Tor Norretranders. El a demonstrat puterea imaginilor prin conversia capacității simțurilor umane în debite standard ale computerului. Vederea iese în top, deoarece are aceeași lățime de bandă ca o rețea de computere. Capacitatea canalului său este de 10 ori mai mare decât atingerea și de 100 de ori mai puternică decât auzul sau mirosul. Micul pătrat din colțul din dreapta jos este locul în care suntem conștienți cognitiv de experiențele senzoriale.

Prelucrare pre-atentă

Nu numai că procesarea vizuală domină intrările senzoriale, cantitatea de date și viteza cu care procesăm sunt mult mai mari decât suntem conștienți. Acest fenomen este cunoscut sub numele de „procesare pre-atentă”. Este subconștient și rapid. Este nevoie de 200-500 de milisecunde pentru ca ochiul să transmită, iar creierul să proceseze proprietatea pre-atentă a stimulului vizual (aceasta este mult mai rapid decât modul în care creierul poate procesa datele din foile de calcul).

„Procesarea pre-atentă este acumularea subconștientă a informațiilor din mediu. Toate informațiile disponibile sunt procesate în prealabil cu atenție. Apoi, creierul filtrează și procesează ceea ce este important. Informațiile care au cea mai mare importanță (un stimul care iese în evidență cel mai mult) sau relevanță pentru ceea ce se gândește o persoană sunt selectate pentru o analiză ulterioară și mai completă prin procesare conștientă (atentă). – de pe Wikipedia

Procesarea pre-atentă este un avantaj pentru designeri, deoarece implementarea sa pricepută permite oamenilor să înțeleagă mai rapid ceea ce este prezentat. Un designer foarte competent poate ajuta pe cineva care vizualizează vizualizările de date să absoarbă mai multe informații mai rapid și cu mai puțin efort, deoarece ușurează procesarea conștientă și scade încărcarea memoriei.

Avantajele prelucrării pre-atente:

• Rapid/Automat
• Emoţional
• Impulsuri/Drive
• Obiceiuri
• Credințe
• Stereotipic
• Subconştient

Multe variabile vizuale declanșează un răspuns pre-atent. Învățând ce elemente vizuale sunt evidențiate automat și apoi încorporându-le în tablouri de bord, putem proiecta vizualizări care spun povestea datelor în mod eficient.

Variabile vizuale

Introduse de Jacques Bertin, variabilele vizuale sunt diferențele dintre elemente așa cum sunt percepute de ochiul uman. Studiate mult timp, aceste variabile oferă mijloacele prin care să înțelegem modul în care creierul uman procesează și navighează informațiile vizuale. Setul original de „variabile retiniene” a constat din șapte variabile: poziție, dimensiune, formă, valoare, nuanță de culoare, orientări și textură.

Diagramele de mai jos prezintă exemple de variabile vizuale utile pentru a arăta diferențele calitative sau cantitative – conform lui Bertin. Ele demonstrează, de asemenea, o modalitate de prezentare a atributelor prin puncte, linii sau zone.

Un studiu din 1984 al lui William Cleveland și Robert McGill a clasat cele mai comune aspecte pe care le pot avea două forme în funcție de cât de ușor creierul uman detectează diferențele dintre ele. Ei au ordonat următoarele caracteristici vizuale de la cel mai la mai puțin precise:

Poziție de-a lungul unei scale comune

Deoarece împărtășim un sistem de referință spațial comun, poziția este cea mai ușor de recunoscut și evaluat în ceea ce privește elementele din spațiu.

Exemple: diagrame cu bare, diagrame de dispersie

Poziții de-a lungul scalelor nealiniate, identice

Este ușor să compari scale separate repetate cu aceeași axă, chiar dacă nu sunt aliniate. Diagramele cu panouri sau „multiplii mici” sunt un exemplu excelent în acest sens. Rezultatul este o grilă de diagrame care urmează toate același format vizual, dar arată seturi de date diferite. În comparație cu o singură diagramă mai mare, multiplii mici pot ajuta la supraplotare, când datele pot deveni ascunse sau ocluse deoarece există prea multe elemente reprezentate.

Exemplu: multipli mici (alias diagrame Rellis, Lattice, Grid și Panel)

Lungime

Lungimea poate reprezenta în mod eficient informații cantitative, deoarece lungimea unui element se poate scala la valoarea datelor pe care o reprezintă. Creierul uman recunoaște cu ușurință proporțiile și evaluează lungimea, chiar dacă obiectele nu sunt aliniate.

Exemplu: diagrame cu bare

Direcţie

Direcția este ușor de recunoscut de ochiul uman. Poate folosi grafice cu linii și tendințe, de exemplu, pentru a prezenta date care se modifică în timp.

Exemplu: diagrame de tendințe

Unghi

Unghiurile ajută la comparații, oferind un simț al proporției. Studiile arată că unghiurile sunt mai greu de evaluat decât lungimea sau poziția. Cu toate acestea, diagramele circulare sunt la fel de eficiente ca diagramele cu bare stivuite, cu excepția cazului în care există mai mult de trei părți în întreg.

Exemplu: diagrame circulare

Zonă

Mărimea relativă a zonelor este mai greu de comparat față de lungimea liniilor. A doua direcție necesită mai mult efort de procesare și interpretare.

Exemplu: diagrame cu bule

Volum

Volumul se referă la utilizarea obiectelor 3D în spații bidimensionale, ceea ce le face semnificativ mai greu de evaluat. Cu toate acestea, studiile sugerează că obiectele 3D pot fi percepute mai precis atunci când se compară două forme de aceeași dimensionalitate.

Exemplu: diagrame cu bare 3D

Saturația culorii

Saturația culorii se referă la intensitatea unei singure nuanțe. Creșterea intensității culorii poate fi percepută intuitiv ca numere de valoare crescândă. Cu toate acestea, este greu de evaluat rezultatele cu precizie.

Exemplu: hărți termice

Înțelegerea clasamentului variabilelor vizuale este esențială pentru a crea vizualizări de date convingătoare. Cu toate acestea, nu înseamnă că designerii trebuie să se limiteze la diagrame cu bare și diagrame de dispersie. Cleveland și McGill notează: „Comandarea nu are ca rezultat o prescripție precisă pentru afișarea datelor, ci mai degrabă este un cadru în care să lucrăm.”

Culoare

Saturația și umbrirea culorilor sunt cele mai puțin precise când vine vorba de percepția modelelor și a comportamentului, potrivit lui William Cleveland. Cu toate acestea, culoarea poate fi un instrument puternic pentru proiectanții de vizualizare a datelor pentru a transmite sens și claritate atunci când afișează datele. Cu toate acestea, este esențial ca designerii să înțeleagă cum funcționează culoarea și ce face și ce nu face bine.

Culoare în context

Percepția noastră asupra culorii depinde de context, culoare și contrastul acesteia cu obiectele din jur.

Un exemplu grozav este un experiment al lui Akiyoshi Kitaoka, profesor la Departamentul de Psihologie de la Universitatea Ritsumeikan din Japonia, în care alunecă o bucată de hârtie gri pe un gradient de la negru la alb. Hârtia pare să își schimbe culoarea pe măsură ce se mișcă dintr-o parte în alta. În fiecare moment, percepem culoarea diferit, deoarece diferite nuanțe de gri o înconjoară. Vezi videoclipul de mai jos:

În articolul său Practical Rules for Using Color in Charts , Stephen Few derivă câteva reguli practice din aceste observații:

1. Dacă doriți ca diferite obiecte de aceeași culoare dintr-un tabel sau un grafic să arate la fel, asigurați-vă că fundalul - culoarea care le înconjoară - este consecvent.
2. Dacă doriți ca obiectele dintr-un tabel sau un grafic să fie ușor de văzut, utilizați o culoare de fundal care contrastează suficient cu obiectul.

Culoarea spune o poveste

Culoarea nu este doar decor. Este cel mai bine atunci când este folosit în mod semnificativ și strategic. Culoarea ar trebui să ajute să spună o poveste și să comunice obiectivul setului de date prezentat. După cum se spune, „mai puțin înseamnă mai mult”.

Culorile contrastante ar trebui aplicate numai la diferențele de semnificații ale datelor pentru a reduce sarcina cognitivă. Culoarea poate sublinia și elementele principale ale vizualizării.

Absența culorii nu face ca o diagramă bună să fie mai puțin eficientă. Griul este un bun punct de plecare în etapa de ideare, iar odată ce un punct de focalizare este identificat, aplicarea culorii va evidenția acele părți.

Definiți paletele de culori

Setul de culori pe care le aplică un designer de vizualizare a datelor poate schimba complet sensul datelor. Multe instrumente pot ajuta la selectarea unei palete de culori semnificative, în funcție de natura datelor. Iată câteva:

• ColorBrewer. Paletele sunt împărțite în trei tipuri:
  • Categoria (folosit pentru a separa articolele în grupuri distincte)
  • Secvenţial (utilizat pentru a codifica diferenţele cantitative)
  • Divergente
• Viz Paleta. Viz Palette are grijă de accesibilitate, proiectând pentru daltonism și nuanțe uniform distanțate. Include un „raport de culoare” care identifică nuanțele care ar putea arăta la fel în diferite situații.

Aplicarea principiilor Gestalt la vizualizarea datelor

Principiile gestalt ale percepției pot ajuta la clarificarea modului în care creierul organizează elementele pe baza trăsăturilor comune, în timp ce încearcă să dea sens informațiilor vizuale. Teoria gestaltă se bazează pe ideea că creierul uman va încerca să simplifice și să organizeze imagini sau modele complexe care constau din multe elemente prin aranjarea subconștientă a părților într-un sistem organizat care creează un întreg, mai degrabă decât o serie de elemente disparate.

Similitudine

Principiul similarității spune că mintea noastră va grupa automat elementele cu proprietăți vizuale comune ca fiind „asemănătoare”. Culori similare, forme similare, dimensiuni similare și orientări similare sunt percepute ca un grup. Acest principiu este ilustrat în graficele de mai jos.

Spre deosebire de diagrama din stânga cu barele în culori diferite, în dreapta sunt același albastru. Având în vedere că există o singură variabilă (Costuri/Venituri), acest lucru are sens. Având barele în aceeași culoare, este mai ușoară înțelegerea datelor și elimină solicitarea cognitivă suplimentară cauzată de utilizarea diferitelor culori din stânga.

Proximitate

Proximitatea este mai eficientă decât asemănarea, deoarece ochiul uman percepe elementele a fi legate în funcție de cât de aproape sunt unul de celălalt.

În graficul de mai jos, scopul este de a compara vânzările pe țară în trei trimestre. Deși este ușor să compari vânzările fiecărei țări într-un trimestru din cauza proximității lor, ar fi o provocare să analizezi vânzările pe țară.

Graficul revizuit îl comunică mai clar. În acest caz, informațiile sunt prioritizate pentru a se concentra pe obiectivul de vizualizare, deoarece menține punctele principale de date mai apropiate.

Incinta

Principiul regiunii comune, introdus de Palmer în 1992, demonstrează modul în care incinta elementelor cu o limită clar definită tinde să fie percepută ca un grup dacă împărtășesc o zonă comună.

În exemplul de mai jos, cele trei bare din zona umbrită în gri par să facă parte dintr-un grup. Această tehnică ajută spectatorii să se concentreze asupra unui grup de obiecte dintr-o diagramă.

Concluzie

Înțelegerea elementelor cheie ale percepției umane și ale procesului cognitiv este o parte esențială a proiectării unor vizualizări excelente de date. Când lucrează la produse cu nevoi de vizualizare a datelor – fie că este vorba despre un tablou de bord B2B sau o aplicație financiară – designerii trebuie să fie atenți la procesul de percepție vizuală a creierului uman și la principiile fundamentale de proiectare a vizualizării datelor.

Familiarizarea cu bine-cunoscutele principii gestalt ale percepției vizuale poate fi un mare beneficiu pentru designeri și îi poate ajuta să înțeleagă modul în care creierul transformă imaginile complexe în modele. A fi conștient de aceste principii este valoros în procesul de realizare a unei ierarhii vizuale mai explicite atunci când concepe vizualizari de date și proiectează diagrame mai eficiente.

În plus, conștientizarea procesării pre-atente și a variabilelor vizuale, precum și aplicarea corectă a culorii, va permite designerilor să creeze vizualizări de date mai eficiente.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• O prezentare completă a celor mai bune instrumente de vizualizare a datelor
• Vizualizarea datelor – Cele mai bune practici și baze
• Cele mai bune exemple de vizualizare a datelor și modele de tablouri de bord
• Proiectarea tabloului de bord - Considerații și cele mai bune practici
• COVID-19: Cazul de utilizare suprem al gândirii de design