Dashboard-Farbpaletten: Was Inspiration-Boards oft auslassen

Dies ist die Unterscheidung, die Inspiration-Boards oft ignorieren, und fast jedes Dashboard-Problem lässt sich darauf zurückführen. Drei Farbsysteme teilen sich einen Bildschirm, jedes mit einer anderen Aufgabe und einer anderen Fehlerquelle.

Eine Markenpalette, die auf einer Landingpage großartig aussieht, liefert meist nur eine dieser Paletten – einen Akzent – und keine der anderen beiden. Deshalb sieht der erste Dashboard-Screen oft gut aus, während der fünfte wirkt, als wären drei verschiedene Produkte zusammengestückelt worden.

Neutraltöne tragen das Dashboard; eine zu geringe neutrale Skala ist der häufigste strukturelle Defekt. Eine dichte Tabelle muss mindestens Folgendes trennen: den Seitenhintergrund, die Card, in der die Tabelle liegt, die Header-Zeile, den Hover-Zustand der Zeile, den Rahmen zwischen den Zeilen, Primärtext, Sekundärtext und deaktivierten Text. Das sind acht unterscheidbare Werte – „drei Grautöne“ reichen hierfür nicht aus.

Zwei Faktoren machen eine neutrale Skala erfolgreich. Erstens: Genügend Abstufungen (etwa neun), die perzeptiv und nicht durch einfache Hex-Arithmetik verteilt sind, da letztere alles in der Mitte konzentriert. Zweitens: Tönung. Ein Neutralton, der einen geringen Anteil der Markenfarbe enthält, wirkt wie Teil des Designs; ein ungetöntes Grau wirkt wie der Framework-Standard, weil es das meistens auch ist.

Erfolg, Warnung, Gefahr und Info sind keine Dekoration. Sobald eine Chart-Serie, ein Navigations-Highlight oder ein Marketing-Banner Ihr Rot verwendet, verliert Rot die Bedeutung „etwas ist falsch“ und Nutzer hören auf, gezielt danach zu suchen. Dies ist eine Einbahnstraße: Aufmerksamkeit, die für Dekoration aufgewendet wird, kann nicht mehr für die Bedeutung zurückgewonnen werden.

• Halten Sie diese aus dem kategorischen Set heraus. Wenn vier Datenreihen vorhanden sind und eine davon grün ist, wird dieses Grün auf einem Bildschirm, der gleichzeitig den Gesundheitsstatus anzeigt, mehrdeutig.
• Die Akzentfarbe darf keine Statusfarbe sein. Wenn die Marke grün ist und Grün gleichzeitig für „Erfolg“ steht, muss entweder die Marke oder die Bedeutung angepasst werden. In der Regel die Marke: Verschieben Sie den Farbton oder die Helligkeit des Akzents so weit, dass die beiden Farben niemals nebeneinander stehen und als identisch wahrgenommen werden.
• Verlassen Sie sich niemals allein auf Farben. Ein Status benötigt zusätzlich ein Icon, eine Beschriftung oder eine Form. Dies ist eine Anforderung an die Barrierefreiheit und sorgt zudem dafür, dass die Benutzeroberfläche in einem Screenshot, der in ein Support-Ticket eingefügt wird, lesbar bleibt.
• Geben Sie jedem Status eine Oberflächenvariante. Ein Danger-*Badge* und ein Danger-*Banner-Hintergrund* haben unterschiedliche Farben; wenn nur eine definiert wird, erhält man ein Banner, das entweder zu aufdringlich ist oder untergeht.

Sechs oder sieben, und die ehrliche Antwort ist, dass es ab sechs schwierig wird. Die Einschränkung ist nicht ästhetischer Natur: Unterscheidbare Farbtöne bei gleicher Helligkeit sind eine begrenzte Ressource. Sobald etwa acht davon in einem Diagramm erscheinen, wird die Unterscheidung benachbarter Reihen zum Ratespiel und die Legende wird zu einer mühsamen Suchaufgabe.

Hier kann ein Paletten-Generator nicht helfen, da das kategorische Set als Gruppe und im Verhältnis zu den Neutraltönen beurteilt werden muss, auf denen es liegt. Unten finden Sie zwei Dashboard-Paletten, bei denen die Rollen chart-1 bis chart-5 neben den Oberflächen sichtbar sind. Nur so lässt sich prüfen, ob Reihe vier auf einer Karte noch von Reihe zwei unterscheidbar ist.

Beide Sets enden bei fünf, was eine bewusste Entscheidung und keine Einschränkung des Formats ist.

Was stattdessen zu tun ist, in Reihenfolge der Präferenz:

