Datenvisualisierung: Design-Prinzipien, Workflow & Datenrepräsentation nach Andy Kirk

Im Rahmen meines 4+1-Projekts habe ich mich mit der Visualisierung von Daten und dem Bereich Data Driven Design beschäftigt. Dazu habe ich das Buch “Data Visualisation – A Handbook for Data Driven Design” von Andy Kirk gelesen. Während der Lektüre wurde mir zunehmend klarer, dass die Visualisierung von größeren Datenmengen in einer intuitiven Art und Weise eine eigentlich völlig eigenständige Designdisziplin ist. In diesem Artikel möchte ich euch einen kleinen Einstieg in das Thema Datenvisualisierung bieten und ein paar grundsätzliche Konzepte vorstellen.

Visualisierung von Daten

Die Visualisierung von Daten definiert Andy Kirk folgendermaßen:

“Die Repräsentation und Präsentation von Daten, um das Verständnis zu erleichtern.”

Sie ist also ein Hilfsmittel, das Nutzern Daten auf möglichst verständliche Art und Weise präsentiert. Kommen Nutzer mit einer Datenvisualisierung in Berührung, durchlaufen sie Andy Kirk zufolge die folgenden drei Stufen des Verstehens:

Die drei Stufen des Verstehens

1. Wahrnehmen: Was wird mir angezeigt?
   Auf der ersten Stufe des Verstehens werden Formen und Farben wahrgenommen, allerdings ist dabei noch nicht klar, was sich konkret dahinter verbirgt. Stattdessen werden Fragen geklärt wie z. B.: Wo befinden sich große, mittlere und kleine Werte? Wie stehen die Elemente zueinander im Vergleich? Welche Beziehungen existieren?
   
   
2. Interpretieren: Was bedeutet das Angezeigte?
   Auf der zweiten Stufe des Verstehens versuchen wir die Visualisierung zu interpretieren. Farben und Formen werden für uns zu Elementen, die uns Informationen vermitteln. Typische Fragen, die auf dieser Stufe geklärt werden, sind: Was an der Visualisierung ist gut, was ist schlecht? Was ist wichtig, was unwichtig? Und was ist ungewöhnlich und was wie erwartet?
   
   
3. Verstehen: Was bedeutet die Visualisierung für mich?
   Auf der dritten und letzten Stufe geht es um den Informationsgehalt und die gewonnen Erkenntnisse für den Nutzer selbst. In dieser Phase werden z. B. folgende Fragen geklärt: Was ist die Kernaussage der Visualisierung? Was habe ich gelernt? Sollte ich nun etwas anders sehen oder in Zukunft anders tun?

High-Level-Design-Prinzipien nach Andy Kirk

Basierend auf seiner eigenen Definition einer Datenvisualisierung und den 10 Thesen von Dieter Rams über gutes Produktdesign hat Andy Kirk neben diesen drei Stufen des Verstehens, die sich auf den Nutzer beziehen, seine eigenen drei High-Level-Design-Prinzipien entwickelt.

Prinzip 1: Gutes Design ist vertrauenswürdig
Bei einem vertrauenswürdigen Design geht es um Integrität und die Vermeidung von absichtlichen Täuschungen. Die Kriterien und die Berechnungsgrundlagen für eine Visualisierung sollten stets transparent gehalten werden. Das Gleiche gilt für getroffene Annahmen oder entfernte Datensätze, diese sollten niemals verschwiegen werden. Um bei dem Nutzer zusätzliches Vertrauen zu erwecken, sollten auch genügend Beschriftungen sowie Fußnoten und Quellenangaben existieren. Letzten Endes muss die gewählte Visualisierung repräsentativ sein, um den Nutzer nicht absichtlich eine verfälschte Sichtweise auf die Thematik zu zeigen.

Prinzip 2: Gutes Design ist zugänglich
Andy Kirk unterteilt ein zugängliches Design noch einmal in die drei Eigenschaften nutzbar, unaufdringlich und verständlich.

