Datenvisualisierung und Dashboard-Design gehören naturgemäß zu den Themen, auf die wir bei unserer Arbeit mit und für unsere Kunden allergrößten Wert legen. Um diesen gestalterischen Schwerpunkt unserer Arbeit zu unterstreichen, haben wir in den vergangenen Monaten ein M2 Whitepaper Dashboard Design entwickelt.

Christoph Maurer, Data Visualization Specialist und Frontend-/ Software-Developer, verantwortet im Team von M2 die Themen Design und Visualisierung. In Kooperation mit Ewa Tuteja und Björn Leffler wurde auf Basis theoretischer Grundlagen und vielfältiger Praxis-Erfahrung ein 25-seitiges Whitepaper konzipiert und entwickelt.

Die Essenz dieses Whitepapers lesen Sie im folgenden Artikel. Das gesamte Dokument stellen wir Ihnen am Ende des Artikels als Download zur Verfügung. Sollten Sie Fragen oder Anmerkungen zu diesem Thema haben, zögern Sie nicht, uns zu kontaktieren.

 

Grundlagen für Datenvisualisierung & Dashboard-Design

von Christoph Maurer

Bei der Datenvisualisierung und Dashboard-Erstellung legen wir großen Wert auf Design-Aspekte. Es geht nicht nur um die Wahl des richtigen Diagramms oder der richtigen Farbe, sondern auch um die Anwendung von Design-Prinzipien, um klare Aussagen zu machen und sicherzustellen, dass die Benutzerfreundlichkeit gewährleistet ist. Diese Prinzipien können daher als Richtlinien angesehen werden. Wenn man sie Schritt für Schritt befolgt, erhält man ein perfektes Dashboard.

Als Analogie betrachten wir diesen Prozess als das Schreiben eines Buches. Zuerst müssen Sie den Wortschatz kennen und die Grammatik verstehen. Sobald diese Voraussetzungen erfüllt sind und Sie eine Geschichte oder ein ganzes Buch schreiben wollen, beginnen Sie am besten damit, einige Ideen zu entwickeln und die gesamte Handlung zu skizzieren. Wenn Sie mit dem Schreiben beginnen, ändern Sie schließlich Teile oder entwickeln neue Ideen und ordnen die Struktur neu.

Unsere Analogie sieht so aus:

 

Was ist Datenvisualisierung?

Charles Minards Karte von Napoleons katastrophalem russischen Feldzug zeigt die Anzahl der Truppen während des Kreuzzugs, die Tufte als „beste statistische Grafik aller Zeiten“ bezeichnet.

Zunächst definieren wir, was wir unter Datenvisualisierung verstehen. Die Wahrnehmung einer Datenvisualisierung ist ein dreistufiger Prozess, der durch Andy Kirks Definition motiviert ist:

„Die Darstellung und Präsentation von Daten zum besseren Verständnis.“

Wenn Sie sich eine Datenvisualisierung ansehen, konzentrieren Sie sich wahrscheinlich zuerst auf ihre Wahrnehmung: Was sind die Elemente, die Sie in der Visualisierung sehen, was sind ihre Eigenschaften und wie verhalten sie sich zueinander? Wenn man dann anfängt, darin einen Sinn zu suchen, fragt man sich vielleicht, was es einem persönlich sagt, ob es überhaupt sinnvoll, ob es womöglich auch überraschend ist. Daraus können Sie vielleicht eine Botschaft oder Einsichten gewinnen und schließlich Handlungsempfehlungen ableiten.

 

Grundlagen der Visualisierung

 

Dies ist ein Vergleich verschiedener Attribute, die einige Menschen sofort und sehr genau miteinander vergleichen können, wie etwa Längen, Höhen oder 2D-Positionen. Andere, wie z.B. Winkel oder Flächen, sind schwieriger zu vergleichen.

Die Grundlagen der Visualisierung umfassen die grundlegenden visuellen Prinzipien, die bei falscher Anwendung seltsame Effekte hervorrufen können und daher irreführend sein können. Prinzipien wie Symmetrie, Nähe, Verbundenheit, Kontinuität, Ähnlichkeit und die präattentiven Prinzipien helfen Ihnen, eine Visualisierung effektiv zu gestalten. Indem Sie die Komplexität reduzieren, stellen Sie sicher, dass Ihre Botschaft so klar wie möglich bei Ihrem Publikum ankommt.

Auf dieser Grundlage wissen Sie jetzt, warum das Balkendiagramm und das Scatterplot zwei der am häufigsten verwendeten Diagrammtypen sind und warum Torten- oder Bubblecharts nicht so einfach zu lesen sind: Für den Menschen sind zweidimensionale Elemente schlichtweg leichter zu vergleichen als Winkel oder Flächen.

Bei der Typografie sind Legitimität und Hierarchie ebenso wichtig wie die Einhaltung der Corporate Design-Richtlinien des Unternehmens, für das Sie das Dashboard erstellen. Mit verschiedenen Schriftfamilien, Varianten und Größen können Sie Titel, Untertitel, Lauftext oder Hinweise dekodieren und so eine Hierarchie aufbauen.