1. Direkt beschriften. Platzieren Sie den Namen der Reihe am Ende ihrer Linie. Dies macht die Legende und den damit verbundenen Suchaufwand überflüssig und nimmt den Druck von der Farbwahl.
2. Das Ende gruppieren. Zeigen Sie die Top fünf und einen „Sonstige“-Bucket. Kaum ein Dashboard-Nutzer vergleicht Reihe elf mit Reihe zwölf.
3. Das Diagramm aufteilen. Small Multiples (eine Reihe pro Panel, gleiche Achsen) sind bei fast jeder Größe einer einzelnen Grafik mit zwölf Farben überlegen.
4. Etwas anderes als den Farbton variieren. Gestrichelte Linien, Marker-Formen oder Fülltexturen, insbesondere im Druck oder wenn ein Screenshot in Graustufen dargestellt wird.

Etwa jeder zwölfte Mann hat eine Form von Farbfehlsichtigkeit. Die häufigste Form erschwert die Unterscheidung von Rot und Grün – was problematisch ist, da Dashboards genau diese Farben für „schlecht“ und „gut“ verwenden.

Die praktischen Regeln sind kurz: Variieren Sie zwischen zwei bedeutungstragenden Farben sowohl die Helligkeit als auch den Farbton, damit sie in Graustufen unterscheidbar bleiben. Paaren Sie Rot und Grün niemals als einziges Unterscheidungsmerkmal zwischen zwei Zuständen. Fügen Sie bei Statusmeldungen immer einen zweiten Kanal hinzu (ein Icon, ein Plus- oder Minuszeichen, ein Wort), sodass die Farbe eine Verstärkung und nicht die eigentliche Botschaft ist. Eine Palette, die in einem Graustufen-Screenshot funktioniert, übersteht fast jede Form von Farbfehlsichtigkeit.

Dashboards werden häufiger im Dark Mode genutzt als die meisten anderen Produktflächen, und eine für Weiß optimierte kategorische Palette lässt sich nicht einfach übertragen. Gesättigte Mitteltöne, die auf Weiß sauber wirken, neigen dazu, vor einem fast schwarzen Hintergrund zu „flimmern“, während die zwei oder drei dunkelsten Reihen schlichtweg verschwinden.

Definieren Sie die Farben der Reihen pro Modus, anstatt sie zu konvertieren. Das Gleiche gilt für Ihre Neutralskala: Im Dark Mode sind erhöhte Oberflächen *heller* als der Hintergrund, was den Instinkt umkehrt, dass eine Karte ein helleres Element auf einer getönten Seite ist. Die Details, einschließlich gemessener Helligkeitswerte aus produktiven Paletten, finden Sie in dark mode colour palettes that hold up.

Immer öfter werden Dashboards generiert statt designt. Ein Agent wird gebeten, einen Analytics-Screen zu erstellen, und liefert diesen. Alles, was im Briefing nicht spezifiziert wurde, ergänzt das Modell – und zwar jedes Mal neu.

Wir haben 299 öffentliche DESIGN.md-Dateien analysiert – Dokumente, die speziell dafür geschrieben wurden, dass ein Coding-Agent ihnen folgt. 86 % geben reine Hex-Werte ohne semantische Rolle an, was bedeutet, dass die Datei Fragen wie „Welche Farbe hat eine deaktivierte Tabellenzelle?“ oder „Welche Farbe bedeutet Gefahr?“ nicht beantworten kann. 69 % erwähnen den Dark Mode überhaupt nicht. Also entscheidet der Agent selbst, und auf dem nächsten Screen entscheidet er anders.

Die Lösung ist dieselbe, egal ob ein Mensch oder ein Agent baut: Benennen Sie die Rollen, definieren Sie diese für beide Modi und halten Sie schriftlich fest, welche Farben reserviert sind. Eine als Rollen definierte Palette ist eine Anweisung; eine Palette aus fünf Hex-Codes ist lediglich Inspiration.

1. 1

   Erstellen Sie einen Screenshot der dichtesten Tabelle und entsättigen Sie ihn

   Wenn Zeilen, Header, Hover- und Deaktiviert-Zustände in Graustufen nicht mehr unterscheidbar sind, ist Ihre Neutralskala zu flach und Ihre Statusfarben tragen die Bedeutung allein.

2. 2

   Alle Status gleichzeitig auf dem Bildschirm anzeigen

   Erfolg, Warnung, Gefahr und Info zusammen, sowohl als Badge als auch als Banner. Hier wird eine fehlende Oberflächenvariante sofort sichtbar.

3. 3

   Absichtlich acht Reihen in einem Diagramm darstellen

   Nicht, weil Sie das so veröffentlichen sollten, sondern um herauszufinden, an welchem Punkt Ihre Palette an ihre Grenzen stößt. Egal welche Zahl das ist: Designen Sie das Verhalten für „und weitere“ für eine Stufe darunter.

4. 4

   Dark Mode umschalten, während ein Chart geöffnet ist

   Die zwei dunkelsten Datenreihen verschwinden – und das geschieht völlig unbemerkt.

5. 5

   Akzentfarben zählen

   Auf einem gut gestalteten Dashboard-Screen erscheint die Akzentfarbe nur ein- oder zweimal. Ist sie überall präsent, verliert sie die Bedeutung „hier ist die Aktion“.