Oko umysłu – spojrzenie na psychologię wizualizacji danych

Wizualizacja danych to świetny sposób na opowiedzenie historii o danych. Ale jaki jest najlepszy sposób, aby to zrobić? Zrozumienie ludzkiej percepcji i poznania może pomóc projektantom robić to skutecznie.

Od tysięcy lat ludzie używali materiałów wizualnych, aby opowiadać historie i ilustrować odpowiedzi na podstawowe pytania. Najwcześniejszym przykładem wizualizacji danych jest prawdopodobnie mapa sprzed około 27 000 lat i przez długi czas rzadko widywano wizualizacje danych dla czegokolwiek innego niż geografia.

Czy nasz mózg jest wyjątkowo zbudowany, aby rozpoznawać wzorce i połączenia? Dziś żyjemy w złotym wieku wizualizacji danych. Skuteczne przekazywanie danych może okazać się trudne i chociaż wykresy mogą pomóc nam zrozumieć złożone dane, a nawet spojrzeć na nie z nowej perspektywy, jeśli chodzi o prawidłowe przesyłanie wiadomości do odbiorców lub podejmowanie decyzji biznesowych na podstawie danych, wizualizacja może być kluczowym sposobem aby to osiągnąć. Ale co kryje się za potęgą wizualizacji danych?

Historyczny kontekst projektowania wizualizacji danych

Wizualizacja danych ma długą historię i poczyniła znaczne postępy między XVII a XIX wiekiem. Pomysł graficznego przedstawiania danych ilościowych pojawił się w XVIII wieku, kiedy Kartezjusz wynalazł dwuwymiarowy układ współrzędnych do wyświetlania wartości operacji matematycznych. Ten system został ulepszony, gdy William Playfair był pionierem form graficznych, jakie znamy dzisiaj. Przypisuje mu się wynalezienie wykresów liniowych i słupkowych, a później kołowego i kołowego.

Z biegiem lat coraz powszechniejsze stało się korzystanie z wykresów ilościowych. Ich metodologia i skuteczność znacznie wzrosły w drugiej połowie XX wieku wraz z publikacją książki Jacquesa Bertina The Semiology of Graphics . Jego praca była kluczowa, ponieważ odkrył, że aby prezentować informacje intuicyjnie, przejrzyście i wydajnie, percepcja wzrokowa działała według reguł i wzorców, które można było naśladować.

Bertin badał skuteczność różnych typów wykresów. W poniższym przykładzie wykresy kołowe przedstawiają produkcję różnych rodzajów mięsa w kilku krajach. Bertin uważał je za „bezużyteczne”. Pośrodku — dzięki zastosowaniu wizualizacji macierzowej, wzorce wysokiego poziomu stają się bardziej natychmiast widoczne. A po prawej, ponieważ kraje i produkcja mięsa nie mają naturalnego porządku, można wyprodukować wiele innych matryc – w tym przedstawiony przykład – które zapewniają znacznie większą przejrzystość. W tym scenariuszu zmiana kolejności kategorii znacznie poprawiła prezentację danych.

Co psychologia ma wspólnego z wizualizacją danych?

Percepcja wzrokowa to zdolność widzenia, interpretowania i organizowania naszego środowiska. Wizualizacja danych może być niezwykle skuteczna, ponieważ wykorzystuje naturalne zdolności ludzkiego mózgu. Jest szybki i wydajny.

John Tukey, wpływowy amerykański matematyk i statystyk teoretyczny, powiedział: „Największą wartością obrazu jest to, że zmusza nas do zauważenia tego, czego nigdy się nie spodziewaliśmy”.

Procesy poznawcze, którymi zajmuje się kora mózgowa, są znacznie wolniejsze i wymagają więcej wysiłku w przetwarzaniu informacji. Przedstawianie danych wizualnie przyspiesza naszą percepcję i pomaga zmniejszyć obciążenie poznawcze.

W poniższym przykładzie tabela pozwala nam zobaczyć dokładne liczby. Czy jednak moglibyśmy szybko wymyślić najwyższe i najniższe dane dotyczące odnawialnych zasobów wodnych? Nie jest to łatwe, ale te same dane stają się znacznie jaśniejsze i bardziej zrozumiałe, gdy zostaną przedstawione wizualnie na wykresie słupkowym po prawej stronie.

