Gestalten Sie ansprechende Dashboards in AI/BI

Einführung

Jedes Unternehmen hat eine Markenidentität, die widerspiegelt, wofür es steht – geprägt von Logo, Farben, Schriftarten und Tonalität. Unsere bekanntesten Kunden wie Rivian und Wineshipping wenden diese Identität konsistent auf allen Kanälen an: im Marketing, in Präsentationen, auf Websites und in Produkten. Diese Konsistenz schafft Vertrauen bei Kunden und Partnern.

Dashboards sind ein entscheidendes Medium, über das Businessteams Daten mit Entscheidungsträgern und externen Partnern teilen. Dashboard-Autoren gestalten diese Erfahrung so, dass Betrachter ihre Daten leichter verstehen und wichtige Erkenntnisse gewinnen können. Damit Dashboards vertrauenswürdig und professionell wirken, müssen Autoren dafür sorgen, dass sie stimmig und markenkonform aussehen. Dashboard-Designs ermöglichen es Ihnen, das Erscheinungsbild einzelner Dashboards an Ihre Vorstellungen anzupassen.

Workspace-Designs gehen noch einen Schritt weiter, indem sie ein einheitliches Design auf alle Dashboards im Workspace anwenden, die dieses automatisch übernehmen. Dies kann natürlich bei Bedarf lokal erweitert und/oder angepasst werden. In diesem Beitrag stellen wir Ihnen einige Best Practices für das Design vor und erstellen ein benutzerdefiniertes Design, das Ihre Marke widerspiegelt.

Wir werden die Markenrichtlinien des fiktiven Unternehmens Wanderbricks als Beispiel verwenden, um ein Dashboard zu erstellen.

Möchten Sie direkt mitmachen? Wanderbricks ist ein fiktives Reise- und Gastgewerbeunternehmen, dessen Beispieldatensatz in jedem Databricks-Workspace verfügbar ist. Sie können das Dashboard mithilfe der Genie-Code-Prompts in jedem Abschnitt von Grund auf neu erstellen oder einfach mitlesen und die Ideen auf Ihr eigenes Dashboard übertragen. Öffnen Sie dazu einfach ein neues Dashboard und fügen Sie diesen Prompt ein. Er erstellt eine lokale Metrikansicht auf Basis des samples.wanderbricks-Schemas mit den Dimensionen und Kennzahlen, die wir im Folgenden verwenden werden.

#1 – Erstellen Sie ein Layout basierend auf den Anforderungen Ihrer Endnutzer

Ihr Raster einrichten

Der Zweck Ihres Dashboards sollte bestimmen, wie viele Spalten Ihr Raster-Layout hat. AI/BI bietet ein flexibles 12-Spalten-Raster, das Sie je nach Bedarf in 3, 4 oder 6 Spalten unterteilen können. Kompakte, technische Dashboards mit vielen Widgets profitieren von einem 6-Spalten-Layout, da so mehr Widgets auf einmal sichtbar sind. Ein Dashboard für Führungskräfte hingegen kann ein 3-Spalten-Layout nutzen, um die kognitive Belastung zu reduzieren.

Hierarchie erstellen

Beim Betrachten eines Dashboards scannt das menschliche Auge die Seite ganz natürlich, um die wichtigsten Informationen zu finden, bevor es mit dem Lesen beginnt. Je nach Design Ihres Dashboards folgt das Auge dabei einem von zwei Pfaden: einem F-Muster oder einem Z-Muster.

Bei Dashboards mit vielen Bildern und Visualisierungen folgt das Auge bei visuellen Layouts natürlicherweise einem Z-Muster. Es beginnt oben links mit Titeln und Filtern, verläuft diagonal nach unten und endet unten rechts bei detaillierten Visualisierungen und Tabellen.

Bei Dashboards, die eher text- oder tabellenlastig sind, kann sich ein F-Muster zeigen. Das Auge scannt die erste Zeile vollständig und bewegt sich dann auf der linken Seite nach unten. Bei beiden Mustern gilt dasselbe Prinzip: Platzieren Sie das Wichtigste dort, wo das Auge zuerst hinblickt.

