Das Auge des Geistes – Ein Blick auf die Psychologie der Datenvisualisierung

Datenvisualisierung ist eine großartige Möglichkeit, eine Geschichte über Daten zu erzählen. Aber wie macht man das am besten? Ein Verständnis der menschlichen Wahrnehmung und Kognition kann Designern dabei helfen, dies effektiv zu tun.

Seit Tausenden von Jahren verwenden Menschen Bilder, um Geschichten zu erzählen und Antworten auf grundlegende Fragen zu veranschaulichen. Das früheste Beispiel für Datenvisualisierung ist wahrscheinlich eine Karte von vor etwa 27.000 Jahren, und lange Zeit waren Datenvisualisierungen für etwas anderes als die Geographie selten zu sehen.

Ist unser Gehirn so gebaut, dass es Muster und Verbindungen erkennt? Heute leben wir in einem goldenen Zeitalter der Datenvisualisierung. Die effektive Kommunikation von Daten kann sich als schwierig erweisen, und obwohl Grafiken uns dabei helfen können, komplexe Daten zu verstehen und sie sogar aus einer neuen Perspektive zu sehen, kann die Visualisierung ein entscheidender Weg sein, wenn es darum geht, eine Botschaft richtig an ein Publikum zu übermitteln oder Geschäftsentscheidungen auf der Grundlage von Daten zu treffen um es zu erreichen. Aber was steckt hinter der Kraft der Datenvisualisierung?

Historischer Kontext des Datenvisualisierungsdesigns

Die Datenvisualisierung hat eine lange Geschichte und hat zwischen dem 17. und 19. Jahrhundert bedeutende Fortschritte gemacht. Die Idee, quantitative Daten grafisch darzustellen, entstand im 18. Jahrhundert, als Rene Descartes ein zweidimensionales Koordinatensystem zur Darstellung von Werten für mathematische Operationen erfand. Dieses System wurde verbessert, als William Playfair Pionierarbeit für grafische Formen leistete, wie wir sie heute kennen. Ihm wird zugeschrieben, Linien- und Balkendiagramme und später das Tortendiagramm und das Kreisdiagramm erfunden zu haben.

Im Laufe der Jahre hat sich die Verwendung quantitativer Graphen immer weiter verbreitet. Ihre Methodik und Wirksamkeit nahmen in der zweiten Hälfte des 20. Jahrhunderts mit der Veröffentlichung von Jacques Bertins Buch The Semiology of Graphics erheblich zu . Seine Arbeit war entscheidend, weil er feststellte, dass die visuelle Wahrnehmung nach Regeln und Mustern funktioniert, die befolgt werden können, um Informationen intuitiv, klar und effizient zu präsentieren.

Bertin untersuchte die Wirksamkeit verschiedener Arten von Diagrammen. Im Beispiel unten zeigen die Tortendiagramme die Produktion verschiedener Fleischsorten in mehreren Ländern. Bertin hielt diese für „nutzlos“. In der Mitte – durch den Einsatz von Matrix-Visualisierung werden High-Level-Muster sofort sichtbarer. Und auf der rechten Seite, da Länder und Fleischproduktion keine natürliche Ordnung haben, können viele andere Matrizen erstellt werden – einschließlich des gezeigten Beispiels –, die viel mehr Klarheit bringen. In diesem Szenario hat die Neuordnung der Kategorien die Darstellung der Daten erheblich verbessert.

Was hat Psychologie mit Datenvisualisierung zu tun?

Visuelle Wahrnehmung ist die Fähigkeit, unsere Umwelt zu sehen, zu interpretieren und zu organisieren. Datenvisualisierung kann äußerst effektiv sein, da sie die natürlichen Fähigkeiten des menschlichen Gehirns nutzt. Es ist schnell und effizient.

John Tukey, ein einflussreicher amerikanischer Mathematiker und theoretischer Statistiker, sagte: „Der größte Wert eines Bildes ist, wenn es uns zwingt, etwas zu sehen, was wir nie erwartet hätten.“