Dominujący wpływ percepcji wzrokowej na inne zmysły trafnie ilustruje przykład duńskiego fizyka Tora Norretrandersa. Zademonstrował moc wizualizacji, przekształcając zdolność ludzkich zmysłów na standardowe przepustowość komputera. Wzrok wychodzi na wierzch, ponieważ ma taką samą przepustowość jak sieć komputerowa. Jego pojemność kanału jest 10 razy większa niż dotyk i 100 razy silniejsza niż słuch czy węch. Mały kwadrat w prawym dolnym rogu to miejsce, w którym jesteśmy poznawczo świadomi doświadczeń zmysłowych.

Przetwarzanie przeduważne

Nie tylko przetwarzanie wizualne dominuje nad bodźcami sensorycznymi, ale ilość danych i szybkość, z jaką przetwarzamy, są znacznie wyższe, niż jesteśmy tego świadomi. Zjawisko to znane jest jako „przetwarzanie przeduważne”. Jest podświadomy i szybki. Oko potrzebuje 200-500 milisekund, aby przetransmitować, a mózg przetworzyć przeduważną właściwość bodźca wzrokowego (to znacznie szybciej niż przetwarzanie danych z arkusza kalkulacyjnego przez mózg).

„Przetwarzanie przeduważne to podświadome gromadzenie informacji z otoczenia. Wszystkie dostępne informacje są przetwarzane z wyprzedzeniem. Następnie mózg filtruje i przetwarza to, co ważne. Informacje, które mają największe znaczenie (bodziec, który wyróżnia się najbardziej) lub mają związek z tym, o czym myśli dana osoba, są wybierane do dalszej i pełniejszej analizy poprzez świadome (uważne) przetwarzanie.” – z Wikipedii

Przetwarzanie przeduważne jest dobrodziejstwem dla projektantów, ponieważ jego umiejętne wdrożenie pozwala ludziom szybciej zrozumieć, co jest prezentowane. Wysoce kompetentny projektant może pomóc osobie przeglądającej wizualizacje danych przyswoić więcej informacji szybciej i przy mniejszym wysiłku, ponieważ ułatwia to świadome przetwarzanie i zmniejsza obciążenie pamięci.

Zalety przetwarzania przeduważnego:

• Szybki/Automatyczny
• Emocjonalny
• Impulsy/napędy
• Nawyki
• Wierzenia
• Stereotypowy
• Podświadomy

Wiele zmiennych wizualnych wywołuje uważną reakcję. Ucząc się, jakie elementy wizualne są automatycznie podkreślane, a następnie włączając je do pulpitów nawigacyjnych, możemy projektować wizualizacje, które skutecznie opowiadają historię danych.

Zmienne wizualne

Wprowadzone przez Jacquesa Bertina zmienne wizualne to różnice między elementami postrzeganymi przez ludzkie oko. Badane przez długi czas zmienne te dostarczają środków, dzięki którym można zrozumieć, w jaki sposób ludzki mózg przetwarza i nawiguje po informacjach wizualnych. Oryginalny zestaw „zmiennych siatkówki” składał się z siedmiu zmiennych: położenia, rozmiaru, kształtu, wartości, odcienia koloru, orientacji i tekstury.

Poniższe wykresy pokazują przykłady zmiennych wizualnych przydatnych do pokazywania różnic jakościowych lub ilościowych — według Bertina. Pokazują również sposób prezentowania atrybutów za pomocą punktów, linii lub obszarów.

Badania Williama Clevelanda i Roberta McGilla z 1984 roku uszeregowały najczęstsze aspekty, jakie mogą mieć dwa kształty, na podstawie tego, jak łatwo ludzki mózg wykrywa różnice między nimi. Zamówili następujące cechy wizualne od najbardziej do najmniej dokładnej:

Pozycja na wspólnej skali

Ponieważ mamy wspólny system odniesienia przestrzennego, położenie jest najłatwiejszą do rozpoznania i oceny cechą w odniesieniu do elementów w przestrzeni.

Przykłady: wykresy słupkowe, wykresy punktowe

Pozycje wzdłuż niewyrównanych, identycznych skal

Łatwo jest porównać oddzielne skale powtórzone z tą samą osią, nawet jeśli nie są wyrównane. Świetnym tego przykładem są wykresy panelowe lub „małe wielokrotności”. Rezultatem jest siatka wykresów, które mają ten sam format wizualny, ale pokazują różne zestawy danych. W porównaniu z pojedynczym, większym wykresem, małe wielokrotności mogą pomóc w nakładaniu danych, gdy dane mogą zostać zasłonięte lub zasłonięte z powodu zbyt wielu wykreślonych elementów.

Przykład: małe wielokrotności (czyli wykresy Rellis, Lattice, Grid i Panel)

Długość

