8 Tipps, die Sie beim Design Ihres nächsten Dashboards beachten sollen

Ein Dashboard ist dazu da, sich basierend auf Daten regelmäßig, oft mehrmals am Tag, einen Überblick über die aktuelle Situation zu verschaffen.

So wie wir in einem Auto-Cockpit immer wieder unsere Geschwindigkeit kontrollieren, möchten wir auch, dass ein kurzer Blick auf ein Dashboard reicht, um sicher zu sein, dass alles im "grünen Bereich" ist.

In der Realität genügen diesem Anspruch nur wenige Dashboards. Sich einen Überblick zu verschaffen dauert oft mehrere Minuten – Zeit die man nicht immer aufbringen kann und will. Die Folge? Probleme bleiben unentdeckt, man wiegt sich womöglich in falscher Sicherheit.

Wollen wir effiziente Dashboards, dann müssen wir uns die herausragenden kognitiven Stärken des menschlichen Auges zunutze machen.

In diesem Artikel stelle ich 8 Tipps zur Gestaltung effizienter Dashboards vor, die für Benutzer und Softwareentwickler gleichermaßen anwendbar sind.

Auf effektvolle Graphen verzichten

Ein sehr häufiger Fehler in Dashboards ist der Einsatz von effektvollen Graphen. Dashboards stammen aus dem Automobilbereich und damit ist es auch zu erklären, warum Informationsdashboards oft dem Cockpit eines Autos gleichen – die Anzeige von Werten mit Tachometer-Controls, die mit Chromrändern und Verspiegelungseffekten möglichst realitätsnah aussehen, ist die Folge.

Was kann daran falsch sein?

Es gibt zwei Hauptgründe um von Einsatz derart verschnörkelter Graphen abzusehen.

1. Ablenkung. ich komme im Verlauf dieses Artikels noch genauer auf die richtige Verwendung von Farbe zu sprechen, aber eines vorweg: der Einsatz von zu vielen Farben und Formen behindert den klaren Blick auf das Wesentliche, nämlich die klare Darstellung der Daten. Wenn viele visuelle Elemente eines Graphen, zum Beispiel Chromränder und Verspiegelungseffekte, nicht dazu dienen, etwas über die darzustellenden Daten auszusagen, so wird die eigentliche Botschaft in den Daten verwässert. Es verhält sich dabei ähnlich wie mit dem Signal-Rausch-Verhältnis in der Nachrichtentechnik. Je mehr Rauschen, desto schwieriger das Herausfiltern des Signals.
2. Platzproblem. Außerdem benötigen derartige Graphen oft sehr viel Platz – wo es doch so wichtig ist, dass gerade ein Dashboard alles auf einer Bildschirmseite des Zielgeräts darstellt. Mehr dazu weiter unten.

Zur Veranschaulichung sehen Sie sich die beiden Abbildungen unten an. Im ersten Bild ein effektvolles Dashboard mit drei Tachometer-Controls. Darunter eine Anordnung von 12 sogenannten Bullet Graphs.

Auf den ersten Blick ist die obere Visualisierung sicherlich aufregender, ein Eyecatcher sozusagen. Die untere Variante ist dagegen unaufgeregter, aber wenn es darum geht, ein Dashboard tagtäglich zu verwenden, der ersten überlegen:

• Der Blick auf die Daten wird nicht durch Effekte verstellt.
• Außerdem werden zwölf anstatt drei Werte auf gleich großem Platz dargestellt.
• Und: Lassen sich Werte in einer Anordnung von zwölf Tachometer untereinander besser vergleichen als in einer Anordnung von zwölf Bullet Graphs? Was denken Sie?

Auf eine Bildschirmseite beschränken

Der zweite Tipp zur Gestaltung von effektiven Dashboards schließt am vorigen an. Verwende ich Graphen und Diagramme, die viel Platz benötigen, so gelingt es mir nicht eine ganz wichtige Dashboard-Regel einzuhalten – nämlich, dass ein Dashboard auf einer Bildschirmseite des Zielgeräts Platz haben soll.

Aber warum ist das so wichtig? Das hängt damit zusammen, dass wir über einen mit dem Arbeitsspeicher eines Computers vergleichbaren, für visuelle Vergleiche hoch-effizienten visuellen Speicher verfügen. Bilder, die sich gleichzeitig darin befinden, lassen sich von unserem Gehirn hervorragend und schnell vergleichen.