Kognition, die von der Großhirnrinde verwaltet wird, ist viel langsamer und erfordert mehr Aufwand, um Informationen zu verarbeiten. Die visuelle Darstellung von Daten beschleunigt unsere Wahrnehmung und hilft, die kognitive Belastung zu reduzieren.

Im Beispiel unten zeigt uns die Tabelle genaue Zahlen. Können wir jedoch schnell die höchsten und niedrigsten Zahlen für erneuerbare Wasserressourcen ermitteln? Nicht einfach, aber dieselben Daten werden viel klarer und verständlicher, wenn sie visuell im Balkendiagramm rechts dargestellt werden.

Den dominierenden Einfluss der visuellen Wahrnehmung im Vergleich zu anderen Sinnen zeigt ein Beispiel des dänischen Physikers Tor Norretranders. Er demonstrierte die Kraft visueller Bilder, indem er die Kapazität menschlicher Sinne in standardmäßige Computerdurchsätze umwandelte. Sight hat die Nase vorn, da es die gleiche Bandbreite wie ein Computernetzwerk hat. Seine Kanalkapazität ist 10-mal höher als die Berührung und 100-mal stärker als das Hören oder Riechen. Das kleine Quadrat in der rechten unteren Ecke ist der Ort, an dem wir sensorische Erfahrungen kognitiv wahrnehmen.

Voraufmerksame Verarbeitung

Die visuelle Verarbeitung dominiert nicht nur die sensorischen Eingaben, die Datenmenge und die Geschwindigkeit, mit der wir verarbeiten, sind weitaus höher, als uns bewusst ist. Dieses Phänomen ist als „voraufmerksame Verarbeitung“ bekannt. Es ist unterbewusst und schnell. Es dauert 200-500 Millisekunden, bis das Auge sendet und das Gehirn die Voraufmerksamkeitseigenschaft eines visuellen Reizes verarbeitet (das ist viel schneller, als das Gehirn Tabellenkalkulationsdaten verarbeiten kann).

„Voraufmerksame Verarbeitung ist die unbewusste Anhäufung von Informationen aus der Umwelt. Alle verfügbaren Informationen werden prä-aufmerksam verarbeitet. Dann filtert und verarbeitet das Gehirn, was wichtig ist. Informationen mit der höchsten Hervorhebung (ein Stimulus, der am meisten hervorsticht) oder Relevanz für das, worüber eine Person nachdenkt, werden für eine weitere und vollständigere Analyse durch bewusste (aufmerksame) Verarbeitung ausgewählt.“ – aus Wikipedia

Die voraufmerksame Verarbeitung ist ein Segen für Designer, da der geschickte Einsatz es den Menschen ermöglicht, das Dargestellte schneller zu verstehen. Ein hochkompetenter Designer kann jemandem helfen, der Datenvisualisierungen betrachtet, schneller und mit weniger Aufwand mehr Informationen aufzunehmen, da dies die bewusste Verarbeitung erleichtert und die Gedächtnisbelastung verringert.

Vorteile der voraufmerksamen Verarbeitung:

• Schnell/Automatisch
• Emotional
• Impulse/Antriebe
• Gewohnheiten
• Überzeugungen
• Stereotyp
• Unterbewusstsein

Viele visuelle Variablen lösen eine voraufmerksame Reaktion aus. Indem wir lernen, welche visuellen Elemente automatisch hervorgehoben werden, und sie dann in Dashboards integrieren, können wir Visualisierungen entwerfen, die die Geschichte der Daten effektiv erzählen.

Visuelle Variablen

Visuelle Variablen, eingeführt von Jacques Bertin, sind die Unterschiede zwischen Elementen, wie sie vom menschlichen Auge wahrgenommen werden. Diese seit langem untersuchten Variablen liefern die Mittel, um zu verstehen, wie das menschliche Gehirn visuelle Informationen verarbeitet und navigiert. Der ursprüngliche Satz von „Netzhautvariablen“ bestand aus sieben Variablen: Position, Größe, Form, Wert, Farbton, Ausrichtung und Textur.