Długość może skutecznie reprezentować informacje ilościowe, ponieważ długość elementu może być skalowana do wartości danych, które reprezentują. Ludzki mózg z łatwością rozpoznaje proporcje i ocenia długość, nawet jeśli obiekty nie są ustawione w jednej linii.

Przykład: wykresy słupkowe

Kierunek

Kierunek jest łatwo rozpoznawalny przez ludzkie oko. Może używać wykresów liniowych i trendów, na przykład do prezentowania danych, które zmieniają się w czasie.

Przykład: Wykresy trendów

Kąt

Kąty pomagają dokonywać porównań, zapewniając poczucie proporcji. Badania pokazują, że kąty są trudniejsze do oceny niż długość lub położenie. Jednak wykresy kołowe są tak samo wydajne, jak skumulowane wykresy słupkowe, chyba że całość składa się z więcej niż trzech części.

Przykład: wykresy kołowe

Powierzchnia

Względna wielkość obszarów jest trudniejsza do porównania w porównaniu z długością linii. Drugi kierunek wymaga więcej wysiłku w przetwarzaniu i interpretacji.

Przykład: wykresy bąbelkowe

Tom

Objętość odnosi się do wykorzystania obiektów 3D w przestrzeniach dwuwymiarowych, co znacznie utrudnia ich ocenę. Jednak badania sugerują, że obiekty 3D można postrzegać dokładniej, porównując dwa kształty o tej samej wymiarowości.

Przykład: wykresy słupkowe 3D

Nasycenie koloru

Nasycenie koloru odnosi się do intensywności pojedynczego odcienia. Wzrastająca intensywność koloru może być intuicyjnie postrzegana jako liczby o coraz większej wartości. Trudno jednak dokładnie ocenić wyniki.

Przykład: mapy termiczne

Zrozumienie rankingu zmiennych wizualnych jest niezbędne do tworzenia atrakcyjnych wizualizacji danych. Nie oznacza to jednak, że projektanci muszą ograniczać się do wykresów słupkowych i wykresów punktowych. Cleveland i McGill zauważają: „Kolejność nie skutkuje dokładną receptą na wyświetlanie danych, ale raczej stanowi ramy, w których można pracować”.

Kolor

Według Williama Clevelanda nasycenie kolorów i cieniowanie są najmniej dokładne, jeśli chodzi o postrzeganie wzorów i zachowań. Mimo to kolor może być potężnym narzędziem dla projektantów wizualizacji danych, które przekazuje znaczenie i przejrzystość podczas wyświetlania danych. Ważne jest jednak, aby projektanci rozumieli, jak działa kolor i co robi, a co nie.

Kolor w kontekście

Nasze postrzeganie koloru zależy od kontekstu, koloru i jego kontrastu z otaczającymi obiektami.

Świetnym przykładem jest eksperyment Akiyoshi Kitaoki, profesora na Wydziale Psychologii Uniwersytetu Ritsumeikan w Japonii, w którym przesuwa kawałek szarego papieru po gradiencie od czerni do bieli. Papier wydaje się zmieniać kolor, gdy przesuwa się z boku na bok. W każdym momencie inaczej odbieramy kolor, ponieważ otaczają go różne odcienie szarości. Zobacz wideo poniżej:

W swoim artykule „ Praktyczne zasady używania kolorów na wykresach ” Stephen Few wyprowadza kilka praktycznych zasad z tych obserwacji:

1. Jeśli chcesz, aby różne obiekty tego samego koloru w tabeli lub na wykresie wyglądały tak samo, upewnij się, że tło — kolor, który je otacza — jest spójny.
2. Jeśli chcesz, aby obiekty w tabeli lub wykresie były dobrze widoczne, użyj koloru tła, który wystarczająco kontrastuje z obiektem.

Kolor opowiada historię

Kolor to nie tylko dekoracja. Najlepiej, gdy używa się go w sposób sensowny i strategiczny. Kolor powinien pomóc opowiedzieć historię i przekazać cel prezentowanego zestawu danych. Jak to się mówi, „mniej znaczy więcej”.

Kontrastujące kolory powinny być stosowane tylko do różnic w znaczeniach danych, aby zmniejszyć obciążenie poznawcze. Kolor może również podkreślić główne elementy wizualizacji.

Brak koloru nie sprawia, że ​​dobry wykres jest mniej skuteczny. Szary jest dobrym punktem wyjścia na etapie tworzenia pomysłów, a po zidentyfikowaniu punktu skupienia, zastosowanie koloru podkreśli te części.

Zdefiniuj palety kolorów

