5 Layout Tipps für Business Intelligence Dashboards

Oder: Was Michelangelo uns über gutes Layout beibringen kann

Geht Ihnen das manchmal auch so? Sie nutzen ein Self-Service-BI Tool und erstellen Visualisierungen für Ihren Fachbereich, das obere Management oder auch für Kund*innen. Jede einzelne Visualisierung ist aussagekräftig. Doch Schwierigkeiten ereilen Sie, wenn Sie versuchen, diese in einem Dashboard zu kombinieren. Es wirkt überladen und unübersichtlich. Sie sind einfach nicht zufrieden.  

Oder kennen Sie dieses Szenario? Sie sind täglich auf Reports und Ad-Hoc-Analysen angewiesen. Aber die Dashboards sind schwer zu bedienen, die Informationsdichte ist gering und Sie brauchen viel zu lange, um Ihr Erkenntnisinteresse zu befriedigen.

In beiden Fällen liegen die Schwierigkeiten in der Layoutgestaltung. Unter Layout versteht man die absichtsvolle Platzierung von Objekten wie Text oder Bild auf einem Dashboard, sodass die Anordnung den Inhalt unterstützt.  

Ein schlechtes Layout ist einfach zu identifizieren: zu unruhig, zu düster, zu bunt, zu leer, zu voll - einfach nicht richtig. In diesem Blogartikel gebe ich Ihnen 5 Tipps zu gutem Layout. Ich - und Michelangelo.

Meine Tipps können Sie direkt anwenden und sie sind nicht Tool-abhängig. Ich nutze zur Dashboard-Erstellung Tableau, deshalb beziehen sich die Beispiele zur Umsetzung auf diese Software. Ich habe diese Tipps während meiner Tätigkeit als Data Artist entwickelt – sie basieren auf Erfahrungen aus meinem Kunststudium und der Tätigkeit als Künstlerin.

Ein Dashboard besteht aus mehreren Layout-Elementen. Dominant ist meist der header, der aus einer Überschrift und optional verschiedenen groß geschriebenen Kennzahlen besteht, die eine fokussierende Wirkung haben. Die navigation ist ein optionales Element und erlaubt, interaktive Elemente wie Filter und Parameter platzsparend unterzubringen. Die zentralen Visualisierungen liegen im main content, der quantitativ den größten Teil des Dashboards ausmacht. Ein ebenfalls optionales Element ist der footer, der unterste Bereich des Dashboards.

Jedes Element besitzt mindestens ein Objekt. Objekte können einzelne Visualisierungen oder auch Textbausteine, Filter oder Piktogramme sein. Sie bilden den Inhalt des Dashboards.

Jedes Dashboard-Layout ist eine individuelle Anfertigung. Die Art und Weise, wie Menschen Sinneseindrücke visuell verarbeiten ist jedoch erforscht und kann für den Bau von Dashboards genutzt werden.

Welche Bewegungen macht Ihr Auge, während Sie diese Zeile lesen? Das Auge bewegt sich von links nach rechts. Am Ende der Zeile springt es wieder nach links: nur etwas tiefer. Die Leserichtung ist eine vertraute Augenbewegung, die wir für den Bau von Dashboards nutzen können.

Eyetracking erlaubt es, eine Aussage darüber zu treffen, wie sich das Auge über eine Seite mit Inhalten bewegt. Die wichtigsten Inhalte sollten auf der primären Blickachse platziert werden und größer sein als die Objekte der Umgebung. Drei Schemata möchte ich hier vorstellen.

Im F- Schema scannt das Auge kurz Inhalte in der horizontalen, während es sich schnell abwärts bewegt. Dieses Schema eignet sich gut, wenn Sie wie im Beispielbild eine navigation eingebaut haben, wenn Sie viele Visualisierungen unterbringen möchten und diese eher horizontal sind (z.B. Liniendiagramme).

Im L Schema fährt das Auge entlang der navigation und gelangt direkt zum main content des Dashboards. Es eignet sich für die Platzierung von wenigen, aber großen Visualisierungen (z.B. Karten).

Im Z- Schema fährt das Auge in einem Z-Bewegung alle vier Eckpunkte des Dashboards nacheinander ab. Dieses Schema bietet Orientierung bei Dashboards ohne Navigation.

Die Schematas bieten Orientierung bei Überlegungen, wo die wichtigsten und größten Visualisierungen am besten platziert werden.

Am Anfang einer Karriere als Data Artist erlebt man das häufiger: Die aussagekräftigen Visualisierungen sind erstellt und man möchte diese nun auf einem oder mehreren Dashboards anordnen. Dabei verliert man schnell den Überblick über die Themen, vergisst eine Visualisierung und muss das ganze Dashboard bei jeder Änderung neu aufbauen. Zu viele Farben lassen das Dashboard unruhig und zu bunt wirken.

Um sich für ein geeignetes Schema zu entscheiden, gilt es nun, die Visualisierungen inhaltlich sinnvoll und konsistent zu kombinieren. Die Wahl der gleichen Farben für gleichen Inhalt ist elementar.

Die Gefahr besteht, bei vielen Visualisierungen den Überblick zu verlieren und mehrmals Objekte hinzufügen zu müssen. Viel Zeit wird verloren beim Neuanordnen und Formatieren.

All dies lässt sich mit einer schnellen Vorskizze vermeiden. Ich empfehle Stift und Papier, ich bin damit am schnellsten. Aber auch Power Point eignet sich dafür.

