Visuelle Hierarchie im Webdesign: so lenkt ihr den Blick

Besucher:innen lesen eine Seite nicht, sie suchen darin. Wo sie zuerst hinschauen, entscheidet die visuelle Hierarchie. Dieser Beitrag zeigt, wie sie entsteht, wie ihr sie auf einer Startseite einsetzt und wie ihr sie prüft.

Was visuelle Hierarchie ist

Visuelle Hierarchie ordnet Elemente nach Wichtigkeit. Wer auf die Seite blickt, erkennt ohne Nachdenken: Das hier ist das Wichtigste, das ist zweitrangig, das ist Beiwerk. Die Nielsen Norman Group formuliert es so: Wenn Besucher:innen nicht wissen, wo sie hinschauen sollen, fehlt dem Layout wahrscheinlich eine klare Hierarchie.

Dabei zählt Führung mehr als Schönheit. Eine gute Hierarchie spart Erklärung. Eine schlechte verschwendet Aufmerksamkeit auf Nebensachen.

Wie Menschen eine Seite lesen

Menschen scannen. Sie springen von Überschrift zu Überschrift, bleiben bei Auffälligem hängen und lesen erst dann genauer. In Blickstudien der Nielsen Norman Group zeigten sich typische Muster, etwa die F-Form bei textreichen Seiten. Wer klare Anker setzt, braucht sich auf kein Muster zu verlassen.

Der erste Eindruck fällt schnell. Nach Angaben der Nielsen Norman Group bilden Besucher:innen ihr ästhetisches Urteil in rund 50 Millisekunden. In dieser Zeit müssen Struktur und Ton erkennbar sein.

Die sieben Mittel

1. Größe. Das Größte wirkt wichtig. Die Hauptüberschrift ist der größte Text der Seite, und der Unterschied zur nächsten Stufe ist deutlich, nicht zaghaft.

2. Kontrast. Dunkel auf hell, dick auf dünn, voll auf leer: Was sich abhebt, wird zuerst gesehen. Kontrast ist zugleich Barrierefreiheit: Der Text braucht ein Verhältnis von mindestens 4,5 zu 1 (WCAG 2.2 AA), große Schrift mindestens 3 zu 1.

3. Farbe. Eine Akzentfarbe für die Hauptaktion. Wenn alles bunt ist, hebt sich nichts mehr ab. Farbe allein darf nie die einzige Information sein.

4. Abstand und Nähe. Was nah beieinander steht, gehört zusammen. Abstand trennt Themen, ohne dass ihr Linien braucht. Ein großzügiger Rand um ein Element erhöht seine Wirkung.

5. Ausrichtung. Eine saubere Linie am linken Rand erleichtert das Scannen. Wer jede Zeile anders ausrichtet, macht den Blick ratlos.

6. Typografie. Schriftgröße, Gewicht und Zeilenabstand schaffen Stufen. Drei bis fünf Stufen reichen. Eine zweite Schriftfamilie braucht ihr meistens nicht.

7. Position. Oben und links zuerst, Mitte und Anfang vor Ende. Setzt Wichtiges dorthin, wo Besucher:innen zuerst hinschauen, und denkt daran, dass auf dem Handy alles untereinander steht.

Beispiel: eine Startseite, Abschnitt für Abschnitt

1. Hero: Ein Satz als Hauptüberschrift, ein Satz Erklärung, ein Button. Das Größte ist die Aussage, das Auffälligste die Aktion.
2. Belege: Zahlen oder Kundenlogos. Mittelgroß, ruhig, ohne die Hauptaktion zu übertönen.
3. Leistungen: Gleich gestaltete Blöcke mit identischem Aufbau, damit sich Besucher:innen vergleichend orientieren können.
4. Aktion: Am Ende wiederholt sich die Hauptaktion, in derselben Form wie oben.

Wir bauen unsere eigene Startseite nach demselben Prinzip: erst die Aussage, dann der Beleg, dann die Aktion. Mehr zur Entstehung steht im Making-of.

Vorher und nachher: ein Angebotsblock

Ein typisches Beispiel für schwache Hierarchie ist ein Block, der eine Leistung vorstellt. Vorher: Die Überschrift hat dieselbe Größe wie der Text, ein Icon, drei Absätze, zwei gleich große Buttons („Mehr erfahren“ und „Kontakt“), alles in derselben Graustufe. Nachher: eine große Überschrift, die den Nutzen nennt, ein kurzer Absatz, ein Beleg in kleinerer Schrift (eine Zahl oder ein Kundenname), ein Hauptbutton in der Akzentfarbe, ein Textlink für die Nebenaktion.

Verändert haben sich nur Größe, Gewicht und Farbe, der Inhalt ist derselbe. Das Auge weiß jetzt, wo es anfangen soll.

Hierarchie auf Unterseiten

Auf Leistungs- und Referenzseiten hilft eine feste Reihenfolge, die sich auf jeder Seite wiederholt:

1. Einstieg: Eine Überschrift, die den Nutzen für Besucher:innen nennt.
2. Problem: Was ist die Lage, in der jemand diese Seite aufruft?
3. Lösung: Wie geht ihr vor, in wenigen Schritten?
4. Beleg: Ein Projekt mit Namen oder eine Zahl, bei der ihr die Quelle nennen könnt.
5. Aktion: Der nächste Schritt, immer in derselben Form.