Größe anpassen, um Akzente zu setzen

Wenn alles auf Ihrem Dashboard die gleiche Größe hat, sticht nichts hervor. Betrachter benötigen visuelle Hinweise, um zu wissen, worauf sie sich zuerst konzentrieren sollen. Schaffen Sie eine klare Hierarchie, indem Sie Ihre wichtigsten Metriken und primären Visualisierungen größer darstellen und sekundäre Elemente in den Hintergrund treten lassen.

Versuchen Sie, dies auf das Wanderbricks-Dashboard anzuwenden. Der erste Prompt erstellt eine Übersichtsseite für Führungskräfte, die der soeben beschriebenen Hierarchie folgt, und der zweite fügt eine kompaktere technische Seite hinzu, um zu zeigen, wie sich dieselben Prinzipien an eine andere Zielgruppe anpassen lassen.

#2 – Schriftart für Tonalität und Lesbarkeit auswählen

Die Wahl einer Schriftart für ein Dashboard ist ebenso eine funktionale wie eine ästhetische Entscheidung. Sowohl Ihre Markenidentität als auch Ihre Zielgruppe sollten bei der Wahl der Schriftart eine Rolle spielen. Ein eher technisches Publikum weiß vielleicht etwas Ausdrucksstarkes wie Space Grotesk zu schätzen, während ein Dashboard für Führungskräfte von einer vertrauteren und konservativeren Schriftart wie Arial profitiert. Das Ziel ist nicht nur Stil, sondern das Setzen des richtigen Tons.

Dashboards sind meist sehr informationsdicht, daher steht die Lesbarkeit an erster Stelle. Wir empfehlen serifenlose Schriftarten (Sans-Serif), da sie die Augen schonen. AI/BI unterstützt standardmäßig einige websichere serifenlose Optionen, darunter Arial, Tahoma und Verdana.

Wenn Sie Ihre eigene Schriftart verwenden möchten, können Sie Ihrem Dashboard jetzt eine lokale Schriftart hinzufügen. Dies ist besonders nützlich, wenn Dashboards aus Gründen der Konsistenz in Ihre internen Tools eingebettet werden. Für dieses Dashboard verwenden wir eine lokale Schriftart und stellen sie auf Space Grotesk ein.