Zestaw kolorów zastosowany przez projektanta wizualizacji danych może całkowicie zmienić znaczenie danych. Wiele narzędzi może pomóc w wyborze znaczącej palety kolorów, w zależności od charakteru danych. Oto kilka:

• ColorBrewer. Palety dzielą się na trzy typy:
  • Kategoryczny (używany do rozdzielania elementów na odrębne grupy)
  • Sekwencyjny (używany do kodowania różnic ilościowych)
  • Rozbieżne
• Mianowicie paleta. Viz Palette dba o dostępność, projektując dla ślepoty barw i percepcyjnie równomiernie rozmieszczone odcienie. Zawiera „raport kolorów”, który identyfikuje odcienie, które mogą wyglądać tak samo w różnych sytuacjach.

Stosowanie zasad Gestalt do wizualizacji danych

Zasady percepcji Gestalt mogą pomóc wyjaśnić, w jaki sposób mózg organizuje elementy w oparciu o wspólne cechy, gdy próbuje zrozumieć informacje wizualne. Teoria Gestalt opiera się na założeniu, że ludzki mózg będzie próbował uprościć i uporządkować złożone obrazy lub projekty, które składają się z wielu elementów, podświadomie układając części w zorganizowany system, który tworzy całość, a nie tylko serię różnych elementów.

Podobieństwo

Zasada podobieństwa mówi, że nasze umysły automatycznie grupują elementy o wspólnych właściwościach wizualnych jako „podobne”. Podobne kolory, podobne kształty, podobne rozmiary i podobne orientacje są postrzegane jako grupa. Zasadę tę ilustrują poniższe wykresy.

W przeciwieństwie do wykresu po lewej stronie z paskami w różnych kolorach, są one tak samo niebieskie po prawej stronie. Biorąc pod uwagę, że istnieje tylko jedna zmienna (koszty/przychody), ma to sens. Posiadanie pasków w tym samym kolorze ułatwia zrozumienie danych i eliminuje dodatkowe obciążenie poznawcze spowodowane użyciem różnych kolorów po lewej stronie.

Bliskość

Bliskość jest bardziej skuteczna niż podobieństwo, ponieważ ludzkie oko postrzega elementy jako powiązane ze sobą na podstawie tego, jak blisko siebie są.

Na poniższym wykresie celem jest porównanie sprzedaży według krajów w trzech kwartałach. Chociaż łatwo jest porównać sprzedaż w każdym kraju w ciągu kwartału ze względu na ich bliskość, analiza sprzedaży według kraju byłaby trudna.

Zmieniony wykres komunikuje to wyraźniej. W takim przypadku informacje są traktowane priorytetowo, aby skoncentrować się na celu wizualizacji, ponieważ utrzymuje ona główne punkty danych bliżej siebie.

Załącznik

Zasada wspólnego regionu, wprowadzona przez Palmera w 1992 roku, pokazuje, jak zamknięcie elementów o wyraźnie określonej granicy jest postrzegane jako grupa, jeśli dzielą one wspólny obszar.

W poniższym przykładzie trzy paski w szarym obszarze wydają się być częścią grupy. Ta technika pomaga widzom skupić się na grupie obiektów na wykresie.

Wniosek

Zrozumienie kluczowych elementów ludzkiej percepcji i procesu poznawczego jest istotną częścią projektowania doskonałych wizualizacji danych. Pracując nad produktami z potrzebami wizualizacji danych — czy to pulpit nawigacyjny B2B, czy aplikacja finansowa — projektanci muszą pamiętać o procesie wizualnej percepcji ludzkiego mózgu i podstawowych zasadach projektowania wizualizacji danych.

Znajomość dobrze znanych zasad percepcji wzrokowej gestalt może być wielką korzyścią dla projektantów i pomóc im zrozumieć, w jaki sposób mózg przekształca złożone obrazy we wzory. Świadomość tych zasad jest cenna w procesie tworzenia bardziej wyraźnej hierarchii wizualnej podczas opracowywania wizualizacji danych i projektowania bardziej efektywnych wykresów.

Ponadto wiedza o uważnym przetwarzaniu i zmiennych wizualnych, a także o prawidłowym stosowaniu koloru, umożliwi projektantom tworzenie bardziej efektywnych wizualizacji danych.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Kompletny przegląd najlepszych narzędzi do wizualizacji danych
• Wizualizacja danych – najlepsze praktyki i podstawy
• Najlepsze przykłady wizualizacji danych i projekty pulpitów nawigacyjnych
• Projekt pulpitu nawigacyjnego — rozważania i najlepsze praktyki
• COVID-19: ostateczny przypadek użycia w myśleniu projektowym