Wiederholung ist hier ein Vorteil: Wer eine Seite verstanden hat, findet sich auf der nächsten sofort zurecht.

Wie ihr im Team über Hierarchie entscheidet

Diskussionen enden oft mit „macht das noch etwas größer“. Hilfreicher ist eine Rangliste: Schreibt die drei wichtigsten Dinge der Seite auf, in der Reihenfolge, in der Besucher:innen sie erfassen sollen. Alles andere bekommt weniger Gewicht. Ändert sich die Rangliste, ändert sich die Gestaltung, nicht umgekehrt. Prüft danach mit dem Blinzel-Test, ob die Gestaltung die Rangliste abbildet.

Hierarchie in Formularen

Formulare sind Orte, an denen Hierarchie über Abbrüche entscheidet:

• Eine Spalte. Felder untereinander lassen sich schneller ausfüllen als nebeneinander.
• Beschriftung über dem Feld, nicht als Platzhalter im Feld. Platzhalter verschwinden beim Tippen.
• Pflichtfelder klar markieren, optionale Felder sparsam einsetzen. Jedes Feld mehr kostet Abschlüsse.
• Ein Hauptbutton, benannt nach der Handlung („Anfrage senden“ statt „Absenden“).
• Fehlermeldungen am Feld, mit Text und Farbe, nicht nur mit Farbe.

Ein Beispiel ist die Frage nach dem Budget: Eine Auswahl an Spannen ist leichter zu beantworten als eine freie Zahl.

Hierarchie in langen Texten

Beiträge wie dieser werden gescannt. Gute Textstruktur hilft dabei:

• Überschriften sagen etwas. „Die sieben Mittel“ führt besser als „Weiteres“.
• Absätze von drei bis fünf Zeilen. Wände aus Text schrecken ab.
• Listen für Reihen, Fließtext für Zusammenhänge.
• Hervorhebungen sparsam: Wer zehn Stellen fett setzt, hat keine hervorgehoben.
• Ein Zwischenfazit nach langen Abschnitten gibt Orientierung.

Hierarchie und Bewegung

Bewegung zieht den Blick stärker an als jede Farbe. Eine blinkende Fläche am Rand schlägt den Hauptinhalt. Setzt Animation deshalb gezielt ein: Sie sollte auf das Wichtigste zeigen oder einen Zusammenhang erklären, nicht ablenken. Plant eine ruhige Variante für Menschen, die Bewegung stört (prefers-reduced-motion). Inhalte müssen auch ohne Animation vollständig sein.

Kontrast als Pflicht

Wer Hierarchie über Kontrast aufbaut, muss ihn auch messen. Das Projekt WebAIM fand 2026 auf 83,9 Prozent der untersuchten Startseiten Text mit zu wenig Kontrast. Oft sind es graue Nebentexte auf hellem Grund. Prüft Text, Buttons und Icons mit einem Kontrastprüfer. Der Mindestwert für normalen Text liegt bei 4,5 zu 1.

Typische Fehler

• Alles ist laut. Fünf Buttons in Akzentfarbe sind keine Hierarchie. Ein Hauptbutton pro Bildschirm, alles andere zurückhaltender.
• Zu wenig Kontrast zwischen den Stufen. Eine Überschrift, die nur ein bisschen größer ist als der Text, führt nicht.
• Dekoration vor Inhalt. Große Bilder oder Animationen ziehen den Blick auf Nebensachen.
• Mobil nicht geprüft. Auf dem Handy rutschen Spalten untereinander. Plant die Reihenfolge dort extra.

Mobil und Barrierefreiheit

Auf dem Handy entscheidet die Reihenfolge im Quelltext, denn die Spalten wandern untereinander. Prüft deshalb, ob die Lesereihenfolge dort noch stimmt. Für Screenreader gilt: Eine klare Überschriftenstruktur (eine H1, danach H2 und H3) ist die Hierarchie, die sie auslesen. Und Text muss sich bei 200 Prozent Zoom ohne Verlust bedienen lassen.

Blinzel-Test und Checkliste

Blinzel-Test: Verengt die Augen, bis nur noch Flächen zu erkennen sind. Was jetzt als Erstes auffällt, ist eure Hierarchie. Stimmt sie nicht mit dem überein, was ihr wollt, ändert ihr Größe, Kontrast oder Abstand.

Fünf-Sekunden-Test: Zeigt fünf Personen die Seite fünf Sekunden lang und blendet sie aus. Fragt dann: Worum geht es? Was könnt ihr hier tun? Was ist euch aufgefallen? Wenn die Antworten nicht zu eurem Ziel passen, liegt es selten an den Personen.

Checkliste:

1. Ist die Hauptüberschrift der größte Text?
2. Gibt es genau eine Hauptaktion pro Bildschirm?
3. Ist die Akzentfarbe sparsam eingesetzt?
4. Sind Zusammengehöriges nah und Getrenntes weit auseinander?
5. Besteht der Kontrast die Prüfung (4,5 zu 1)?
6. Stimmt die Reihenfolge auf dem Handy?
7. Gibt es höchstens fünf Textstufen?

Wie wir Hierarchie im Webdesign einsetzen, beschreiben wir auf Websites & Relaunch.