Um die Lesbarkeit zu gewährleisten, wählen Sie Schriftfarben, die einen hohen Kontrast zum Widget-Hintergrund aufweisen. Verwenden Sie zur Überprüfung ein Tool für Barrierefreiheit wie den Adobe Color Contrast Checker. Im Light Mode vermeiden Sie reines Schwarz (#000000), da es auf einem hellen Hintergrund (#FFFFFF) sehr hart wirken kann. Im Light Mode sorgt ein leicht abgemilderter Ton wie #08141A auf #EBEBEB oft für ein angenehmeres Leseerlebnis. Im Dark Mode können Sie versuchen, #EBEBEB auf #08141A zu verwenden, um einen zu starken Kontrast zu vermeiden.

AI/BI unterstützt eine Reihe von websicheren und Open-Source-Schriftarten, die Sie mit Genie-Code anwenden können. Für Markenschriftarten verwenden Sie die Option für lokale Schriftarten unter Einstellungen > Schriftart > Lokale Schriftart verwenden. Probieren Sie diesen Prompt aus, um mit einer Open-Source-Option zu starten und Ihre Schriftfarben festzulegen.

#3 – UI-Farben definieren

Die 60-30-10-Regel ist ein grundlegendes Prinzip der Farblehre zur Erstellung ausgewogener, visuell harmonischer Designs. Designer wenden diese Regel in vielen Kontexten an – von der Farbwahl für ein Zimmer in Ihrem Haus bis hin zur Markenentwicklung für ein neues Unternehmen. Diese Designregel hilft Ihnen, Ihre Farbpalette in drei Farbkategorien zu unterteilen, und sorgt für das richtige Verhältnis, in dem jede Farbe im Gesamtdesign verwendet werden sollte:

• 60 % entfallen auf Ihre dominante Farbe, die den Gesamtton des Dashboards bestimmt und als Hintergrundfarbe für Canvas, Widgets und Rahmen dient.
• 30 % entfallen auf Ihre Sekundärfarbe, die Ihren Hintergrund mit Kontrast unterstützt. In Ihrem Dashboard ist dies die Schriftfarbe und die Palette für die Datenvisualisierung.
• 10 % entfallen auf Ihre Akzentfarbe, die Aufmerksamkeit genau dort erregt, wo sie benötigt wird. Verwenden Sie diese, um interaktive Elemente wie Filter, Tabs und Schaltflächen in Ihrem Dashboard hervorzuheben.

Im Folgenden besprechen wir, wie Sie dieses Prinzip anwenden können, um ansprechende Farben für Ihr Dashboard auszuwählen.

Neutrale Hintergrundfarben

Indem wir die Hintergrundfarben nahezu neutral halten, sorgen wir dafür, dass die Farben der Datenvisualisierung präzise kommunizieren, ohne unerwünschte Verzerrungen zu erzeugen. Halten Sie im Light-Modus den Widget-Hintergrund fast weiß (#FCFCFD) und wählen Sie eine etwas dunklere Farbe für den Canvas-Hintergrund (#EBEBEB). Dies sorgt für eine klare Trennung ohne Ablenkung. Wenn der Kontrast subtil ist, wirkt das Dashboard wie ein harmonisches Ganzes und nicht wie ein Raster aus isolierten Elementen. Wenn Sie die Rahmenfarben an den Widget-Hintergrund anpassen, reduziert dies die visuelle Unruhe, insbesondere bei dichten Layouts.

Anpassung pro Widget

Um bestimmte Widgets hervorzuheben und sie abzuheben, können Sie die Theme-Eigenschaften für ein Widget überschreiben. In den Widget-Stileinstellungen können Sie die Hintergrund- und Rahmenfarbe auf #1F354B aktualisieren. Aktualisieren Sie außerdem die Schriftfarbe auf #EBEBEB, um einen hohen Kontrast zu gewährleisten.

Auffällige Auswahlfarbe

Die Auswahlfarbe wird verwendet, um interaktive Elemente wie Filter, Tabs und Schaltflächen hervorzuheben. Wählen Sie eine Farbe, die sich leicht von Text- und Hintergrundfarben unterscheidet. Sie können diese ganz einfach von Ihren Markenfarben ableiten. Wenn wir das #15AFDD unserer Marke als Basisfarbe in Adobe Color verwenden, können wir versuchen, eine Auswahlfarbe abzuleiten, indem wir die Farbharmonie auf „Quadratisch“ einstellen, was zu Farben wie #DE7914 und #3A7689 führt. Die Wahl eines Blautons (wie #2272B4) ist meist eine sichere Entscheidung – sie ähnelt der Hyperlink-Farbe, die man von interaktiven Links im Web kennt.

Dark-Modus

Jedes AI/BI-Theme unterstützt sowohl den Light- als auch den Dark-Modus. Richten Sie beide Modi ein, indem Sie den Schalter für den Light/Dark-Modus umlegen. Um den Light-Modus einzurichten, können Sie die Markenfarbe #1E343F für den Canvas-Hintergrund und #08141A für den Widget-Hintergrund verwenden. Im Light-Modus wird in der Regel die hellere Farbe für das Widget empfohlen, da sie einen hohen Kontrast bietet. Als Schriftfarbe verwenden wir #E8EFF1, um eine hohe Lesbarkeit zu gewährleisten.

Versuchen Sie, das 60-30-10-Prinzip auf das Wanderbricks-Dashboard anzuwenden. Dieser Prompt legt neutrale Canvas- und Widget-Hintergründe fest, blendet Rahmen aus, indem er sie an die Widget-Farbe anpasst, und fügt ein komplementäres Blau für interaktive Elemente hinzu.

#4 — Erstellen Sie eine eigene Visualisierungspalette

Nachdem die Interface-Farben sowohl für den Light- als auch für den Dark-Modus festgelegt wurden, besteht der letzte Schritt in der Auswahl der Visualisierungspalette.

Eine ausgewogene Palette für die Datenvisualisierung verbindet das gesamte Dashboard und erweckt es zum Leben. Die Palette kann Markenfarben enthalten, erfordert jedoch möglicherweise Anpassungen, da diese für Visualisierungen ungeeignet sein könnten. Schätzungsweise 4,5 % der Weltbevölkerung leiden unter einer Form von Farbfehlsichtigkeit. Daher ist es wichtig, eine Palette zu entwerfen, die barrierefrei für farbfehlsichtige Menschen ist. Wenn Sie einige branchenübliche Paletten ausprobieren möchten, empfehlen wir Ihnen einen Blick auf colorbrewer. Einige wichtige Aspekte, die Sie beim Entwerfen Ihrer eigenen Palette beachten sollten:

1. Je nach Anwendungsfall sollte eine Palette 5–9 Farben umfassen. In diesem Dashboard erstellen wir mit Adobe Color eine Palette aus 5 Farben.
2. Die Farben sollten sowohl im Light- als auch im Dark-Modus gut unterscheidbar sein. Vermeiden Sie daher extrem helle oder extrem dunkle Farben.
3. Da eine Rot-Grün-Sehschwäche weit verbreitet ist, sollten Sie vermeiden, diese Farben in der Palette nebeneinander zu platzieren.

Für unsere benutzerdefinierte Databricks-Visualisierungspalette beginnen wir mit unserer Markenfarbe (#15AFDD) in Adobe Color. Wir wenden die „quadratische“ Farbharmonie an, um 4 zusätzliche Farben (#83DE14, #DE7914, #BE14DE, #3A7689) abzuleiten, die gleichmäßig auf dem Farbkreis verteilt sind. Von dort aus können Sie in Adobe Color noch einige weitere Anpassungen vornehmen:

• Farbtöne verschieben: Klicken Sie auf den Hex-Wert der einzelnen Farbe und bewegen Sie den Farbton-Schieberegler schrittweise.
• Helligkeit anpassen: Passen Sie die Helligkeit der Farben in der Palette an, indem Sie auf den Hex-Wert der Farbe klicken und den Helligkeitsregler verschieben. Ziel ist es, die Farben gut unterscheidbar zu halten, insbesondere bei nebeneinander liegenden Paaren.
• Testen Sie die resultierenden Farben in der Barrierefreiheitsprüfung für Farbfehlsichtigkeit von Adobe Color, um zu simulieren, wie Ihre Palette bei häufigen Sehschwächen wie Deuteranopie, Protanopie und Tritanopie aussieht.
• Testen Sie in AI/BI mit echten Dashboards sowohl im Light- als auch im Dark-Modus.

Unsere endgültige Farbpalette lautet: #15AFDD, #2375A8, #52A870, #C85070, #C89930.

Sobald Ihre Palette die Barrierefreiheitsprüfungen besteht, wenden Sie sie an, um Ihre Diagramme zum Leben zu erwecken. Dies ist die Palette, für die wir uns entschieden haben, nachdem wir sie durch den Farbfehlsichtigkeits-Simulator von Adobe Color laufen gelassen und sowohl im Light- als auch im Dark-Modus getestet haben.

Fazit

Designentscheidungen, die einzeln klein erscheinen, summieren sich schnell. Eine einheitliche Schriftart, eine bewusste Farbpalette und ein Layout, das dem Betrachter das Lesen erleichtert – all das trägt dazu bei. Zusammen verwandeln sie ein Dashboard in ein Tool, dem die Menschen vertrauen. Workspace-Themes helfen dabei, dies in Ihrem gesamten Unternehmen zu skalieren, sodass bewährte Designpraktiken zum Ausgangspunkt für jedes Dashboard werden.

Das Dashboard, das wir besprochen haben, ist hier verfügbar, wenn Sie es selbst ausprobieren möchten. Wenn Sie noch keine AI/BI-Dashboards verwenden: Diese sind nativ in Databricks integriert.

Haben Sie Ideen oder Feedback? Teilen Sie sie mit uns.

Laden Sie das Dashboard herunter, um es selbst zu erkunden

(Dieser Blogbeitrag wurde mit KI-gestützten Tools übersetzt.) Originalbeitrag