Die folgenden Diagramme zeigen Beispiele visueller Variablen, die nützlich sind, um qualitative oder quantitative Unterschiede aufzuzeigen – laut Bertin. Sie demonstrieren auch eine Möglichkeit, Attribute durch Punkte, Linien oder Flächen darzustellen.

Eine Studie von William Cleveland und Robert McGill aus dem Jahr 1984 ordnete die häufigsten Aspekte, die zwei Formen haben können, basierend darauf, wie leicht das menschliche Gehirn Unterschiede zwischen ihnen erkennt. Sie ordneten die folgenden visuellen Merkmale von den genauesten bis zu den ungenauesten:

Position entlang einer gemeinsamen Skala

Da wir ein gemeinsames räumliches Bezugssystem haben, ist die Position das am einfachsten zu erkennende und zu bewertende Merkmal in Bezug auf Elemente im Raum.

Beispiele: Balkendiagramme, Streudiagramme

Positionen entlang nicht ausgerichteter, identischer Skalen

Es ist einfach, separate Skalen zu vergleichen, die mit derselben Achse wiederholt werden, selbst wenn sie nicht ausgerichtet sind. Panel-Charts oder „Small Multiples“ sind ein gutes Beispiel dafür. Das Ergebnis ist ein Raster aus Diagrammen, die alle demselben visuellen Format folgen, aber unterschiedliche Datensätze zeigen. Im Vergleich zu einem einzelnen, größeren Diagramm können kleine Vielfache beim Überzeichnen helfen, wenn Daten aufgrund zu vieler gezeichneter Elemente verdeckt oder verdeckt werden können.

Beispiel: Small Multiples (auch bekannt als Rellis-, Lattice-, Grid- und Panel-Charts)

Länge

Die Länge kann quantitative Informationen effektiv darstellen, da die Länge eines Elements auf den Datenwert skaliert werden kann, den sie darstellen. Das menschliche Gehirn erkennt leicht Proportionen und bewertet die Länge, selbst wenn die Objekte nicht ausgerichtet sind.

Beispiel: Balkendiagramme

Richtung

Die Richtung ist für das menschliche Auge leicht erkennbar. Es kann beispielsweise Linien- und Trenddiagramme verwenden, um Daten darzustellen, die sich im Laufe der Zeit ändern.

Beispiel: Trenddiagramme

Winkel

Winkel helfen, Vergleiche anzustellen, indem sie ein Gefühl für Proportionen vermitteln. Studien zeigen, dass Winkel schwieriger zu bewerten sind als Länge oder Position. Kreisdiagramme sind jedoch genauso effizient wie gestapelte Balkendiagramme, es sei denn, das Ganze besteht aus mehr als drei Teilen.

Beispiel: Tortendiagramme

Bereich

Die relative Größe von Flächen ist schwerer zu vergleichen als die Länge von Linien. Die zweite Richtung erfordert mehr Aufwand bei der Verarbeitung und Interpretation.

Beispiel: Blasendiagramme

Volumen

Volumen bezieht sich auf die Verwendung von 3D-Objekten in zweidimensionalen Räumen, die ihre Bewertung erheblich erschweren. Studien deuten jedoch darauf hin, dass 3D-Objekte genauer wahrgenommen werden können, wenn zwei Formen gleicher Dimensionalität verglichen werden.

Beispiel: 3D-Balkendiagramme

Farbsättigung

Farbsättigung bezieht sich auf die Intensität eines einzelnen Farbtons. Zunehmende Farbintensitäten können intuitiv als Zahlen mit zunehmendem Wert wahrgenommen werden. Allerdings ist es schwierig, die Ergebnisse genau auszuwerten.

Beispiel: Heatmaps

Das Verständnis der Rangfolge visueller Variablen ist für die Erstellung überzeugender Datenvisualisierungen unerlässlich. Das bedeutet jedoch nicht, dass Designer sich auf Balkendiagramme und Streudiagramme beschränken müssen. Cleveland und McGill merken an: „Die Reihenfolge ergibt keine genaue Vorschrift für die Anzeige von Daten, sondern ist eher ein Rahmen, innerhalb dessen gearbeitet werden kann.“

