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 Komponenten – einen Akzent – und keine der anderen beiden. Deshalb sieht der erste Dashboard-Screen oft gut aus, aber der fünfte wirkt wie drei zusammengefügte Produkte.

Neutraltöne tragen das Dashboard; eine zu geringe Auswahl an Neutraltönen 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 wählen – etwa neun, die wahrnehmungsbasiert und nicht durch einfache Hex-Arithmetik verteilt sind, da letztere alles in der Mitte konzentriert. Zweitens: Tönung hinzufügen. Ein Neutralton mit einem geringen Anteil der Markenfarbe 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 Diagrammserie, 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 zur 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 – dies ist der einzige Weg, um zu prüfen, ob Reihe vier auf einer Card 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 das Suchen ü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 – schlagen ein Diagramm mit zwölf Farben bei fast jeder Größe.
4. Etwas anderes als den Farbton variieren. Strichmuster, Marker-Formen oder Fülltexturen, insbesondere im Druck oder wenn ein Screenshot in Graustufen vorliegen könnte.

Etwa jeder zwölfte Mann hat eine Form von Farbfehlsichtigkeit. Die häufigste Form erschwert die Unterscheidung von Rot und Grün – was ungünstig 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 einen Graustufen-Screenshot übersteht, übersteht fast jede Sehschwäche.

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, auf einem fast schwarzen Hintergrund zu „vibrieren“, während die zwei oder drei dunkelsten Reihen einfach 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 Card ein helleres Element auf einer getönten Seite ist. Die Details – einschließlich gemessener Helligkeitswerte aus produktiven Paletten – finden Sie in Dark-Mode-Farppaletten, die Bestand haben.

Zunehmend werden Dashboards generiert statt designt – ein Agent wird gebeten, einen Analytics-Screen zu erstellen, und liefert diesen.

Wir haben 299 öffentliche DESIGN.md-Dateien analysiert, Dokumente, die speziell geschrieben wurden, damit ein Coding-Agent ihnen folgt. 86 % geben reine Hex-Werte ohne semantische Rolle an, was bedeutet, dass die Datei nicht beantworten kann, „welche Farbe eine deaktivierte Tabellenzelle hat“ oder „welche Farbe Gefahr bedeutet“. 69 % erwähnen den Dark Mode nie. 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 Palette, die als Rollen definiert ist, ist eine Anweisung; eine Palette, die aus fünf Hex-Codes besteht, ist eine 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

   Platzieren Sie jeden Status gleichzeitig auf dem Bildschirm

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

3. 3

   Charten Sie bewusst acht Reihen

   Nicht, weil Sie es so veröffentlichen sollten, sondern um herauszufinden, wo 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 bei geöffnetem Diagramm umschalten

   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“.