Visuelle Hierarchie ist die Antwort auf eine einfache Frage: Wenn ein Besucher 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.
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
- Alles ist wichtig. Fünf Abschnitte, alle mit gleich großer Überschrift, alle mit farbigem Hintergrund, alle mit Schaltfläche.
- Zu viele Ebenen. Sechs verschiedene Schriftgrößen, die sich um jeweils zwei Pixel unterscheiden.
- Dekoration, die stärker ist als der Inhalt. Ein großes Hintergrundbild mit Bewegung neben einer kleinen Überschrift.
- Ü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.
- Gleiche Abstände überall. Wenn alles denselben Abstand hat, ist nicht erkennbar, was zusammengehört.
- Wichtiges unterhalb von Dekoration. Ein Einstiegsbereich über die vollständige Bildschirmhöhe verschiebt jede Information nach unten.
Aufbau einer Seite, der zuverlässig funktioniert
- Eine Aussage, die sagt, was angeboten wird und für wen. Größtes Element der Seite.
- Ein erklärender Satz darunter, in mittlerer Größe.
- Die primäre Handlung, als einzige farbige Schaltfläche.
- Drei bis sechs Abschnitte, jeder mit einer Abschnittsüberschrift auf derselben Ebene.
- Innerhalb der Abschnitte wiederkehrende Muster: Karten, Listen, Tabellen.
- 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.