---
title: "Visuelle Hierarchie: So lenkst du den Blick durch dein Interface"
url: "https://insideuxdesign.com/de/blog/visuelle-hierarchie-so-lenkst-du-den-blick-durch-dein-interface"
language: "de"
description: "Größe, Gewicht, Farbe, Abstand und Position: So baust du eine klare visuelle Hierarchie auf. Mit Vorher-nachher-Beispielen und einfachen Tests. Jetzt lesen."
published: "2024-02-14T09:00:00+01:00"
updated: "2026-10-15T00:34:01+02:00"
---

# Visuelle Hierarchie: So lenkst du den Blick durch dein Interface

Größe, Gewicht, Farbe, Abstand und Position entscheiden, was Menschen auf deiner Seite zuerst sehen. So setzt du visuelle Hierarchie gezielt ein, mit Vorher-nachher-Beispielen und einfachen Tests.

Stell dir die Startseite einer kleinen Fahrradwerkstatt vor, nennen wir sie „Kurbelwerk“. Oben steht das Logo, daneben sechs Menüpunkte. Darunter folgen eine Begrüßung, ein Foto der Werkstatt, die Öffnungszeiten, drei Angebote, ein Hinweis auf den Winter-Check, eine Telefonnummer und ein Button „Termin buchen“. Alles ist da. Und trotzdem passiert etwas Seltsames: Menschen landen auf der Seite, schauen sich kurz um und gehen wieder, ohne einen Termin zu buchen.

Fragt man sie, warum, hört man Sätze wie „Ich wusste nicht, wo ich anfangen soll“ oder „Den Button habe ich gar nicht gesehen“. Das Problem ist nicht der Inhalt. Das Problem ist, dass alle Elemente gleich laut sind. Überschriften, Öffnungszeiten und der Buchungsbutton haben ungefähr dieselbe Größe, dieselbe Schriftstärke und denselben Abstand zueinander. Das Auge findet keinen Einstieg.

Genau darum geht es bei visueller Hierarchie. In diesem Artikel lernst du, was der Begriff bedeutet, mit welchen fünf Werkzeugen du sie gestaltest und wie du in wenigen Minuten prüfst, ob deine Gestaltung den Blick wirklich dorthin lenkt, wo du ihn haben willst. Vorwissen brauchst du dafür nicht.

## Was visuelle Hierarchie bedeutet

Visuelle Hierarchie ist die Anordnung und Gestaltung von Elementen auf einer Fläche, sodass das Auge sie in der Reihenfolge ihrer Wichtigkeit wahrnimmt. Die Nielsen Norman Group (NN/g), eines der bekanntesten Forschungsinstitute für Usability, beschreibt es ähnlich: Die Elemente einer Seite werden so organisiert, dass der Blick zu jedem Element in der Reihenfolge seiner Bedeutung geführt wird.

Etwas einfacher gesagt: Eine gute Hierarchie beantwortet drei Fragen, bevor jemand bewusst darüber nachdenkt.

- Was ist hier das Wichtigste?
- Was gehört zusammen?
- Was kann ich als Nächstes tun?