• nutzbar
  Um ein Design nutzbar zu gestalten, sollte man den Fokus auf den relevanten Inhalt setzen und bei den verwendeten Informationen auf eine ausreichende Tiefe achten. Zudem sollte die Visualisierung passend zum Kontext sein, damit sie für den Nutzer in dem jeweiligen Nutzungskontext möglichst eingängig ist.
• unaufdringlich
  Um ein Design unaufdringlich zu gestalten, ist die passende Verwendung von Farbe und Form mit den passenden Kontrastverhältnissen unumgänglich. Es sollte zudem darauf geachtet werden, dass keine “Featureritis” betrieben wird – im Fokus sollte immer das Wesentliche stehen. Außerdem ist auf das passende Design für den jeweiligen Verwendungszweck und Nutzungskontext (Desktop, Tablet, Smartphone, Print) zu achten.
• verständlich
  Ein verständliches Design erzielt man, indem man es klar und möglichst einfach hält und dabei nur soviel domänenbezogenes Wissen einfordert wie notwendig. Man sollte den einfachsten Diagrammtypen wählen, um die entsprechende Information zu kommunizieren. Darüber hinaus ist es sehr wichtig, genügend Details und Angaben, wie z. B. Skalierungen, Einheiten und Beschriftungen, zu liefern.
  
  

Prinzip 3: Gutes Design ist elegant
Bei einem eleganten Design dreht sich alles um Ästhetik. In den 1860er- und 1870er-Jahren entwickelte Gustav Theodor Fechner mit der experimentellen Ästhetik eine bis dato neue und empirische Herangehensweise. Obwohl sich Fechner überwiegend mit Kunstwerken beschäftigte, lassen sich seine Theorien und Methoden auf viele andere Themenbereiche übertragen und sind auch heute noch zeitgemäß. Fechner definierte Ästhetik als das, was sich auf Verhältnisse unmittelbaren Gefallens und Missfallens an dem bezieht, was durch die Sinne in uns eintritt, ohne aber bloß die rein sinnliche Seite davon im Auge zu haben.

Im Kontext einer Datenvisualisierung geht es darum, das Willkürliche zu eliminieren und dabei gründlich, sowie stylekonform zu bleiben. Außerdem sollte darauf geachtet werden, nur Dekorationen im Design zu verwenden, die additiv sind. Das bedeutet, man sollte nur Designelemente einsetzen, die auch eine gewisse Funktionalität bieten. Auf störende dekorative Elemente sollte weitestgehend verzichtet werden, weil sie den Nutzer unnötig ablenken. Ein ästhetisches Design zieht sich durch bis in das letzte Detail und ist in seiner Natur minimalistisch.

"You know you’ve achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away." (Antoine de Saint-Expupéry)

Workflow der Erstellung einer Datenvisualisierung

Die drei Stufen des Verstehens und die Design-Prinzipien sollten wir als Designer oder Usability Engineers im Hinterkopf haben, bevor wir mit unserer "eigentlichen" Arbeit, der Datenvisualisierung, beginnen.

Doch wie gehen wir eigentlich vor, wenn wir eine Datenvisualisierung erstellen möchten, die den oben beschriebenen Prinzipien entspricht?

Andy Kirk teilt den Workflow einer Datenvisualisierung in die folgenden vier Stufen auf, wobei jede Stufe mit der jeweils vorherigen verknüpft ist. Dieser Workflow ist eine Art Schablone für die typischen Aufgaben, die bei der Erstellung einer Datenvisualisierung anfallen.

Stufe 1: Formuliere deine Aufgabe
Auf der ersten Stufe geht es darum, die Aufgabe zu planen, zu definieren und das eigentliche Projekt zu initiieren. Ziel ist es im Wesentlichen auch, die eigentlichen Anforderungen in Bezug auf die Zielgruppe und den Kontext verstanden zu haben.

Stufe 2: Arbeite mit den Daten
Auf der zweiten Stufe werden die Daten gesammelt, vorbereitet und in ein auswertbares Format gebracht. Typische Formate sind hier z. B. .json- oder .csv-Dateien.

