Nimm dein Handy, öffne irgendeine Website und kneif die Augen so weit zusammen, bis alles verschwimmt. Lesen kannst du jetzt nichts mehr. Aber irgendetwas siehst du trotzdem: einen dunklen Balken oben, einen hellen Fleck in der Mitte, vielleicht einen farbigen Button. Genau das ist die visuelle Hierarchie. Der Rest ist Detail.
Kurz gesagt
- Hierarchie ist keine Geschmacksfrage, sondern eine Reihenfolge: Was sieht jemand zuerst, was danach, was vielleicht nie?
- Die Hebel sind unterschiedlich stark. Größe schlägt alles, Schriftschnitt ist der schwächste – und Weißraum wird fast immer unterschätzt.
- Der häufigste Fehler: alles wird betont. Betonung funktioniert nur relativ – etwas kann nur hervorstechen, wenn anderes zurücktritt.
- Weiter unten stehen drei Tests zum Ausprobieren. Zwei davon kannst du direkt im Artikel anwerfen.
Hierarchie ist eine Reihenfolge, keine Verzierung
Die meisten Leute denken bei Gestaltung an Geschmack: schöne Farben, hübsche Schrift. Hierarchie hat damit wenig zu tun. Sie beantwortet eine viel banalere Frage – was sieht jemand zuerst, was danach, was vielleicht nie?
Das beste Beispiel dafür hängt in jeder Bahnhofs- und Flughafenhalle. Auf einer Abflugtafel ist alles gleich groß: dieselbe Schrift, dieselbe Farbe, dieselbe Zeilenhöhe, keinerlei Verzierung. Trotzdem findest du in zwei Sekunden, was du brauchst. Die Reihenfolge steckt allein in der Spaltenordnung – die Zeit ganz links, dann das Ziel, dann Airline und Flugnummer, ganz rechts der Status. Niemand hat da über Ästhetik nachgedacht. Jemand hat entschieden, in welcher Reihenfolge ein gehetzter Mensch die Informationen braucht.
Der Gegenversuch begegnet dir in Restaurants. Viele Speisekarten setzen die Preise rechtsbündig in eine eigene Spalte, oft noch mit Punktlinie davor. Das Ergebnis: Der Gast liest zuerst die Preisspalte von oben nach unten und sucht sich das billigste Gericht. Karten, die den Preis stattdessen direkt hinter die Beschreibung setzen, in derselben Schriftgröße, lenken den Blick zurück auf das Essen.
Dieselben Informationen, andere Reihenfolge
Preisspalte
Hauptspeisen
Die Preise stehen als eigene Spalte da – untereinander, rechtsbündig, gleich ausgerichtet. Sie werden dadurch zur ersten Ebene und lassen sich vergleichen, ohne die Gerichte zu lesen.
Preis im Fließtext
Hauptspeisen
Kalbsrahmgulasch mit Serviettenknödel 24,50
Saibling aus dem Ötztal, mit Kräuterbutter 27,00
Käsespätzle mit Bergkäse und Röstzwiebeln 18,50
Derselbe Preis, gleiche Größe, gleiche Farbe, direkt hinter der Beschreibung. Er verliert seine eigene Spur, und der Blick bleibt beim Essen.
Nichts wurde weggelassen oder versteckt. Verändert hat sich nur, in welcher Reihenfolge man es liest.
Dieselben Informationen, andere Reihenfolge, anderes Verhalten. Genau darum ist Hierarchie eine Entscheidung und keine Verzierung.
Die Hebel, sortiert nach Wirkung
Es gibt eine Handvoll Mittel, um Reihenfolge zu erzeugen. Sie sind unterschiedlich stark, und das wird oft unterschätzt. Die folgende Liste ist nach Wirkung sortiert – und setzt sich selbst in genau diesen Gewichtungen.
Sechs Hebel, stärkster zuerst
- GrößeSchlägt alles. Ein Element, das doppelt so groß ist wie seine Nachbarn, gewinnt – egal welche Farbe es hat.
- KontrastKommt direkt danach. Wichtig ist der Helligkeitsunterschied, nicht die Farbe an sich. Ein knalliges Orange auf Rot fällt weniger auf als ein mittelgraues Element auf Weiß.
- FarbeWirkt nur, solange sie selten ist. Wer den Call-to-Action farbig macht und die Überschrift auch und den Hinweiskasten ebenfalls, hat drei farbige Dinge und keine Betonung mehr.
- PositionSchwächer, als viele glauben. Ein großes Bild in der unteren Bildhälfte schlägt eine kleine Zeile oben mühelos.
- WeißraumDer Hebel, den Anfänger zuletzt entdecken. Abstand gruppiert: Zwei Elemente, die eng beieinanderstehen, gehören für das Auge zusammen – ganz ohne Linie, Rahmen oder Box.
- SchriftschnittFett, kursiv, Versalien: das feinste Werkzeug, gut für die dritte und vierte Ebene. Für den Hauptakzent ist es zu schwach.
Die Zeile ganz oben ist nicht wichtiger als die unten – sie ist nur größer gesetzt. Und genau deshalb hast du sie zuerst gelesen.
Zur Position noch ein Wort, weil sie am häufigsten überschätzt wird: Ja, es gibt das F-Muster, das Eye-Tracking-Studien bei Textseiten immer wieder zeigen.[1] Der Blick läuft oben nach rechts, dann kürzer, dann die linke Kante hinunter. Das ist ein Muster für Seiten, die kaum gestaltet sind – sobald ein starkes Element im Spiel ist, gewinnt das Element.
Und die meisten Layouts werden besser, wenn man Trennlinien löscht und stattdessen die Abstände sauber staffelt. Weißraum kostet nichts außer Mut.
Der Fehler, den fast alle machen
Alles ist wichtig. Die Überschrift ist fett, der Untertitel auch, das Angebot steht in Versalien, daneben ein farbiger Störer, unten drei Buttons in gleicher Größe. Der Kunde hat gesagt, das müsse alles auffallen, und der Gestalter hat brav geliefert.
Zweimal dieselbe Botschaft
Alles betont
Neu!
Winterreifen jetzt wechseln
Termin in 24 Stunden, ohne Wartezeit
Mo–Fr 7:30–18:00
Fünf Elemente kämpfen um denselben Rang. Das Auge findet keinen Einstieg und beginnt zu springen.
Eine Ebene erster Ordnung
Winterreifen jetzt wechseln
Termin in 24 Stunden, ohne Wartezeit
Dieselben Wörter, dieselbe Fläche. Zurückgetreten ist nur das, was zweite Ebene sein darf.
Wenn alles schreit, hört man nichts.
Betonung funktioniert nur relativ – etwas kann nur hervorstechen, wenn anderes zurücktritt. Das ist keine Geschmacksfrage, das ist Physiologie.
Zwei Faustregeln
- 1
Ein Element erster Ordnung pro Bildschirm
Eines. Nicht zwei gleichberechtigte, zwischen denen der Blick pendelt.
- 2
Drei Ebenen reichen
Vier sind selten nötig, fünf kann kein Mensch mehr auseinanderhalten.
Und ja, das heißt manchmal, dem Kunden zu erklären, warum das Logo kleiner wird.
Ein Beispiel zum Mitrechnen
Ein Plakat für eine Lesung. Enthalten sind: Autorenname, Buchtitel, Datum, Uhrzeit, Ort, Eintrittspreis, Veranstalterlogo, ein Porträtfoto. Acht Informationen, alle notwendig.
Der typische Entwurf setzt alles ordentlich untereinander, alles etwa gleich groß, das Logo unten. Man kann es lesen. Auffallen tut es nicht.
Besser: Das Porträt bekommt zwei Drittel der Fläche – Gesichter ziehen den Blick zuverlässiger an als Text. Der Autorenname wird groß, weil Leute wegen des Namens kommen, nicht wegen des Buchtitels. Datum und Ort bilden zusammen einen Block, klar abgesetzt, mittelgroß. Der Rest – Uhrzeit, Preis, Logo – rutscht in eine kleine Zeile unten, in einheitlicher Größe.
Acht Informationen, drei Ebenen
Erste Ebene
Porträt,
Autorenname
Das, was aus zehn Metern Entfernung noch ankommt.
Zweite Ebene
Buchtitel,
Datum, Ort
Wird gelesen, sobald jemand stehen geblieben ist.
Dritte Ebene
Uhrzeit, Preis, Logo
Wird gesucht, wenn die Entscheidung schon gefallen ist.
Aus acht gleichwertigen Informationen sind drei Ebenen geworden. Nichts wurde gelöscht.
Drei Tests, die zusammen keine Minute dauern
Der Blinzeltest und der Graustufentest
Augen zusammenkneifen, oder das Bild mit einem starken Weichzeichner versehen. Was jetzt noch als Form erkennbar ist, ist deine erste Ebene. Wenn dort nichts ist oder fünf Dinge gleichzeitig – Problem gefunden.
Der Graustufentest geht anders vor: Farbe raus, alles in Schwarzweiß. Funktioniert die Ordnung immer noch? Wenn nicht, hängt dein Layout allein an der Farbe, und spätestens beim Schwarzweiß-Ausdruck oder bei rotgrünblinden Leser:innen bricht es zusammen. Die Barrierefreiheitsrichtlinien fordern genau das übrigens auch: Farbe darf nie das einzige Mittel sein, um etwas zu vermitteln.[2]
Beides lässt sich hier direkt ausprobieren. Links das Plakat von oben im typischen Entwurf, rechts dasselbe in drei Ebenen:
Testlabor
Typischer Entwurf
Lesung
Marta Kern
Die Stille danach
14. November
19:30 Uhr
Stadtbibliothek Innsbruck
Eintritt 12 €
Kulturverein Nord
Acht Informationen, alle etwa gleich groß, gleichmäßig verteilt.
Drei Ebenen
Marta Kern
Die Stille danach
14. November
Stadtbibliothek Innsbruck
19:30 Uhr · Eintritt 12 € · Kulturverein Nord
Dieselben acht Informationen, nach Reihenfolge gewichtet.
Schalte auf „Blinzeln“: Links bleibt ein grauer Streifenteppich, rechts bleiben Gesicht und Name stehen. In Graustufen hält die rechte Ordnung ebenfalls – sie hängt nicht an der Farbe.
Der Fünf-Sekunden-Test
Jemandem den Entwurf fünf Sekunden zeigen, dann wegnehmen und fragen: Woran erinnerst du dich? Die Antwort ist deine tatsächliche Hierarchie, nicht die, die du gemeint hast. Der Test tut manchmal weh, und genau deshalb lohnt er sich.
Fünf-Sekunden-Test
Startklar? Das Plakat erscheint für fünf Sekunden und verschwindet dann wieder. Nicht vorbereiten, einfach schauen.
Ein Nachtrag, der oft vergessen wird
Optische Hierarchie ist nicht dasselbe wie strukturelle Hierarchie. Ein Absatz, den du auf 32 Pixel hochskalierst, sieht aus wie eine Überschrift – für einen Screenreader bleibt er ein normaler Absatz.
Sieht aus wie eine Überschrift
<p style="font-size: 32px">
Unsere Leistungen
</p>Screenreader meldet: Absatz. In der Dokumentstruktur existiert diese Ebene nicht.
Ist eine Überschrift
<h2>
Unsere Leistungen
</h2>Screenreader meldet: Überschrift Ebene 2. Die Ebene lässt sich anspringen und überfliegen.
Wer im Web arbeitet, sollte die Reihenfolge also zweimal bauen: sichtbar über Größe und Abstand, unsichtbar über H1, H2, H3.[3] Wenn beide Reihenfolgen übereinstimmen, ist das Layout meistens auch sonst sauber.
Zum Schluss die Übung vom Anfang, andersherum: Kneif die Augen bei deinem eigenen letzten Entwurf zusammen. Was bleibt stehen?
Wenn das die Sache ist, die stehen bleiben soll, bist du fertig.
Wir bauen genau diese Reihenfolge in Websites ein – sichtbar und strukturell. Wenn du wissen willst, was auf deiner Seite als Erstes ankommt, sieh dir unser UI/UX-Design an oder schreib uns kurz.
Quellen
- [1]Nielsen Norman Group, F-Shaped Pattern of Reading on the Web – Eye-Tracking-Auswertung zum Leseverlauf auf Textseiten. nngroup.com
- [2]W3C, WCAG 2.2 – Erfolgskriterium 1.4.1 Use of Color. w3.org
- [3]W3C, WCAG 2.2 – Erfolgskriterium 1.3.1 Info and Relationships. w3.org