Farbe

Farbsättigung und -schattierung sind laut William Cleveland am ungenauesten, wenn es um die Wahrnehmung von Mustern und Verhalten geht. Dennoch kann Farbe ein leistungsstarkes Werkzeug für Datenvisualisierungsdesigner sein, um Bedeutung und Klarheit bei der Anzeige von Daten zu vermitteln. Es ist jedoch entscheidend, dass Designer verstehen, wie Farbe funktioniert und was sie gut macht und was nicht.

Farbe im Kontext

Unsere Farbwahrnehmung hängt vom Kontext, der Farbe und ihrem Kontrast zu umgebenden Objekten ab.

Ein großartiges Beispiel ist ein Experiment von Akiyoshi Kitaoka, einem Professor am Institut für Psychologie der Ritsumeikan-Universität in Japan, bei dem er ein Stück graues Papier über einen Schwarz-Weiß-Verlauf schiebt. Das Papier scheint seine Farbe zu ändern, wenn es sich von einer Seite zur anderen bewegt. In jedem Moment nehmen wir die Farbe anders wahr, da sie von verschiedenen Grautönen umgeben ist. Siehe das Video unten:

In seinem Artikel Practical Rules for Using Color in Charts leitet Stephen Few einige praktische Regeln aus diesen Beobachtungen ab:

1. Wenn Sie möchten, dass verschiedene Objekte derselben Farbe in einer Tabelle oder einem Diagramm gleich aussehen, stellen Sie sicher, dass der Hintergrund – die Farbe, die sie umgibt – einheitlich ist.
2. Wenn Sie möchten, dass Objekte in einer Tabelle oder einem Diagramm gut erkennbar sind, verwenden Sie eine Hintergrundfarbe, die einen ausreichenden Kontrast zum Objekt bildet.

Farbe erzählt eine Geschichte

Farbe ist nicht nur Dekoration. Es ist am besten, wenn es sinnvoll und strategisch eingesetzt wird. Farbe sollte dabei helfen, eine Geschichte zu erzählen und das Ziel des präsentierten Datensatzes zu kommunizieren. Wie das Sprichwort sagt, „weniger ist mehr“.

Kontrastfarben sollten nur auf Bedeutungsunterschiede in den Daten angewendet werden, um die kognitive Belastung zu verringern. Farbe kann auch die Hauptelemente der Visualisierung hervorheben.

Das Fehlen von Farbe macht ein gutes Diagramm nicht weniger effektiv. Grau ist ein guter Ausgangspunkt in der Ideenfindungsphase, und sobald ein Fokuspunkt identifiziert ist, wird die Anwendung von Farbe diese Teile betonen.

Farbpaletten definieren

Der Farbsatz, den ein Datenvisualisierungsdesigner anwendet, kann die Bedeutung der Daten vollständig verändern. Je nach Art der Daten können viele Tools helfen, eine sinnvolle Farbpalette auszuwählen. Hier sind ein paar:

• ColorBrewer. Paletten werden in drei Typen unterteilt:
  • Kategorial (wird verwendet, um Elemente in verschiedene Gruppen zu unterteilen)
  • Sequentiell (zur Codierung quantitativer Unterschiede)
  • Abweichend
• Nämlich Palette. Viz Palette kümmert sich um Zugänglichkeit, Design für Farbenblindheit und wahrnehmbar gleichmäßig verteilte Farbtöne. Es enthält einen „Farbbericht“, der Schattierungen identifiziert, die in verschiedenen Situationen gleich aussehen könnten.

Anwendung von Gestaltprinzipien auf die Datenvisualisierung

Die Gestaltprinzipien der Wahrnehmung können helfen zu klären, wie das Gehirn Elemente basierend auf gemeinsamen Merkmalen organisiert, wenn es versucht, visuellen Informationen einen Sinn zu geben. Die Gestalttheorie basiert auf der Idee, dass das menschliche Gehirn versucht, komplexe Bilder oder Designs, die aus vielen Elementen bestehen, zu vereinfachen und zu organisieren, indem es die Teile unbewusst zu einem organisierten System anordnet, das ein Ganzes schafft, und nicht nur eine Reihe unterschiedlicher Elemente.