Stufe 3: Erstelle deine redaktionelle Sicht
Auf der dritten Stufe werden der Blickwinkel und die eigentliche Aussage der Visualisierung festgelegt.

Stufe 4: Entwickle deine Design-Lösung
Auf der vierten und letzten Stufe überlegen wir uns eine Darstellung, die Daten möglichst verständlich visualisiert. Erst hier beginnt der eigentliche Entwicklungszyklus.

Auf jeder der vier Stufen wird ein bestimmtes Mindset benötigt, das sich aus drei Aspekten zusammensetzt:

• Konzeptionieren
  Hier geht es um konzeptionelle Dinge, bei denen Vorstellungskraft und Urteilsvermögen eine wichtige Rolle spielen. Wir definieren beispielsweise die Anforderungen der Zielgruppe oder machen uns über realisierbare Designentscheidungen Gedanken.
  
• Tun
  Hier geht es um praktische Aktivitäten (typische “hands-on”-Aufgaben), wie z. B. die Skizzierung von Ideen und Konzepten oder das Einarbeiten in eine neue Domäne. Diese Aktivitäten fordern in der Regel stark unsere kognitiven Fähigkeiten.
  
• Machen / Schaffen
  Hier geht es um konstruktive und technische Aufgaben, die eher zum Produktionszyklus zählen, wie z. B. die Übersetzung von bereits besprochenen Designkonzepten in eine effektive Lösung.

Datenrepräsentation innerhalb der Visualisierung

Unter Datenrepräsentation versteht man die Strukturierung bzw. Umstrukturierung von Datentypen für eine visuelle Form. Es geht darum, in welcher visuellen Form die Daten dargestellt werden sollen.

Daten können natürlich auf die unterschiedlichsten Arten repräsentiert werden, aber jede Art der Repräsentation basiert laut Andy Kirk auf dem im Folgenden beschriebenen Konzept der visuellen Kodierung. 

Visuelle Kodierung

Datenvisualisierungen wie z. B. Diagramme basieren auf einer Kombination aus Markierungen und Attributen. Markierungen repräsentieren Einträge (oder Aggregationen von Einträgen) und bestehen aus Primitiven wie Punkten, Linien, Flächen oder komplexeren Formen. Attribute repräsentieren variable Werte für jeden Eintrag und können visuelle Eigenschaften wie Position, Größe, Farbe oder Verbindungen enthalten. Sie dienen dazu, die eigentlichen Werte zu repräsentieren. Attribute unterteilt man nochmal in die folgenden Kategorien auf:

• Quantitative Attribute
  Typische Beispiele für quantitative Attribute wären z. B. Position, Größe, Winkel, Anzahl, Farbsättigung, Helligkeit, Muster oder Bewegung.
• Kategorie-Attribute
  Typische Beispiele für Kategorie-Attribute wären z. B. Symbole / Formen oder Farben. 
• Relationale Attribute
  Typische Beispiele für relationale Attribute wären z. B. Verbindungen / Ecken, Umgebungsraum (Containment) 
  
  

Das Ranking der Wahrnehmungsaufgaben

Die verschiedenen Attribute wirken sich alle unterschiedlich auf die Wahrnehmung des Menschen aus. So ergibt sich ein allgemeines Ranking, das erklärt, welche Attribute zur Kodierung quantitativer und qualitativer Werte den höchsten Grad an Wahrnehmungsgenauigkeit ermöglichen – also welche Attribute sich am besten für die Visualisierung von Daten eignen, natürlich abhängig vom Ziel und Zweck der Visualisierung.

Wenn wir uns Beispiel 1 anschauen, erkennen wir, dass es bei den Linien wesentlich einfacher ist, schnell den größeren Wert zu bestimmen, als bei den Kreisflächen – das Attribut "Länge" ist daher wesentlich höher im Wahrnehmungsranking eingeordnet, als das Attribut Fläche.

Beispiel 2: Farbkodierung vs. Symbolkodierung