Allerdings ist dieser visuelle Speicher in seiner Kapazität beschränkt, denn es können lediglich drei bis vier visuelle Bilder auf einmal im Speicher gehalten werden. Wenn eines aus dem Blickfeld verschwindet, wird das Bild auch aus dem visuellen Speicher gelöscht. Vergleiche werden ungleich mühsamer und zweitaufwändiger.

Wir erleben diese Einschränkung tagtäglich bei der Arbeit mit dem Computer. Was tun wir wenn wir zwei Excel-Listen miteinander vergleichen wollen? Höchstwahrscheinlich platzieren wir die beiden Listen nebeneinander – die soeben genannte Leistungsfähigkeit, aber auch die Einschränkungen des visuellen Speichers sind der Grund dafür.

Für das Design von Dashboards heißt das, Scrolling und Ein- / Ausblendbereiche zu vermeiden. In beiden Fällen würden die Grenzen des visuellen Speichers verletzt und der Betrachter würde ungleich mehr Zeit benötigen, um sich einen täglichen Überblick zu verschaffen.

Schnelle Interpretation ermöglichen

Ein Dashboard ist vorwiegend dafür da, ein aktuelles Lagebild zur Verfügung zu stellen, sodass ein Benutzer möglichst schnell und einfach erkennt, ob alles im Lot ist oder akuter Handlungsbedarf besteht.

Reicht es also aus, wenn ein Dashboard möglichst aktuelle Werte anzeigt?

Leider nicht ganz. Damit die präsentierten Daten auch bewertet werden können, müssen sie in Kontext gesetzt werden. Als Veranschaulichung dienen die folgenden beiden Abbildungen.

Was wir im ersten Bild sehen, ist ein Balken der den Umsatz des aktuellen Jahres mit 260.000 Dollar ausweißt. Aber wie ist die Zahl zu interpretieren? Sind wir mit dem Umsatz in Plan oder hinken wir diesem hinterher. Haben wir uns zum Vergleichszeitraum im Vorjahr verbessert oder verschlechtert?

Dieser einfache Balkengraph kann, wie in der zweiten Abbildung gezeigt, in einen sogenannten Bullet Graph umgewandelt werden.

Die drei Farbschattierungen im Hintergrund ermöglichen eine qualitative Orientierung. Endet der Balken im dunkelblauen Bereich, ist der Umsatz als sehr schlecht einzustufen. In vorliegenden Fall liegt der Wert allerdings im hellblauen Bereich und ist folglich in Plan. Der senkrechte Strich markiert den etwas geringeren Umsatz zum selben Zeitpunkt im Vorjahr.

Richtig in Kontext gesetzt, genügt ein kurzer Blick, um zu erkennen, ob ein Wert passt oder Handlungsbedarf besteht.

Effiziente Graphen verwenden

Der nächste Tipp beschäftigt sich damit, dem Benutzer eine möglichst schnelle Erfassung der visualisierten Daten zu ermöglichen. In Gesprächen mit Anwendern höre ich oft den Wunsch, ein Dashboard solle in der Lage sein innerhalb einer Minute einen täglichen Überblick zu verschaffen.

Hier ein wichtiger Faktor, der dabei hilft, dass ein Dashboard möglich effizient kommuniziert:

Damit ein Mensch die Bedeutung von visualisierten Daten so schnell wie möglich erfassen kann, ist das Ausnutzen der sogenannten preattentive attributes essentiell. Preattentive attributes sind visuelle Muster bzw. Merkmale, die vom menschlichen Auge parallel und sozusagen unbewusst vorverarbeitet werden. Im Gegensatz dazu, erfolgt eine bewusste Auswertung eines visuellen Musters, zum Beispiel im Fall von Buchstaben, immer sequentiell und damit rund 60.000 mal langsamer als bei preattentive attributes. Colin Ware hat in seinem Buch Information Visualization: Perception for Design insgesamt 17 dieser visuellen Merkmale beschrieben.

Bar Charts anstatt Pie Charts verwenden

Eines dieser Attribute ist die Linienlänge, die bei Balkendiagrammen zum Tragen kommt. Einerseits erkennen wir "auf einen Blick" den längsten Balken und können so den größten Wert sofort ausfindig machen. Andererseits erlaubt die Kodierung von Zahlenwerten in Linienlänge schnelle und genaue Vergleiche.

