Die visuelle Hierarchie ordnet die Elemente einer Seite so, dass das Auge sie in der beabsichtigten Reihenfolge ihrer Wichtigkeit aufnimmt. Das Wichtigste fällt zuerst auf, Nebensächliches tritt zurück. Fehlt die Hierarchie, konkurrieren alle Elemente gleich stark um Aufmerksamkeit, und nichts führt.
- Visuelle Hierarchie
Die Rangfolge, in der Elemente einer Seite wahrgenommen werden, festgelegt über Größe, Kontrast, Farbe und Abstand.
Beispiel: „Die visuelle Hierarchie der Karte führt von der Überschrift über den Text zum Button.“Auch: englisch visual hierarchy.
Abgrenzung zur typografischen Hierarchie: Sie ordnet nur die Schrift, also Überschriften, Zwischenzeilen und Fließtext. Die visuelle Hierarchie umfasst alle Elemente einer Seite.
Womit visuelle Hierarchie entsteht
Die Nielsen Norman Group nennt Farbe und Kontrast, Größe, Abstand und Gruppierung als Mittel. Größe zeigt Wichtigkeit an, Kontrast hebt hervor, und mehr Abstand um eine Gruppe grenzt sie ab. Als Faustregel empfiehlt sie zwei bis drei Schriftgrößen und Bausteine in klein, mittel und groß.
Visuelle Hierarchie prüfen
Ein einfacher Test: Was sieht man auf der Seite zuerst, was als Zweites? Stimmt die Antwort nicht mit dem Ziel der Seite überein, ist die Hierarchie verrutscht, meist weil zu viele Elemente gleich laut gestaltet sind.
Visuelle Hierarchie und Überschriften
Die Hierarchie im Bild und die Gliederung im HTML sollten übereinstimmen. Screenreader springen über die Überschriftenebenen; sieht eine Zwischenüberschrift aus wie der Seitentitel, stimmen Bild und Struktur nicht mehr überein, und die Seite wird schwerer verständlich.