Zustand
Eine Bedeutung, überall gleich
Warum
Liest der Nutzer hier „Entfernen" und dort „Löschen", fragt er sich, ob es dasselbe ist.
Bekannte Zeichen behalten dabei die Bedeutung, die sie außerhalb des Produkts haben: Lupe heißt Suche, Zahnrad heißt Einstellungen, X heißt Schließen, das Logo führt zur Startseite. Der Nutzer bringt diese Bedeutung mit und lernt sie nicht neu.
Dasselbe gilt für den Weg zur Hilfe. Er muss nicht auf jeder Seite stehen, ein Platz im Profil reicht. Aber wo es ihn gibt, steht er immer an derselben Stelle.
Farbe ist eine Aussage über Daten. Steht derselbe Wert auf einer Seite in Gelb und auf der anderen in Grün, widerspricht sich die Oberfläche selbst. Der Nutzer merkt das, auch wenn er es nicht benennen kann. Er lernt daraus, der Farbe nicht zu trauen. Danach hilft sie ihm nirgends mehr, auch dort nicht, wo sie stimmt.
Das passiert auch bei sorgfältiger Arbeit, weil jede Stelle ihre Grenze einzeln setzt. Jede Grenze ist für sich plausibel gewählt. Zusammen ergeben sie vier verschiedene Skalen im selben Produkt.
Die Regel greift überall, wo eine Zahl in einen Zustand übersetzt wird: Speicherplatz, der knapp wird. Passwortstärke. Akkustand. Lagerbestand. Temperatur, Luftqualität, Lieferzeit. Ein Fortschritt, der „hinter Plan" heißt. Sobald es eine Grenze gibt, ab der etwas anders aussieht, gilt sie.
Ohne Daten kein Zustand
Fehlt der Wert, ist der Zustand neutral und die Anzeige bleibt grau. Es wird nichts angenommen.
Wer bei fehlendem Wert Grün zeigt, sagt dem Nutzer „alles in Ordnung", obwohl niemand nachgesehen hat. Diese falsche Aussage ist die gefährlichste, weil sie den Nutzer beruhigt. Wer Rot zeigt, löst einen Alarm ohne Anlass aus, und nach dem dritten Mal glaubt niemand mehr an die roten Felder. Grau sagt, was stimmt: Es liegt nichts vor.
Die Regel hat einen Nachteil. Eine frisch eingerichtete Ansicht sieht dadurch grau und leer aus. Das ist der richtige Eindruck. Farbig wird die Ansicht erst durch Daten. Annahmen färben nichts ein.
Sonderfall Zähler. Bei einem Zähler für etwas, das es nicht geben sollte (offene Fehler, fehlende Belege, ungelesene Warnungen), ist die Null grau. Grün hieße „geprüft und in Ordnung". Grau heißt „hier ist nichts", und genau das stimmt.
Wo die Grenzen herkommen
Die Zahlen selbst sind eine fachliche Festlegung, keine Gestaltungsfrage. Wo die Grenze zwischen mittel und schlecht liegt, entscheidet, wer für die Zahl fachlich einsteht. Der Designer entscheidet das nicht.
Davon getrennt ist festgelegt, wie ein Zustand aussieht. Wer die Grenzen ändert, ändert sie an einer Stelle, ohne dass sich das Aussehen bewegt. Wer das Aussehen ändert, fasst die Grenzen nicht an.
Hart und weich
Hart: eins zu eins. Weich: welche Wörter und Icons. Das legt das Projekt fest.
Woran Du den Verstoß erkennst
- „Speichern", „Sichern" und „Übernehmen" für dieselbe Handlung.
- Mülleimer und X für Löschen.
- X für Schließen und für Löschen.
- Die Lupe öffnet einen Zoom, das Zahnrad öffnet Filter, oder ein Klick aufs Logo tut nichts.
- Hilfe oder Kontakt stehen mal im Kopf, mal in der Fußzeile, mal im Profil.
- Zwei Ansichten zeigen denselben Wert in verschiedenen Farben.
- Der Vergleich mit einer Grenze steht in mehr als einer Datei.
- Eine neue Anzeige bekommt ihre Grenzen mitgegeben, statt sie zu erfragen.
- Ein fehlender Wert wird zu null gemacht und dann eingefärbt.
- Ein Feld ohne Daten ist grün, weil „kein Problem gemeldet" als gut gewertet wird.
- Eine Kennzahl zeigt einen Strich und trotzdem einen farbigen Rand oder ein farbiges Badge.
Grenzen
Handlungen, die wirklich verschieden sind, etwa aus einer Liste entfernen und endgültig löschen. Die heißen bewusst verschieden.
Eine Kennzahl mit fachlich eigenen Grenzen (eine gesetzliche Quote, ein vertraglicher Schwellwert) bekommt ihre Werte von dort. Sie geht trotzdem durch dieselbe Übersetzung, damit der Weg von der Zahl zur Farbe an einer Stelle bleibt.
Ein leerer Zustand darf erklären, warum nichts da ist, und einen Weg anbieten („Noch keine Buchungen — Import starten"). Neutral bezieht sich nur auf die Farbe. Ein erklärender Text gehört trotzdem dazu.
Quelle
Laws of UX › Jakob’s Law, https://lawsofux.com/jakobs-law/. WCAG 3.2.4 Consistent Identification, 3.2.3 Consistent Navigation.