Visuelle Hierarchie: den Blick führen, nicht dekorieren

Visuelle Hierarchie ist die erkennbare Rangfolge der Elemente einer Seite: die Ordnung, die festlegt, was ein Besucher zuerst sieht, was als Zweites und was als Beiwerk. Der Test dafür ist eine einfache Frage: Wenn jemand zwei Sekunden auf die Seite schaut, was sieht er zuerst? Wenn die Antwort “kommt drauf an” lautet, gibt es keine Hierarchie, und die Seite überlässt die Priorisierung dem Zufall.

Die fünf Werkzeuge

Größe. Das direkteste Mittel. Das Wichtigste ist das Größte. Damit das wirkt, brauchen die Ebenen deutliche Sprünge: H1 mit 48 Pixel neben H2 mit 44 Pixel erzeugt keine Hierarchie, sondern Verwirrung. Ein Faktor von etwa 1,3 bis 1,5 zwischen den Ebenen ist ein guter Ausgangspunkt.

Gewicht. Fett wirkt schwerer als normal. Sparsam eingesetzt ist es sehr wirksam, flächig eingesetzt hebt es sich selbst auf. Ein Absatz, in dem jeder dritte Begriff fett ist, hat keine Hervorhebung mehr.

Kontrast. Dunkler Text auf hellem Grund wirkt stärker als mittelgrauer. Dieses Mittel ist gleichzeitig ein Barrierefreiheitsthema: Hierarchie durch Aufhellung darf die Kontrastgrenzen nicht unterschreiten.

Raum. Das unterschätzteste Werkzeug. Ein Element, um das viel Platz ist, wirkt wichtiger, ohne größer zu sein. Mehr Abstand um die primäre Aussage ist oft wirksamer als eine größere Schrift.

Position. Oben und links wird zuerst gelesen, in Sprachen mit dieser Leserichtung. Was oben steht, gilt als wichtiger, unabhängig von seiner Gestaltung.

Die Werkzeuge wirken zusammen, aber selten alle gleichzeitig. Ein Element, das größer, fetter, farbiger und umrahmt ist, wirkt nicht wichtiger, sondern laut.

Eine primäre Handlung pro Seite

Jede Seite hat eine Handlung, die sie erreichen soll. Diese wird als Schaltfläche in der Hauptfarbe dargestellt, und alles andere ist neutral oder ein Umriss.

Wird eine zweite gleichwertige Schaltfläche daneben gestellt, halbiert sich nicht die Aufmerksamkeit, sondern es entsteht eine Entscheidung, die der Besucher nicht treffen wollte. Bei drei gleichwertigen Schaltflächen wird häufig keine geklickt.

Die primäre Handlung darf und sollte wiederholt werden: oben, in der Mitte, am Ende. Wiederholung ist nicht Konkurrenz.

F-Muster und Z-Muster: wie der Blick tatsächlich läuft

Blickverlaufsstudien zeigen zwei wiederkehrende Muster, und beide sind für die Anordnung nützlich, solange man sie als Tendenzen versteht und nicht als Gesetze.

Das F-Muster beschreibt das Überfliegen textlastiger Seiten: ein langer Blick über die erste Zeile, ein kürzerer über einen Zwischentitel weiter unten, dann ein Abtasten am linken Rand nach Ankerpunkten. Die Konsequenz für Inhaltsseiten: Die erste Zeile jedes Abschnitts trägt die Kernaussage, Zwischenüberschriften sind informativ statt witzig, und wichtige Begriffe stehen am Zeilenanfang, nicht am Ende. Wer gegen das F-Muster schreibt, versteckt seine Argumente an Stellen, die beim Überfliegen nie besucht werden.

Das Z-Muster beschreibt Seiten mit wenig Text, etwa Startseiten und Landingpages: oben links beginnen (Logo), nach oben rechts wandern (Navigation, Handlung), diagonal zur Mitte (Kernaussage, Bild), unten die abschließende Handlung. Der klassische Startseitenaufbau folgt genau dieser Bahn, und die primäre Schaltfläche am Ende der Diagonale liegt dort, wo der Blick ohnehin ankommt.

Beide Muster sind keine Vorschrift, den Blick kann eine starke Hierarchie jederzeit umlenken. Aber wo keine bewusste Führung existiert, fällt der Blick in diese Bahnen zurück, und dann sollte das Wichtige auf ihnen liegen.

Vorher und nachher: drei typische Korrekturen

Wie sich die Werkzeuge in der Praxis auswirken, zeigen drei Standardfälle:

Der Einstiegsbereich. Vorher: eine Überschrift mit 36 Pixel, direkt darunter drei Zeilen Text in 18 Pixel, daneben zwei gleich große Schaltflächen, alles auf einem unruhigen Foto. Nachher: die Aussage auf 56 Pixel, der Erklärsatz auf 20 Pixel mit Abstand, eine farbige Schaltfläche und ein unauffälliger Textlink, das Foto abgedunkelt. Es hat sich kein Inhalt geändert, nur die Rangfolge, und die Seite beantwortet jetzt in zwei Sekunden, worum es geht und was zu tun ist.