Ähnlichkeit

Das Prinzip der Ähnlichkeit besagt, dass unser Verstand Elemente mit gemeinsamen visuellen Eigenschaften automatisch als „ähnlich“ gruppiert. Ähnliche Farben, ähnliche Formen, ähnliche Größen und ähnliche Orientierungen werden als Gruppe wahrgenommen. Dieses Prinzip wird in den folgenden Diagrammen veranschaulicht.

Im Gegensatz zum Diagramm auf der linken Seite mit den Balken in verschiedenen Farben sind sie auf der rechten Seite in demselben Blau gehalten. Da es nur eine Variable (Kosten/Erlöse) gibt, ist dies sinnvoll. Die gleiche Farbe der Balken erleichtert das Verständnis der Daten und beseitigt die zusätzliche kognitive Belastung, die durch die Verwendung unterschiedlicher Farben auf der linken Seite verursacht wird.

Räumliche Nähe

Nähe ist effektiver als Ähnlichkeit, da das menschliche Auge Elemente als verwandt wahrnimmt, je nachdem, wie nahe sie beieinander liegen.

In der folgenden Grafik sollen die Verkäufe nach Ländern in drei Quartalen verglichen werden. Während es aufgrund ihrer Nähe einfach ist, die Verkäufe der einzelnen Länder innerhalb eines Quartals zu vergleichen, wäre es schwierig, die Verkäufe nach Ländern zu analysieren.

Das überarbeitete Diagramm kommuniziert es deutlicher. In diesem Fall werden Informationen priorisiert, um sich auf das Visualisierungsziel zu konzentrieren, da dadurch die Hauptdatenpunkte näher beieinander bleiben.

Gehege

Das 1992 von Palmer eingeführte Prinzip der gemeinsamen Region zeigt, wie die Umschließung von Elementen mit einer klar definierten Grenze dazu neigt, als Gruppe wahrgenommen zu werden, wenn sie einen gemeinsamen Bereich teilen.

Im Beispiel unten scheinen die drei Balken im grau schattierten Bereich Teil einer Gruppe zu sein. Diese Technik hilft dem Betrachter, sich auf eine Gruppe von Objekten in einem Diagramm zu konzentrieren.

Fazit

Das Verständnis der Schlüsselelemente der menschlichen Wahrnehmung und des kognitiven Prozesses ist ein wesentlicher Bestandteil der Gestaltung exzellenter Datenvisualisierungen. Bei der Arbeit an Produkten mit Datenvisualisierungsanforderungen – sei es ein B2B-Dashboard oder eine Finanz-App – müssen Designer den visuellen Wahrnehmungsprozess des menschlichen Gehirns und die grundlegenden Designprinzipien der Datenvisualisierung berücksichtigen.

Eine Vertrautheit mit bekannten Gestaltprinzipien der visuellen Wahrnehmung kann für Designer von großem Vorteil sein und ihnen helfen zu verstehen, wie das Gehirn komplexe Bilder in Muster umwandelt. Die Berücksichtigung dieser Prinzipien ist im Prozess hilfreich, um eine deutlichere visuelle Hierarchie zu erreichen, wenn Datenvisualisierungen entwickelt und effektivere Diagramme entworfen werden.

Darüber hinaus können Designer effektivere Datenvisualisierungen erstellen, wenn sie sich der voraufmerksamen Verarbeitung und visuellen Variablen sowie der korrekten Farbanwendung bewusst sind.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Ein vollständiger Überblick über die besten Datenvisualisierungstools
• Datenvisualisierung – Best Practices und Grundlagen
• Die besten Beispiele für Datenvisualisierung und Dashboard-Designs
• Dashboard-Design – Überlegungen und Best Practices
• COVID-19: Der ultimative Anwendungsfall für Design Thinking