• Ich mache eine schnelle Skizze jeder Visualisierung auf eine leere Karteikarte und vermerke, wie sich ein Zeit- oder Dimensionsfilter auswirken würde.
• Ich spiele mit verschiedenen Kombinationen herum, bevor ich mich für eine Version entscheide.
• In einer schnellen Skizze lege ich die Größe und Anordnung der Visualisierungen fest und vermerke, wo ich Filter, Überschriften, Piktogramme usw. platzieren möchte.
• Die technische Umsetzung ist dank der detaillierten Skizze einfach zu realisieren.
• Eine konsistente Farbwahl beizubehalten fällt mit Skizze leichter.

Die größte Herausforderung in einem Dashboard ist es, die einzelnen Elemente visuell voneinander abzugrenzen. Ziel ist, das Dashboard übersichtlich, aufgeräumt und gut strukturiert wirken zu lassen.

Leerer Raum auf einem Dashboard ist gut - an der richtigen Stelle. In Tableau empfehle ich die Layout-Funktion „innerer/äußerer Abstand“. Wichtig ist dies vor allem, wenn horizontale und vertikale Container im Modus „nebeneinander“ verwendet werden. Mit der Funktion „innerer/äußerer Abstand“ gewinnen die Objekte Abstand zu den Containergrenzen – und erhalten so eine optische Trennung voneinander.

Im Dashboard rechts wurden die Überschriften dunkel hinterlegt – sie wirken ein wenig wie zusammengezogene Augenbrauen. Auf den ersten Blick wirkt das Dashboard dadurch strukturiert, aber die Überschriften lenken von den helleren Balkendiagrammen und feinen Liniendiagrammen ab.

Künstler und Architekten in der Antike und in der Gegenwart nutzen den goldenen Schnitt, um das Größenverhältnis von (Teil-)Objekten zueinander zu bestimmen. Proportionen im goldenen Schnitt wirken auf den Menschen angenehm und harmonisch. In der Natur sind sie als Wachstumsmuster z.B. in Sonnenblumen zu finden.

Der goldene Schnitt, ca. 1,6, ist das Teilungsverhältnis einer Strecke in zwei Teile, dem Maior und dem Minor. Das Verhältnis der gesamten Strecke zum Maior ist das gleiche, wie das Verhältnis vom Maior zum Minor.

Wie hilft dieses Prinzip beim Dashboard-Layout? Für ein dynamisches, organisches Dashboard-Layout sollten drei Proportionen vermieden werden:

1. Fläche A sollte nicht genau der Hälfte von Fläche B entsprechen – dies wirkt starr und zu symmetrisch.
2. Fläche A sollte nicht nur ein wenig kleiner sein als Fläche B – dies wirkt unabsichtlich und irritierend.
3. Fläche A sollte nicht zu viel kleiner sein als Fläche B – sonst verschwindet der Informationsgehalt optisch.

Der goldene Schnitt dient zur Orientierung beim Festlegen der Größe einzelner Dashboard-Objekte.

Unser Gehirn verknüpft bereits gewisse Farben mit eindeutigen Bedeutungen. Das können wir im Dashboard-Design nutzen. Forscher wiesen im Labor nach, dass Farben wie Rot oder Gelb die Aufmerksamkeit steigern, dagegen wirken grüne und blaue Farbtöne beruhigend.

Die Grundfarbe(n) werden für Balken oder Linien genutzt, die nicht einer bestimmten Kategorie oder Wert zugeordnet sind. Die Schriftfarbe muss nicht immer schwarz sein: ein sehr schwarzes Blau eignet sich ebenfalls und gehört deshalb zu den Grundfarben. Neutrale, ruhige Farbtöne oder Pastellvariationen kräftiger Farbtöne sind gut geeignet, da sie etwa 70% des Dashboards ausmachen und nicht zu überwältigend wirken sollen.

Signalfarben wecken die Aufmerksamkeit des Betrachtenden. Deshalb werden sie meist in größtmöglichem Kontrast zu den Grundfarben gewählt. Kräftige, gesättigte Farben eignen sich gut, um die Aufmerksamkeit des Betrachtenden zu lenken. Wird ein rot-grün Verlauf gewählt, so ist zu beachten, dass auch Grün die Rolle einer Signalfarbe spielt. Mit einem Farbenblindheitssimulator* lässt sich überprüfen, ob der Rot Grün Kontrast auch mit Beeinträchtigung zu sehen ist.

* Mit diesem Farbengenerator können Sie auf einander abgestimmte Farben generieren und diese mit einem Simulator überprüfen:
https://coolors.co

Gutes Layout hat das Ziel, Informationen optimal zu präsentieren, Interaktivität nutzerfreundlich zu machen und angenehm lesbar zu sein. Es lohnt sich, in gutes Layout zu investieren: es verbessert die Datenkommunikation.

Neben Übung und strukturiertem Feedback kann ein Workshop den gewünschten Fortschritt herbeiführen.

Suchen Sie nach konkreten Layout-Vorschlägen? Auf Tableau Public habe ich mehrere Dashboard-Layouts nachgebaut und veröffentlicht.

Quellen:
https://coschedule.com/blog/color-psychology-marketing/
https://www.usability.de/usability-user-experience/publikationen/google-eye-tracking-studie.html
https://99designs.de/blog/design-tipps/farben-marketing-werbung/
https://en.wikipedia.org/wiki/Golden_ratio