Anders verhält es sich mit Kreisdiagrammen, oder sogenannten Pie Charts. Hier werden quantitative Daten als Kreissegmente, also Flächen dargestellt. Zwar zählt die Größe einer 2D-Fläche auch zu den preattentive attributes – schließlich können wir leicht feststellen, ob ein Kreissegment größer ist als ein anderes. Wir tun uns aber schwer, eine genauere Differenz zwischen zwei Flächen abzuschätzen.

Somit gilt als Faustregel: wenn man die Teile eines Ganzen graphisch kommunizieren möchte, wie es zum Beispiel bei Wahlergebnissen der Fall ist, dann sind Balkendiagramme gegenüber Kreisdiagrammen zu bevorzugen.

Achtung bei Area Charts

Ein weiterer gern verwendeter Graph ist der Area Graph wie in der Abbildung zu sehen.

Bei der Verwendung von Area Charts kann es leicht passieren, dass es aufgrund des Datenverlaufs Überlappungen gibt.

Ein gut gemeinter, aber eher weniger effektiver Lösungsansatz ist, dass die Flächen halbtransparent dargestellt werden. Das Resultat sind Farbmischungen, die eigentlich nichts aussagen, aber das Auge ablenken, wo doch der Verlauf der einzelnen Zahlenreihen das Wesentliche ist. Generell sind anstatt Area Charts Liniendiagramme zu bevorzugen.

Die Krux mit Stacked Area Charts

Aber was ist mit Stacked Area Charts? Deren Einsatz ist besonders dann verlockend, wenn es darum geht, Teile-vom-Ganzen Beziehungen über Zeit darzustellen.

Wie die Abbildung zeigt, ist der Marktanteil im Browser-Markt ein gutes Beispiel für ein derartiges Datenset.

Keine Fläche (Area) verdeckt eine andere und der Graph ist außerdem recht hübsch anzuschauen.

Aber es ist Vorsicht geboten, denn die Wahrnehmung der Daten wird durch diese Darstellungsform vor allem im ersten Blick maßgeblich verzerrt.

Nehmen wir den Marktanteil des Internet Explorers als Beispiel. Aufgrund der beiden Konturen, die ja im Wesentlichen nichts anderes als zwei Linien sind, würde man auf den ersten, unbewussten Blick meinen, dass der Marktanteil gestiegen ist. Die ansteigenden Konturen suggerieren im Unbewussten Steigerung. Erst beim bewussten Hinsehen, nämlich wenn man die Verjüngung der Fläche von links nach rechts betrachtet, erkennt man, dass der Marktanteil von 2004 auf 2011 von ca. 78% auf ca. 20% gefallen ist.

Die Neigung der beiden Linien ist ein markanteres Merkmal als die Form der Fläche. Und die Neigung der beiden Konturen wird schließlich durch den Marktanteil der darunter dargestellten Browser maßgeblich verfälscht. Versuchen Sie sich vorzustellen, wie die Fläche bzw. Area des Internet Explorer Marktanteils aussehen würde, wenn diese als erstes also ganz unten aufgetragen werden würde.

Ein weiteres Problem tut sich auf, wenn man fragt, wann Mozilla den Internet Explorer im Marktanteil überholt hat. Können Sie aufgrund des Stacked Area Charts den genauen Zeitpunkt ausmachen, wann dies der Fall war? Würden die Marktanteile als Linien dargestellt werden, wäre der Schnittpunkt der beiden Marktanteile sofort sichtbar.

Verzicht auf 3D Charts

Ein Sonderfall sind effektvolle 3D Charts. Sicherlich gibt es Spezialanwendungen, wo die Darstellung in 3D-Form geeignet ist, aber das 3D Diagramm in der Abbildung ist ein Beispiel für eine ungeeignete Datenrepräsentation.

Was sind also die Probleme von 3D Diagrammen?

Zum einen kann es leicht zu Verdeckungen kommen, wo eine Säule die Sicht auf eine dahinterliegende nimmt. Zum anderen ist es sehr schwierig, Werte anhand der Säulenhöhe zu vergleichen. Das dürfte auch der Grund sein, warum im Beispiel jede Säule zur Orientierung über Quermarkierungen verfügt, die die Werteskala andeuten. Dass ein 3D Diagramm auch sehr viel Platz einnimmt, sei nur der Vollständigkeit halber erwähnt.