Das klingt nach Ästhetik, ist aber vor allem eine Frage der Bedienbarkeit. Menschen lesen Websites und Apps selten Wort für Wort. Sie überfliegen, suchen nach Ankerpunkten und entscheiden in Sekunden, ob sie hier richtig sind. Eine klare Hierarchie nimmt ihnen Denkarbeit ab. Diese geistige Anstrengung nennt man [Cognitive Load](https://insideuxdesign.com/de/glossar/cognitive-load) (kognitive Last), und je weniger davon für die Orientierung draufgeht, desto mehr Aufmerksamkeit bleibt für die eigentliche Aufgabe.

Wichtig für den Einstieg: Hierarchie ist immer relativ. Ein Element ist nicht an sich „groß“ oder „auffällig“, sondern nur im Vergleich zu seiner Umgebung. Eine rote Schrift fällt auf einer grauen Seite sofort auf, auf einer bunten Seite voller roter Elemente dagegen gar nicht. Deshalb funktioniert Hierarchie nur, wenn du sie für die ganze Seite planst und nicht für jedes Element einzeln.

## Die fünf Werkzeuge der visuellen Hierarchie

Um Wichtigkeit sichtbar zu machen, stehen dir im Wesentlichen fünf Stellschrauben zur Verfügung: Größe, Gewicht, Farbe und Kontrast, Abstand sowie Position. Jede davon wird hier mit einem Vorher-nachher-Beispiel aus der Kurbelwerk-Startseite erklärt. Die Werkzeuge wirken einzeln, am stärksten aber im Zusammenspiel.

### 1. Größe: Was groß ist, wird zuerst gesehen

Größe ist das stärkste und intuitivste Signal. Größere Elemente ziehen mehr Aufmerksamkeit auf sich, und wir lesen sie automatisch als wichtiger. Das gilt für Schrift genauso wie für Bilder, Buttons und Flächen.

Die NN/g rät dabei zu Zurückhaltung: Für Text genügen meist drei Größenstufen, also groß für die Hauptüberschrift, mittel für Zwischenüberschriften und klein für den Fließtext. Wer zehn verschiedene Schriftgrößen verwendet, erzeugt keine feinere Hierarchie, sondern Unruhe. Denn wenn sich zwei Größen nur minimal unterscheiden, kann das Auge sie nicht mehr eindeutig einordnen.

Auf der Kurbelwerk-Startseite sieht das so aus:

> **Vorher:** Die Begrüßung „Willkommen bei Kurbelwerk“, die Überschrift „Unsere Leistungen“ und der Hinweis „Jetzt Winter-Check sichern“ sind alle etwa 22 Pixel groß. Nichts sticht heraus.
> 
> **Nachher:** Eine einzige große Überschrift sagt, worum es geht: „Dein Fahrrad, in 48 Stunden repariert“. Die Zwischenüberschriften sind deutlich kleiner, der Fließtext noch einmal kleiner. Die Begrüßung entfällt, weil sie nichts erklärt.

Eine typische Anfängerfalle ist es, alles Wichtige groß zu machen. Wenn fünf Dinge groß sind, ist keines mehr groß. Größe wirkt nur, solange sie selten ist. Die NN/g empfiehlt deshalb, die Zahl großer Elemente auf einer Seite bewusst klein zu halten.

Wie groß Fließtext auf dem Bildschirm genau sein sollte und wie Zeilenlänge und Zeilenabstand die Lesbarkeit beeinflussen, ist ein eigenes Thema. Hier geht es nur um das Verhältnis der Größen zueinander.

### 2. Gewicht: Fett, normal, leicht

Mit Gewicht ist die Strichstärke einer Schrift gemeint, also ob sie fett, halbfett, normal oder leicht gesetzt ist. Gewicht ist das feinere Geschwister der Größe. Es hebt etwas hervor, ohne mehr Platz zu brauchen.

Gewicht eignet sich besonders für zwei Situationen. Erstens, um innerhalb einer Größenstufe zu unterscheiden, etwa einen Produktnamen fett und die Beschreibung darunter normal zu setzen, obwohl beide gleich groß sind. Zweitens, um im Fließtext einzelne Schlüsselbegriffe auffindbar zu machen, sodass jemand beim Überfliegen an ihnen hängen bleibt.

> **Vorher:** In der Angebotsliste stehen „Inspektion, 59 Euro, inklusive Bremsen- und Schaltungscheck“ in einer Zeile, alles in normaler Schrift. Wer den Preis sucht, muss lesen.
> 
> **Nachher:** „Inspektion“ ist fett, der Preis „59 Euro“ steht halbfett rechts daneben, die Beschreibung darunter in normalem Gewicht und etwas hellerer Farbe. Name, Preis und Details lassen sich jetzt getrennt erfassen.

Auch hier gilt: Fett wirkt nur sparsam. Ein Absatz, in dem die Hälfte der Wörter fett ist, liest sich wie ein Text ohne Hervorhebung, nur anstrengender. Als Faustregel hat sich bewährt, pro Absatz höchstens ein oder zwei Begriffe hervorzuheben.

### 3. Farbe und Kontrast: Auffallen durch Unterschied

Farbe zieht den Blick an, aber nicht die Farbe an sich, sondern der Unterschied zur Umgebung. Die NN/g betont genau diesen Punkt: Hervorhebung entsteht durch Kontrast in Helligkeit und Sättigung gegenüber dem, was drumherum ist. Ein kräftig orangefarbener Button wirkt auf einer ruhigen, hellen Seite wie ein Signal. Auf einer Seite mit vielen kräftigen Farben geht er unter.

Dieser Effekt hat sogar einen Namen. Der Von-Restorff-Effekt, auch Isolationseffekt genannt, beschreibt, dass von mehreren ähnlichen Dingen dasjenige am ehesten wahrgenommen und erinnert wird, das sich von den anderen abhebt. Die Psychologin Hedwig von Restorff hat ihn 1933 beschrieben. Für dein Interface heißt das: Gib der wichtigsten Aktion eine Farbe, die sonst kaum vorkommt.

> **Vorher:** Auf der Kurbelwerk-Seite sind die Menüpunkte grün, die Überschriften grün, der Winter-Check-Hinweis steht in einem grünen Kasten, und der Button „Termin buchen“ ist ebenfalls grün.
> 
> **Nachher:** Grün bleibt die Markenfarbe für Logo und kleine Akzente. Überschriften werden dunkelgrau. Der Button „Termin buchen“ bekommt als einziges Element eine kräftige, gefüllte Fläche in Orange mit weißer Schrift. Der Winter-Check bekommt einen hellen, zurückhaltenden Hintergrund.

Kontrast funktioniert auch in die andere Richtung. Du kannst Elemente bewusst leiser machen, indem du ihnen weniger Kontrast gibst, zum Beispiel Metadaten wie Datum oder Kategorie in einem helleren Grau. Dabei gibt es aber eine Untergrenze: Text muss lesbar bleiben. Die Web Content Accessibility Guidelines (WCAG), die internationalen Richtlinien für barrierefreie Webinhalte, verlangen auf Stufe AA ein [Kontrastverhältnis](https://insideuxdesign.com/de/glossar/kontrastverhaeltnis) von mindestens 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. „Leiser“ heißt also: etwas weniger Kontrast als die Hauptinhalte, aber nie so wenig, dass jemand die Augen zusammenkneifen muss.

Und noch eine Regel aus der Barrierefreiheit, die direkt mit Hierarchie zu tun hat: Farbe sollte nie das einzige Unterscheidungsmerkmal sein. Ein Teil der Menschen nimmt bestimmte Farben anders wahr, etwa bei einer Rot-Grün-Sehschwäche. Ein Hauptbutton, der sich nur durch seinen Farbton von einem Nebenbutton unterscheidet, ist für sie unter Umständen gar nicht als Hauptbutton erkennbar. Kombiniere Farbe deshalb immer mit einem zweiten Signal, etwa einer gefüllten Fläche statt nur eines Rahmens oder einer größeren Schrift. Mehr dazu findest du im Artikel [Farbenblindheit im UX-Design](https://insideuxdesign.com/de/blog/farbenblindheit-im-ux-design-richtlinien-und-werkzeuge).

Welche Farben du für ein ganzes Interface wählst und wie du eine Farbpalette aufbaust, ist ein eigenes Thema. Für die Hierarchie reicht zunächst eine einzige Frage: Welches Element soll am meisten auffallen, und hat es den stärksten Kontrast auf der Seite?

### 4. Abstand: Was nah beieinander steht, gehört zusammen

Abstand ist das unterschätzteste Werkzeug, vor allem bei Einsteigenden. Leerraum (im Englischen „White Space“, auch wenn er nicht weiß sein muss) wirkt auf den ersten Blick wie ungenutzter Platz. In Wahrheit erfüllt er zwei Aufgaben für die Hierarchie.

Erstens zeigt Abstand, was zusammengehört. Elemente, die nah beieinander stehen, nehmen wir als Gruppe wahr. Dieses Prinzip stammt aus den [Gestaltgesetzen](https://insideuxdesign.com/de/glossar/gestaltgesetze), einer Sammlung von Regeln darüber, wie Menschen Formen und Gruppen wahrnehmen. Eine Überschrift sollte deshalb näher an dem Text stehen, zu dem sie gehört, als an dem Text darüber.

Zweitens gibt Abstand einem Element Gewicht. Ein Button mit viel Luft drumherum wirkt wichtiger als derselbe Button, der zwischen anderen Elementen eingequetscht ist. Leerraum ist eine Art Bühne: Was allein darauf steht, bekommt Aufmerksamkeit.

> **Vorher:** Zwischen allen Elementen der Kurbelwerk-Seite liegen gleichmäßig 16 Pixel. Die Überschrift „Öffnungszeiten“ hat zum Text darüber denselben Abstand wie zum Text darunter. Man sieht nicht, wo ein Abschnitt endet und der nächste beginnt.
> 
> **Nachher:** Innerhalb eines Abschnitts sind die Abstände klein, zwischen den Abschnitten deutlich größer, etwa 16 Pixel innen und 64 Pixel zwischen den Blöcken. Der Buchungsbutton steht mit großzügigem Abstand unter der Hauptüberschrift und hat keine Nachbarn, die mit ihm konkurrieren.

Wie du Abstände systematisch festlegst, etwa mit einem festen Raster oder einer Abstandsskala, gehört in einen eigenen Artikel. Für den Anfang genügt eine Regel: Der Abstand innerhalb einer Gruppe ist kleiner als der Abstand zwischen Gruppen.

### 5. Position: Oben links liest sich zuerst

Wo ein Element steht, beeinflusst, wann es gesehen wird. In Sprachen, die von links nach rechts und von oben nach unten gelesen werden, beginnt der Blick in der Regel oben links. Was ganz oben steht, wird häufiger gesehen als das, was weit unten auf der Seite liegt.

Ein bekanntes Beispiel dafür ist das F-Muster. Jakob Nielsen beschrieb es 2006 auf Basis einer [Eyetracking](https://insideuxdesign.com/de/glossar/eye-tracking)-Studie mit 232 Personen. Eyetracking ist ein Verfahren, das aufzeichnet, wohin Menschen auf einem Bildschirm schauen. Bei textlastigen Seiten bewegte sich der Blick oft in einer groben F-Form: einmal quer über den oberen Bereich, dann eine kürzere horizontale Bewegung etwas weiter unten, dann senkrecht am linken Rand entlang. Eine Folgestudie der NN/g elf Jahre später kam zu einem ähnlichen Ergebnis, auch auf dem Smartphone.

Das F-Muster ist allerdings kein Gestaltungsziel, sondern eher ein Warnsignal. Es zeigt, wie Menschen sich durch Inhalte bewegen, die ihnen wenig Orientierung bieten. Die Konsequenz der NN/g: Das Wichtigste gehört an den Anfang, und Überschriften, Absätze und Listenpunkte sollten mit den Wörtern beginnen, die die eigentliche Information tragen. Wer nur den linken Rand überfliegt, soll trotzdem verstehen, worum es geht.

> **Vorher:** Auf der Kurbelwerk-Seite stehen ganz oben die Öffnungszeiten und eine lange Begrüßung. Der Buchungsbutton liegt erst nach drei Abschnitten, auf dem Smartphone weit unterhalb des sichtbaren Bereichs.
> 
> **Nachher:** Ganz oben stehen das Leistungsversprechen und der Button „Termin buchen“. Die Öffnungszeiten rücken in einen kompakten Block weiter unten und zusätzlich in den Footer, wo viele Menschen solche Informationen erwarten.

Position hat noch eine zweite Seite: Gewohnheit. Menschen erwarten das Logo oben links, die Suche oben, den Warenkorb oben rechts. Weicht deine Gestaltung davon ab, müssen sie suchen, auch wenn deine Hierarchie sonst sauber ist. Dieses Prinzip, dass Menschen erwarten, dass deine Website so funktioniert wie andere, die sie kennen, ist als Jakob’s Law bekannt.

## Wie die Werkzeuge zusammenspielen

In der Praxis setzt du selten nur ein Werkzeug ein. Die wichtigsten Elemente sind meist größer, kräftiger, kontrastreicher, haben mehr Raum und stehen weiter oben. Unwichtige Elemente sind kleiner, leichter, blasser, stehen enger beieinander und weiter unten. Je mehr Signale in dieselbe Richtung zeigen, desto eindeutiger wird die Hierarchie.

Umgekehrt entsteht Verwirrung, wenn die Signale sich widersprechen. Ein typisches Beispiel: Eine kleine, aber knallrote Zeile „Achtung: Lieferzeiten verlängert“ konkurriert mit einer großen, dunklen Überschrift. Was ist nun wichtiger? Das Auge springt hin und her. Wenn du merkst, dass zwei Elemente um Aufmerksamkeit kämpfen, entscheide dich bewusst für eines und nimm beim anderen ein oder zwei Signale zurück.

### Beispiel: Primärer und sekundärer Button

Am deutlichsten wird das Zusammenspiel bei Buttons. Fast jede Ansicht hat eine Hauptaktion, die die meisten Menschen ausführen wollen, und einige Nebenaktionen. Ein Dialog zum Speichern von Änderungen ist ein gutes Beispiel.

> **Vorher:** Drei gleich große, gleich graue Buttons nebeneinander: „Speichern“, „Abbrechen“, „Verwerfen“. Wer schnell klickt, erwischt leicht den falschen, und „Verwerfen“ löscht alle Änderungen.
> 
> **Nachher:** „Speichern“ ist ein gefüllter Button in der Akzentfarbe, also der primäre Button. „Abbrechen“ ist ein sekundärer Button mit Rahmen und ohne Füllung. „Verwerfen“ steht etwas abgesetzt als Textlink mit Warnfarbe und einer Rückfrage, bevor wirklich etwas gelöscht wird.

In diesem Beispiel arbeiten Farbe (gefüllt gegenüber ungefüllt), Kontrast, Abstand (die riskante Aktion steht abseits) und Position zusammen. Keiner der drei Buttons ist versteckt, aber jeder hat ein klares Gewicht. Wie bei Formularen gilt: Pro Ansicht gibt es genau eine Hauptaktion. Weitere Beispiele dafür findest du im Artikel [Formulare, die niemand abbricht](https://insideuxdesign.com/de/blog/formulare-die-niemand-abbricht-12-regeln-fuer-bessere-formular-ux).

### Beispiel: Eine Karte in einer Liste

Auch kleine Bausteine haben eine eigene Hierarchie. Nimm eine Produktkarte in einem Shop für Fahrradzubehör.

> **Vorher:** Bild, Produktname, Artikelnummer, Beschreibung, Bewertung, Lieferzeit, Preis und Button, alles linksbündig untereinander, alles in derselben Schrift und Größe.
> 
> **Nachher:** Das Bild steht oben und ist groß. Darunter folgt der Produktname fett, dann der Preis groß und kräftig. Bewertung und Lieferzeit stehen klein und grau in einer Zeile. Die Artikelnummer verschwindet aus der Karte und taucht erst auf der Produktseite auf. Der Button sitzt unten mit etwas Abstand.

Die Reihenfolge folgt dabei der Frage, was Menschen beim Vergleichen zuerst wissen wollen: Was ist das, was kostet es, taugt es was? Die Hierarchie bildet diese Fragen ab. Genau das ist der Kern: Visuelle Hierarchie ist keine Dekoration, sondern übersetzt die Prioritäten der Menschen, die deine Seite nutzen, in Gestaltung.

## Bevor du gestaltest: Prioritäten festlegen

Viele Hierarchieprobleme entstehen nicht beim Gestalten, sondern vorher. Wenn im Team niemand entschieden hat, was auf einer Seite das Wichtigste ist, landet alles mit gleichem Gewicht auf dem Bildschirm. Jede Abteilung möchte, dass ihr Thema auffällt, und am Ende fällt nichts mehr auf.

Eine einfache Übung hilft: Schreib alle Inhalte einer Seite auf einzelne Zettel oder Karten und bring sie in eine Rangfolge. Nicht in Gruppen wie „wichtig“ und „weniger wichtig“, sondern wirklich der Reihe nach, von Platz eins bis zum letzten Platz. Das zwingt zu Entscheidungen. Für die Kurbelwerk-Startseite könnte das Ergebnis so aussehen:

1. Was die Werkstatt verspricht (schnelle Reparatur)
2. Termin buchen
3. Die drei wichtigsten Leistungen mit Preis
4. Winter-Check als saisonales Angebot
5. Öffnungszeiten und Adresse
6. Über die Werkstatt

Diese Liste ist die Grundlage für die Gestaltung. Platz eins und zwei bekommen die stärksten Signale, die Plätze fünf und sechs die schwächsten. Wenn du mit einem Wireframe arbeitest, also einer einfachen, schematischen Skizze einer Seite ohne Farben und Bilder, lässt sich die Hierarchie schon dort mit Größe, Abstand und Position anlegen, bevor überhaupt eine Farbe ins Spiel kommt. Das hat einen Vorteil: Wenn die Hierarchie in Graustufen funktioniert, wird sie mit Farbe nur besser.

## So prüfst du deine Hierarchie

Das Tückische an visueller Hierarchie: Wer eine Seite selbst gestaltet hat, sieht sie nie mehr unvoreingenommen. Du weißt, wo der Button ist, also findest du ihn sofort. Deshalb brauchst du Methoden, die dir einen frischen Blick verschaffen.

### Der Squint-Test

Der einfachste Test kostet nichts: Kneif die Augen zusammen, bis die Seite verschwimmt, oder leg in deinem Design-Tool einen starken Weichzeichner über einen Screenshot. Die NN/g empfiehlt diesen sogenannten Squint-Test (englisch „to squint“, die Augen zusammenkneifen), weil er Details ausblendet und nur noch Formen, Flächen und Kontraste übrig lässt. Du siehst dann, was wirklich hervorsticht und welche Gruppen entstehen.

Stell dir dabei zwei Fragen. Welches Element nehme ich verschwommen zuerst wahr, und ist das auch das wichtigste? Und kann ich die Abschnitte der Seite noch voneinander unterscheiden? Wenn die Antwort auf die erste Frage „ein Foto“ oder „ein Werbebanner“ lautet und nicht dein Hauptinhalt, stimmt die Hierarchie nicht.

Ein wichtiger Hinweis der NN/g: Teste mit echten Inhalten, nicht nur mit der leeren Vorlage. Ein kontrastreiches Foto kann eine ganze Seite dominieren, auch wenn es eigentlich nur eine Nebensache illustriert.

### Der Fünf-Sekunden-Test

Zeig die Seite einer Person, die sie noch nicht kennt, für etwa fünf Sekunden. Dann verdeckst du sie und fragst: Worum ging es? Was konntest du dort tun? Was ist dir als Erstes aufgefallen? Wenn die Antworten nicht zu deiner Rangliste passen, weißt du, wo du nachschärfen musst. Das ist kein wissenschaftlicher Usability-Test, aber ein schneller Realitätscheck, den du auch mit Kolleginnen und Kollegen aus anderen Teams machen kannst.

### Daten aus echter Nutzung

Wenn eine Seite schon live ist, können Werkzeuge zusätzliche Hinweise geben. Eine Heatmap zeigt farbig, wo Menschen klicken oder wie weit sie scrollen. Wenn kaum jemand bis zu deinem wichtigsten Button scrollt oder viele auf ein Bild klicken, das gar nicht verlinkt ist, sind das deutliche Hinweise auf ein Hierarchieproblem.

## Häufige Fehler und wie du sie vermeidest

**Alles ist wichtig.** Der häufigste Fehler überhaupt. Wenn jedes Element hervorgehoben ist, ist keines hervorgehoben. Die Lösung ist die Rangliste von oben: Entscheide, was auf Platz eins steht, und nimm alles andere zurück.

**Zu viele Abstufungen.** Sieben Schriftgrößen, vier Grautöne und drei Akzentfarben ergeben keine feine Hierarchie, sondern Chaos. Bleib bei wenigen, deutlich unterscheidbaren Stufen. Die Empfehlung der NN/g von etwa drei Größen ist ein guter Startpunkt.

**Zu kleine Unterschiede.** Eine Überschrift mit 18 Pixeln über Fließtext mit 16 Pixeln ist kaum als Überschrift erkennbar. Unterschiede müssen deutlich sein, sonst wirken sie wie ein Versehen.

**Hervorhebung, die nach Werbung aussieht.** Ein bunter Kasten mit großem Text wirkt schnell wie ein Werbebanner. Viele Menschen übersehen solche Elemente instinktiv, ein Verhalten, das als Bannerblindheit bekannt ist und von der NN/g in Eyetracking-Studien beobachtet wurde. Wenn eine wichtige Information wie Werbung gestaltet ist, kann sie genau deshalb untergehen.

**Hierarchie nur für den Desktop.** Auf dem Smartphone rutscht vieles untereinander. Ein Element, das auf dem großen Bildschirm prominent rechts neben der Überschrift steht, kann mobil weit nach unten wandern. Prüfe die Reihenfolge deshalb auch auf kleinen Bildschirmen.

## Fazit

Visuelle Hierarchie entscheidet darüber, ob Menschen auf deiner Seite sofort verstehen, worum es geht und was sie tun können, oder ob sie suchen müssen. Mit Größe, Gewicht, Farbe und Kontrast, Abstand und Position hast du fünf Werkzeuge, die du gezielt kombinieren kannst. Je mehr davon in dieselbe Richtung zeigen, desto klarer wird die Botschaft.

Der wichtigste Schritt passiert aber vor der Gestaltung: die Entscheidung, was wirklich das Wichtigste ist. Auf der Kurbelwerk-Seite war das nicht die Begrüßung und nicht die Öffnungszeiten, sondern das Versprechen einer schnellen Reparatur und der Button, mit dem man einen Termin bucht. Sobald das klar war, ergab sich der Rest fast von selbst.

Und zum Schluss: Vertrau nicht nur deinem eigenen Blick. Ein kurzer Squint-Test und ein Fünf-Sekunden-Test mit einer Person, die die Seite nicht kennt, zeigen dir schneller als jede Diskussion, ob deine Hierarchie funktioniert.

## Checkliste

- Die Inhalte der Seite sind in eine klare Rangfolge gebracht.
- Es gibt genau ein Element, das am stärksten auffällt, und es ist das wichtigste.
- Für Text werden nur wenige, deutlich unterscheidbare Größen verwendet.
- Fett und Farbe werden sparsam eingesetzt.
- Die Hauptaktion hat den stärksten Kontrast und unterscheidet sich nicht nur durch Farbe.
- Text erfüllt auch in „leisen“ Grautönen die Kontrastanforderungen der WCAG.
- Abstände innerhalb von Gruppen sind kleiner als zwischen Gruppen.
- Das Wichtigste steht oben, auch auf dem Smartphone.
- Der Squint-Test mit echten Inhalten zeigt die gewünschte Reihenfolge.

## Quellen

- [Nielsen Norman Group: Visual Hierarchy in UX: Definition](https://www.nngroup.com/articles/visual-hierarchy-ux-definition/)
- [Nielsen Norman Group: F-Shaped Pattern For Reading Web Content (original study)](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/)
- [Nielsen Norman Group: F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)
- [Nielsen Norman Group: Squint Test](https://www.nngroup.com/videos/squint-test/)
- [Nielsen Norman Group: Banner Blindness](https://www.nngroup.com/videos/banner-blindness/)
- [Laws of UX: Von Restorff Effect](https://lawsofux.com/von-restorff-effect/)
- [W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [W3C: Understanding Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)