Verschiedene Farbsysteme helfen Ihnen mit unterschiedlichen Mitteln. HLS zum Beispiel ist viel einfacher, wenn Sie eine Folge von Farben erstellen wollen. Auch die maximal sieben unterscheidbaren Merkmale sind hier entscheidend: Mehr als sieben Farben zu unterscheiden ist fast unmöglich.

 

Markierungen, die mit quantitativen, kategorialen oder relationalen Attributen gekennzeichnet sind, sind Grundbausteine, mit denen Sie Informationen visuell dekodieren.

 

Diagrammatik

Beispiele für verschiedene Achsendiagramme, hauptsächlich Balkendiagramme.

Unter Diagrammatik verstehen wir die Idee, dass es ähnlich wie bei Texten und Bildern eine Wissenschaft über Diagramme gibt. Sie können sie danach unterscheiden, was sie dekodieren oder abbilden. Grob kann man sie in Achsdiagramme, Graphen, Venn-Diagramme, Kartographie und Tabellen einteilen.

 

Darstellung von Daten

Drei Arten von quantitativen Nachrichten: Zeitreihe, Abweichung und Korrelation.

Laut Stephen Few gibt es nur acht quantitative Botschaften, also Formen, in denen Daten dargestellt werden. Dies sind: Zeitreihen, Rankings, Part-to-Whole, Abweichungen, Häufigkeitsverteilungen, Korrelationen, Geodaten und Nominalvergleiche. Sie unterscheiden sich in der Beziehung der Werte zueinander und zeigen damit die inhärente Beziehung der Werte.

Entscheidend ist dabei, mit welchem der präzisen Diagramme (Balken-, Linien- oder Streudiagramm) Sie welche quantitative Aussage am besten visualisieren. Für eine Zeitreihe verwenden Sie beispielsweise am besten ein Liniendiagramm, da dieser Diagramm-Typ am besten Trends oder Entwicklungen in zeitlichem Kontext darstellt, da er sich mehr auf den Gesamttrend als auf die separaten werte konzentriert.

 

Der Visual Analytics Prozess

 

 

Der Visual Analytics Prozess ist ein bekannter und etablierter Prozess, in dem der kreative Prozess der Datenverarbeitung, des Testens verschiedener Visualisierungen, der Gewinnung von Erkenntnissen daraus und motivierender Aktionen stattfindet. Zu Beginn dieses Prozesses stellen Sie eine erste Frage oder Aufgabe, was zu verschiedenen Visualisierungen und/oder Diagrammen führt, die dann in einem Dashboard operationalisiert und einer großen Anzahl von Benutzern zur Verfügung gestellt werden können.

 

Dashboard-Erstellungs-Prozess

Ausgehend von unserer bisherigen Analogie haben wir unser Vokabular gelernt, die Grammatik verstanden und einige Skizzen von kurzen Textblöcken angefertigt. Der nächste Schritt ist nun, alles in einen Kontext und eine Struktur zu bringen, also ein ganzes Buch zu schreiben. Aus unserer täglichen Arbeit mit Kunden unterschiedlicher Größenordnungen haben wir einen elfstufigen Dashboard-Erstellungsprozess entwickelt, der Best Practices und verschiedene Ratschläge zur Erstellung ästhetisch ansprechender, Styleguide-konformer, gut strukturierter und benutzerfreundlicher Dashboards enthält.

Zunächst wollen Sie alle Anforderungen (KPIs, Medientypen, Benutzerrollen, Datenbanken) erfassen und CI-Styleguides nachschlagen. Im nächsten Schritt legen Sie das Grundgerüst (Kopf-, Fuß- und Inhaltsbereich) und die Vorlagen fest, dann wählen Sie aus, welche Fragen Sie wo auf dem Dashboard beantworten wollen und definieren, welche Diagramme Sie dafür verwenden möchten.

Anschließend erfolgt die Farbcodierung (Primärfarben für Überschriften und Sekundärfarben für die Dekodierung von Kategorien in Diagrammen). Sie wenden weitere Formatierungen wie zum Beispiel unterschiedliche Schriftarten an. Als nächstes platzieren Sie Filter auf Ihrem Dashboard, lokal für nur ein Diagramm oder global für das gesamte Dashboard. Anschließend standardisieren Sie Elemente und Abstände und prüfen, ob die Ausrichtung der Elemente stimmt. Im nächsten Schritt definieren und implementieren Sie Interaktivität und im letzten Schritt zeigen Sie Ihrem Kunden das Dashboard, sammeln Feedback ein und passen Ihre Arbeit noch einmal an.

Die Vorteile eines jeden Schrittes sind beträchtlich. Sie erreichen, dass das Dashboard vom Endnutzer in hohem Maße akzeptiert wird und dass die gewünschten Einblicke effektiv und smart erreicht werden. Durch die Anwendung einfacher Designregeln ist das Dashboard ästhetisch ansprechend, leicht zu lesen und interaktiv verwendbar.

Wenn Sie Interesse an tieferen Einblicken in diesen Prozess haben und weitere Informationen zu unserem Workshop „Grundlagen der Datenvisualisierung & Dashboard Design“ erhalten möchten, zögern Sie nicht, uns zu kontaktieren.

Wenn Sie unser Whitepaper „Dashboard Design“ herunterladen möchten, füllen Sie bitte das nachstehende Formular aus.

Joyful designing!

Ihr M2. Team.

 

Download des Whitepapers





Datenschutz