Finger weg vom Farbentopf

Um zu zeigen, dass allzu bunte Dashboards zwar oft im ersten Moment Eyecatcher sind, sich dann aber die tägliche Praxis damit als mühsam und langwierig entpuppt, dient folgende Veranschaulichung:

Ist die Ziffer 5 in den beiden abgebildeten Feldern gleich oft vorhanden?

Nein. Im bunten Zahlenfeld ist die Zahl 5 19-mal vorhanden. Im anderen 14-mal. Beim Einsatz von Farbe ist Vorsicht geboten – der oftmalige Einsatz der beliebten Ampelfarben (Bild 1) ist oft mehr irreführend als hilfreich. Werte, die "in Ordnung" sind, in grün zu kodieren kann kontraproduktiv sein.

Um sich dem schwierigen Thema Farbe mit etwas mehr Bedacht annähern zu können, sind im Folgenden ein paar Faustregeln aufgelistet:

• Nur Zustände oder Daten, die die Aufmerksamtkeit eines Betrachters wecken sollen (beispielsweise wenn die Anzahl der Visits einer Webseite drastisch einbricht), sollen in Farbe gehalten sein. Daten, die sich hingegen im "Normalbereich" bewegen, sollen eine unauffällige Farbkodierung erhalten.
• Kontinuierliche Farbskalen sind nicht geeignet um quantitative Unterschiede zu repräsentieren, da Unterschiede in Farbton oder Farbhelligkeit für uns nicht absolut quantifizierbar sind. Wenn notwendig (z.B. im Falle von Heat Maps) sollte man Datenwerte in fünf bis zehn Gruppen segmentieren und Farbintensitäten zuordnen, die sich leicht unterscheiden lassen.
• Dashboard-Elemente, die nicht direkt Daten repräsentieren (non-data pixel wie Diagrammüberschriften, Beschriftungen im Allgemeinen), sollten wenn möglich nicht in Farbe gehalten sein, um nicht von der Datenrepräsentation (data-pixel) abzulenken.

Vorsicht bei Hintergrundbildern

In eine ähnliche Kerbe schlägt der nächste Tipp. Seien Sie vorsichtig beim Verwenden von Farbverläufen im Hintergrund wie in der Abbildung gezeigt. Unsere Augen werden getäuscht, denn der innere Balken hat eigentlich einen konstanten Farbton. Wenn Sie Lust haben, überzeugen Sie sich davon mit dem Color Picker Ihrer Wahl.

Nicht nur Farbverläufe können unsere Wahrnehmung täuschen, jegliche Art von Hintergrund beeinflusst die Wahrnehmung der Farben im Vordergrund.

Gewöhnungseffekt ausnutzen

Damit es wirklich gelingt, dem Anwender mit einem Dashboard innerhalb weniger Minuten einen Überblick zu verschaffen, ist es wichtig, den Gewöhnungseffekt auszunutzen.

Stellen Sie sich vor, Ihr Partner oder Ihre Partnerin räumt, währenddessen Sie in der Arbeit sitzen, im Übereifer die gesamte Küche um. Wie genervt wären Sie, wenn Sie abends etwas kochen möchten und nichts mehr da ist wo es jahrelang war? Die Pfanne, die Sie ohne Nachzudenken dutzende Male aus der Lade unter dem E-Herd genommen haben, müssten Sie jetzt plötzlich suchen.

Genauso verhält es sich mit User Interfaces und mit Dashboards im Speziellen. Ein Effizienzgewinn durch Gewöhnung stellt sich alleine dadurch ein, dass Daten immer an derselben Stelle in derselben Form dargestellt werden.

Fazit

Egal ob Sie eine Software benutzen, mit der Sie ohne Programmierkenntnisse Dashboards gestalten können oder Sie ein Softwareentwickler sind, der individuelle Dashboards erstellt: nutzen Sie die kognitiven Stärken des menschlichen Auges aus. Mit diesen 8 Tipps sind Sie dafür gewappnet.

Wer sich eingehender mit der Materie Dashboard Design beschäftigen möchte, dem sei das Buch Information Dashboard Design - Displaying data for at-a-glance monitoring von Stephan Few, einem der führenden Experten im Bereich Datenvisualisierung, ans Herz gelegt.