In diesem Beispiel ist gut zu erkennen, dass es einfacher ist, die Verbindungen durch eine Farbvariation zu unterscheiden, als eine Variation über die Form. Aus diesem Grund ist auch der Farbton bei qualitativ nominellen Werten wesentlich höher eingestuft als die Form.

Diagrammtypen

Die visuelle Kodierung ist also das theoretische Fundament der Datenrepräsentation. Die praktische Anwendung hingegen, setzt sich aus verschiedenen Diagrammtypen zusammen. Diagramm, abgeleitet aus dem Griechischem διάγραμμα diágramma („geometrische Figur oder Umriss“), bezeichnet allgemein die visuelle Darstellung von Informationen.

Es gibt eine Vielzahl an Diagrammtypen mit unterschiedlichen Ausprägungen. Man kann jedoch grundsätzlich jedes Diagramm einer der nachfolgenden CHRTS-Kategorien zuordnen.

• Categorical 
  Kategorische Diagramme dienen dazu, Kategorien und deren Verteilung auf quantitative Werte zu vergleichen. Typische kategorische Diagramme sind z. B. Balkendiagramme, Punktdiagramme oder Ballondiagramme.
• Hierarchical
  Hierarchische Diagramme stellen Teil-zu-Ganzes-Beziehungen und Hierarchien grafisch dar. Typische hierarchische Diagramme sind z. B. Kreisdiagramme, gestapelte Balkendiagramme oder Dendrogramme.
• Relational
  Relationale Diagramme stellen Beziehungen grafisch dar, um Korrelationen und Verbindungen zu untersuchen. Typische relationale Diagramme sind z. B. Streudiagramme, Matrixdiagramme oder Akkorddiagramme.
• Temporal
  Zeitliche Diagramme visualisieren Trends und Aktivitäten über die Zeit hinweg. Typische zeitliche Diagramme sind z. B. Liniendiagramme, Flächendiagramme oder Gantt-Diagramme.
• Spatial
  Räumliche Diagramme bilden räumliche Muster durch Überlagerungen und Verzerrungen. Typische räumliche Diagramme sind z. B. Heat Maps, Routen- oder Rasterkarten.

Fazit

Andy Kirk betrachtet mit seinem Konzept die Datenvisualisierung ganzheitlich und als quasi eigenständige Designdisziplin.

Im Mittelpunkt steht klar der Nutzer – die Aufgabe einer Datenvisualisierung ist es, Nutzern auch komplizierte und komplexe Daten auf möglichst verständliche Art und Weise zu präsentieren. Was so einfach klingt, ist eine komplexe Angelegenheit, die mit den drei Stufen des Verstehens und den Designprinzipien bereits vor der eigentlichen Entwicklungsarbeit beginnt und auch beginnen muss. Der vorgestellte Workflow macht es ja sehr deutlich, dass vor dem eigentlichen Entwicklungszyklus grundsätzliche Fragen geklärt werden müssen.

Ich bin auch persönlich der Meinung, dass gerade die Stufe 3 des Workflows, auf der die redaktionelle Sichtweise festgelegt wird, in Projekten oft zu kurz kommt, da meist einfach irgendein Standard-Diagrammtyp gewählt wird. Gerade wenn es darauf ankommt, für ein bestimmtes Dataset und einen definierten Blickwinkel die intuitivste Datenrepräsentation zu wählen, fehlt es sicherlich den meisten an Erfahrung. Mit ein wenig Geduld sollte man lernen können, komplexe Informationen mithilfe von Markierungen und Attributen in Form von CHRTS-Diagrammtypen visuell zu kodieren. Für die Entwicklung sollte man sich als Konstruktionshilfe das Ranking der Wahrnehmungsaufgaben immer vor Augen führen.

Übrigens: Wie oben beschrieben, habe ich mich im Rahmen eines 4+1-Projektes mit dem Thema beschäftigt. Wer mehr zu unserem Weiterbildungskonzept wissen möchte, schaut sich am besten im Blog um.