Visuelle Hierarchie: was zuerst gesehen wird

Jede Seite beantwortet unausgesprochen eine Frage: Was soll zuerst gesehen werden? Wenn die Gestaltung darauf keine Antwort gibt, sucht sich das Auge selbst einen Einstieg – oft den falschen. Visuelle Hierarchie ist die bewusste Rangordnung von Elementen nach ihrer Wichtigkeit. Sie sorgt dafür, dass Besucher in wenigen Sekunden verstehen, worum es geht, und wissen, was sie als Nächstes tun können.

Die Bedeutung dieser ersten Sekunden ist gut untersucht. Studien der Nielsen Norman Group zeigen, dass Besucher eine Seite oft in weniger als zehn bis zwanzig Sekunden wieder verlassen, wenn sie nicht sofort erkennen, dass sie richtig sind. In dieser Zeit wird nicht gelesen, sondern überflogen. Was dabei hängen bleibt, entscheidet die Hierarchie.

1. Die Mittel der Hierarchie

Visuelles Gewicht entsteht durch mehrere Mittel, die sich gegenseitig verstärken oder aufheben können. Die wichtigsten sind in der Tabelle zusammengefasst.

Entscheidend ist, dass Hierarchie immer relativ ist. Eine Überschrift in 32 Pixeln wirkt groß neben Text in 16 Pixeln, aber klein neben einem Bild, das die halbe Seite füllt. Ein roter Knopf fällt auf einer ruhigen, grauen Seite sofort ins Auge, geht aber auf einer bunten Seite unter. Deshalb ist die Frage nie, wie auffällig ein Element ist, sondern wie auffällig es im Vergleich zu den anderen ist.

2. Probieren Sie es aus

Im Labor sehen Sie den oberen Bereich einer typischen Leistungsseite. Verändern Sie das Gewicht der vier Elemente und beobachten Sie, wie sich der erste Eindruck verändert.

Sie werden feststellen: Sobald zwei oder mehr Elemente das höchste Gewicht haben, wirkt die Seite unruhig. Das ist der häufigste Fehler in der Praxis. Er entsteht meist nicht aus Unwissen, sondern aus Kompromissen: Die Geschäftsführung möchte das Logo größer, der Vertrieb den Knopf auffälliger, das Marketing die Auszeichnung prominenter. Am Ende ist alles wichtig – und damit nichts.

3. Wie der Blick wandert

Neben der Gestaltung einzelner Elemente spielt die Leserichtung eine Rolle. In Sprachen, die von links nach rechts gelesen werden, beginnt der Blick meist oben links. Blickverlaufsstudien haben zwei typische Muster gezeigt.

Abb. 2.1F-Muster und Z-Muster

Das F-Muster tritt auf, wenn Nutzer Text überfliegen: Sie lesen die ersten Zeilen, springen dann nach unten und lesen nur noch die Zeilenanfänge. Daraus folgt eine wichtige Regel für Texte im Web: Das Wichtigste gehört an den Anfang – von Seiten, Absätzen und sogar Aufzählungspunkten. Zwischenüberschriften und fett gesetzte Schlüsselbegriffe helfen, weil sie dem überfliegenden Blick Ankerpunkte bieten. Das Z-Muster tritt auf reduzierten Seiten auf, etwa bei Startseiten mit großem Bild, wenig Text und einem Knopf. Hier liegt es nahe, das Logo oben links, die Navigation oben rechts, die Hauptaussage in der Mitte und den Knopf unten rechts oder zentral zu platzieren.

Beide Muster sind keine Gesetze, sondern Tendenzen. Eine starke Hierarchie kann den Blick überall hinlenken. Die Muster zeigen aber, wo Nutzer ohne Führung hinschauen, und damit, wo wichtige Inhalte nicht versteckt werden sollten.

4. Hierarchie in Texten

Hierarchie gilt nicht nur für Seitenlayouts, sondern auch innerhalb von Texten. Eine klare Abstufung von Überschrift, Zwischenüberschrift, Fließtext und Nebentext hilft beim Überfliegen und beim Wiederfinden. In der Praxis genügen meist vier bis fünf Stufen. Mehr Stufen verwirren, weil die Unterschiede zu klein werden. Wichtig ist auch, dass die Stufen deutlich genug auseinanderliegen. Eine Zwischenüberschrift, die nur ein Pixel größer ist als der Fließtext, erzeugt keine Hierarchie, sondern Unsicherheit. Als Faustregel gilt ein Größenunterschied von mindestens zwanzig bis dreißig Prozent zwischen benachbarten Stufen, oft ergänzt durch unterschiedliche Schriftstärken.

Auch die Hierarchie im Quelltext sollte zur sichtbaren passen. Eine Überschrift, die groß und fett aussieht, sollte auch als Überschrift ausgezeichnet sein – für Suchmaschinen und für Screenreader, wie im Kurs zur Barrierefreiheit beschrieben. Sichtbare und technische Hierarchie gehören zusammen.

5. Hierarchie beurteilen

Um die Hierarchie einer Seite zu beurteilen, helfen drei Fragen. Erstens: Was sehe ich in den ersten zwei Sekunden, und ist das das Wichtigste? Zweitens: Erkenne ich, was ich hier tun kann, ohne zu suchen? Drittens: Gibt es Elemente, die um Aufmerksamkeit konkurrieren, ohne dass sie es verdienen? Der Unschärfetest aus der vorigen Lektion hilft auch hier: Was im unscharfen Bild am stärksten hervortritt, hat das höchste Gewicht. Ein zweiter hilfreicher Test ist der Fünf-Sekunden-Test: Zeigen Sie jemandem die Seite fünf Sekunden lang und fragen Sie dann, worum es ging und was man hätte tun können. Die Antworten zeigen schnell, ob die Hierarchie funktioniert.

Ein typisches Beispiel liefert der Kopfbereich vieler Unternehmenswebsites. Oben steht ein großes Foto, darüber ein Slogan wie „Qualität, die überzeugt“, darunter drei gleich große Kacheln mit Auszeichnungen, ein Telefonsymbol mit Nummer und zwei Knöpfe in unterschiedlichen Farben. Jedes Element für sich ist sinnvoll, zusammen erzeugen sie aber einen Wettbewerb um Aufmerksamkeit, und der Slogan sagt nicht, was das Unternehmen eigentlich tut. Eine bessere Hierarchie beginnt mit einer klaren Aussage darüber, was angeboten wird und für wen, gefolgt von einem einzigen Hauptknopf. Auszeichnungen und Telefonnummer rücken in die zweite Reihe. Der Kopfbereich wirkt danach ruhiger, und Besucher verstehen schneller, ob sie richtig sind. Genau diese schnelle Orientierung entscheidet darüber, ob jemand bleibt oder zum nächsten Suchergebnis zurückkehrt.

Hierarchie ist außerdem keine Frage des Geschmacks, sondern des Zwecks. Auf einer Kontaktseite ist das Formular das wichtigste Element, auf einer Referenzseite sind es die Projekte, auf einer Produktseite das Produktbild und der Preis. Wer vor dem Gestalten einer Seite in einem Satz aufschreibt, was Besucher dort vor allem tun oder erfahren sollen, hat die Grundlage für jede weitere Entscheidung.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.