Farbhierarchie & Aufmerksamkeitssteuerung
Farbe ist nicht Dekoration — sie ist dein stärkstes Werkzeug, um den Blick des Nutzers zu lenken. Lerne, wie du mit Farbe eine klare visuelle Hierarchie schaffst.
- Verstehen, wie Farbe die Aufmerksamkeit des Nutzers lenkt — und wie du das gezielt einsetzt
- Die Hierarchie-Pyramide für Aktionen anwenden: Primary → Secondary → Tertiary
- Destruktive Aktionen richtig einordnen — nicht immer rot und fett
- Die „Grauton-zuerst“-Strategie kennen: Farbe sparsam und gezielt einsetzen
- Semantische Farbzuweisungen von dekorativen unterscheiden
Wenn alles bunt ist, ist nichts wichtig. Farbe funktioniert als Aufmerksamkeitslenker nur, wenn sie sparsam und gezielt eingesetzt wird — auf einer neutralen Grundfläche.
Farbe als Hierarchie-Werkzeug
In Modul 02 hast du gelernt, dass visuelle Hierarchie über Größe, Gewicht und Kontrast funktioniert. Farbe ist dabei das mächtigste — und gefährlichste Werkzeug. Ein einziger farbiger Akzent auf einer neutralen Fläche zieht sofort den Blick an. Aber wenn alles farbig ist, verliert Farbe diese Kraft.
Grauton-zuerst denken
Designe dein Interface zuerst komplett in Grautönen. Füge dann gezielt Farbe nur dort hinzu, wo du Aufmerksamkeit lenken willst — Primary Actions, aktive Zustände, kritische Meldungen. Was grau bleiben kann, bleibt grau.
Sättigung = Lautstärke
Stelle dir Sättigung wie Lautstärke vor: Ein voll gesättigter Button „schreit", ein entsättigter Border „flüstert". Nur die wichtigsten Elemente sollten „schreien" — alles andere darf leiser sein. Hintergründe, Borders und Labels bleiben entsättigt.
Fläche × Sättigung = Aufmerksamkeit
Ein kleiner, hochgesättigter Akzent (z.B. ein Badge) kann genauso viel Aufmerksamkeit erzeugen wie eine große, leicht getönte Fläche. Große Flächen + hohe Sättigung = visuelles Chaos. Halte große Flächen neutral und reserviere Sättigung für kleine, wichtige Elemente.
Faustregel: Je größer die Fläche, desto geringer die Sättigung. Hintergründe: 0–10% Sättigung. Borders und Labels: 20–40%. Aktive Elemente und Badges: 60–100%.
Die Aktions-Pyramide: Primary, Secondary, Tertiary
Jede Aktion auf einer Seite hat einen Rang in der Wichtigkeitspyramide. Die meisten Seiten haben eine primäre Aktion, ein paar sekundäre und mehrere tertiäre. Dein Farbeinsatz muss diese Hierarchie widerspiegeln.
Primary: Gefüllter, farbiger Hintergrund mit hohem Kontrast — zieht sofort den Blick an. Secondary: Outline-Style oder reduzierter Hintergrund — sichtbar, aber nicht dominant. Tertiary: Reiner Text-Link-Style ohne Hintergrund oder Border — auffindbar, aber dezent.
Dieses Prinzip gilt nicht nur für Buttons, sondern für alle Aktions-Elemente: Navigations-Items, Links, Icons, Tab-Selektionen.
Pro Ansicht maximal eine Primary Action. Alles andere ist Secondary oder Tertiary. Wenn alles „Primary" ist, wird der Nutzer von konkurrierenden Handlungsaufforderungen überfordert.
Destruktive Aktionen richtig einordnen
„Löschen" = großer roter Button? Nicht unbedingt. Eine destruktive Aktion ist nicht automatisch die primäre Aktion. Die Hierarchie bestimmt den Style — nicht die Semantik allein.
Links konkurrieren zwei visuell starke Buttons um Aufmerksamkeit — der Nutzer muss erst lesen, bevor er weiß, welchen er klicken soll. Rechts ist „Speichern" klar die primäre Aktion, und „Projekt löschen" erscheint als dezenter Text-Link. Die destruktive Semantik (rote Farbe) bleibt erhalten, aber die Hierarchie bestimmt den Stil.
Tipp: Reserviere den großen roten Button für die Confirmation-Stufe — den Dialog, der erscheint, nachdem der Nutzer „Löschen" geklickt hat. Dort ist die destruktive Aktion die primäre Aktion.
Destruktive Aktionen auf einer Detailseite: Tertiary-Style. Den großen, roten, dominanten Style reservierst du für den Bestätigungsdialog, wo die destruktive Aktion tatsächlich die primäre Aktion ist.
Semantische Farbzuweisungen — weniger ist mehr
Semantische Farben (Rot für Fehler, Gelb für Warnung, Grün für Erfolg) sind extrem nützlich — aber nur, wenn sie konsistent und sparsam eingesetzt werden. Wenn jede zweite Komponente eine semantische Farbe trägt, verliert sie ihre Signalwirkung.
Links verliert semantische Farbe ihre Signalwirkung, weil zu viele Elemente eine haben. Rechts sind nur tatsächlich kritische Meldungen (Fehler, Warnung) farbig. Andere Meldungen nutzen Icons statt Farbe. Das Ergebnis: Die wenigen farbigen Elemente fallen auf und erhalten wieder ihre volle Aufmerksamkeitskraft.
Farbhierarchie in einer Settings-Seite
Die folgende Settings-Seite behandelt alle Elemente gleich — alles ist bunt, nichts hat Vorrang. Deine Aufgabe: Schaffe eine klare Farbhierarchie, bei der der Nutzer sofort weiß, was die primäre Aktion ist.