Die Leistungsübersicht. Vorher: sechs Karten, jede mit fett gesetztem Titel, farbigem Rahmen und eigener Schaltfläche. Nachher: sechs gleich ruhige Karten, ohne Einzelschaltflächen, darunter eine gemeinsame Handlung. Die Karten konkurrieren nicht mehr gegeneinander, sondern arbeiten zusammen.

Die Preisseite. Vorher: drei Pakete, alle gleich gestaltet. Nachher: das empfohlene Paket minimal größer, mit abgesetzter Fläche und als einziges mit farbiger Schaltfläche. Eine Empfehlung ist eine Hierarchieentscheidung, und Nutzer sind für sie dankbar, weil sie die Auswahl verkürzt.

Hierarchie in Formularen

Formulare sind der Ort, an dem Hierarchiefehler Geld kosten, denn hier bricht ab, wer sich nicht zurechtfindet. Die Rangfolge im Formular:

1. Ein Feld pro Zeile, eine Spalte. Mehrspaltige Formulare zwingen den Blick in ein Zickzack und werden messbar langsamer und fehlerhafter ausgefüllt. Ausnahme: zusammengehörige Kurzfelder wie Postleitzahl und Ort.
2. Beschriftungen über dem Feld, in normaler Textgröße, nicht als Platzhalter im Feld. Der Platzhalter verschwindet beim Tippen und ist zu kontrastarm, siehe WCAG-Grundlagen.
3. Die Absende-Schaltfläche ist das hierarchisch stärkste Element des Formulars: farbig, groß, mit beschreibendem Text (“Anfrage senden”, nicht “Absenden”). Eine Abbrechen-Option daneben bleibt ein unscheinbarer Textlink.
4. Fehler springen ins Auge, ohne zu schreien: Meldung am Feld, klarer Kontrast, Text statt nur Farbe.
5. Optionales wird als optional markiert, nicht Pflichtfelder mit Sternchen-Rätseln. Wenn fast alles Pflicht ist, kennzeichnet man die Ausnahme.

Wer ein langes Formular hat, gliedert es in Abschnitte mit Zwischentiteln, dieselbe Ebenenlogik wie auf einer Inhaltsseite. Und für die Reihenfolge gilt das Positionsprinzip: erst das Einfache (Name, Kontakt), dann das Aufwendige, die Hürde wächst mit dem Fortschritt statt am Anfang abzuschrecken.

Der Kneif-Test

Der schnellste Weg zur Prüfung: Die Seite so weit verkleinern, dass Text nicht mehr lesbar ist, oder ein Bildschirmfoto unscharf stellen. Übrig bleiben Formen, Flächen und Kontraste.

Was jetzt hervorsticht, sieht ein Besucher zuerst. Wenn das nicht das Wichtigste ist, stimmt die Hierarchie nicht. Häufiges Ergebnis dieses Tests: Das Auffälligste auf der Seite ist ein dekoratives Bild oder ein Einwilligungsbanner.

Was Hierarchie zerstört

1. Alles ist wichtig. Fünf Abschnitte, alle mit gleich großer Überschrift, alle mit farbigem Hintergrund, alle mit Schaltfläche.
2. Zu viele Ebenen. Sechs verschiedene Schriftgrößen, die sich um jeweils zwei Pixel unterscheiden.
3. Dekoration, die stärker ist als der Inhalt. Ein großes Hintergrundbild mit Bewegung neben einer kleinen Überschrift.
4. Überschriftenebenen nach Optik gewählt. Eine H3, weil sie kleiner aussieht, zerstört die Struktur für Hilfsmittel und Suchmaschinen. Wenn eine H2 zu groß aussieht, wird sie kleiner gestaltet, nicht ersetzt.
5. Gleiche Abstände überall. Wenn alles denselben Abstand hat, ist nicht erkennbar, was zusammengehört.
6. Wichtiges unterhalb von Dekoration. Ein Einstiegsbereich über die vollständige Bildschirmhöhe verschiebt jede Information nach unten.

Aufbau einer Seite, der zuverlässig funktioniert

1. Eine Aussage, die sagt, was angeboten wird und für wen. Größtes Element der Seite.
2. Ein erklärender Satz darunter, in mittlerer Größe.
3. Die primäre Handlung, als einzige farbige Schaltfläche.
4. Drei bis sechs Abschnitte, jeder mit einer Abschnittsüberschrift auf derselben Ebene.
5. Innerhalb der Abschnitte wiederkehrende Muster: Karten, Listen, Tabellen.
6. Ein Abschluss mit der wiederholten primären Handlung.

Die Gleichbehandlung in Punkt 4 ist wichtig: Abschnitte auf derselben Ebene sehen gleich aus. Wer einen davon hervorheben will, verändert ihn im Ganzen, etwa durch eine abgesetzte Fläche, nicht durch eine größere Überschrift.

Der Zusammenhang mit Barrierefreiheit

Visuelle Hierarchie und Dokumentstruktur sind zwei Ebenen desselben Gedankens. Was optisch als Ebene erkennbar ist, sollte im Markup als Ebene ausgezeichnet sein: eine H1, darunter H2 für Abschnitte, darunter H3, wenn tatsächlich gegliedert wird.

Wer beides synchron hält, bekommt eine Seite, die für Sehende und für Nutzer von Hilfsmitteln dieselbe Struktur hat. Wer die Ebenen nach Optik wählt, bekommt zwei verschiedene Strukturen. Siehe WCAG-Grundlagen.