Visuelle Hierarchie und Weißraum im Webdesign
Wenn alles gleich laut ist, hört niemand zu. Visuelle Hierarchie sorgt dafür, dass Besucher das Wichtigste zuerst sehen. Wir zeigen, wie Größe, Kontrast, Position und Weißraum den Blick lenken, welche Grenzen sich bewährt haben und wie Sie Ihre Seiten mit einem einfachen Test prüfen.
Inhaltsverzeichnis
- Was ist visuelle Hierarchie?
- Die Werkzeuge der visuellen Hierarchie
- Weißraum: kein verschwendeter Platz
- Wie viele Ebenen? Bewährte Grenzen
- Der Squint-Test: Hierarchie in Sekunden prüfen
- Praxisbeispiel: die Leistungsseite eines Elektrikers
- Typische Fehler
- Schritt für Schritt: Hierarchie für eine Seite festlegen
- Checkliste: visuelle Hierarchie
- Häufige Fragen
- Visuelle Hierarchie ordnet Elemente so an, dass das Auge sie in der Reihenfolge ihrer Wichtigkeit wahrnimmt.
- Die wichtigsten Werkzeuge sind Größe, Kontrast, Position und Gruppierung. Farbe wirkt vor allem über den Kontrast zur Umgebung.
- Weißraum ist kein verschwendeter Platz: Er trennt, was nicht zusammengehört, und verbindet, was zusammengehört.
- Die Nielsen Norman Group empfiehlt für einfache Designs höchstens drei Schriftgrößen und höchstens zwei große Blickfänge pro Ansicht.
- Mit dem Squint-Test – Augen zusammenkneifen oder Entwurf weichzeichnen – sehen Sie in Sekunden, was wirklich hervorsticht.
Viele Websites haben ein gemeinsames Problem, das selten benannt wird: Alles ist gleich wichtig. Überschriften sind kaum größer als der Text, jeder Abschnitt hat einen farbigen Kasten, drei Buttons leuchten in derselben Farbe. Besucher wissen nicht, wo sie anfangen sollen – und fangen oft gar nicht erst an.
Visuelle Hierarchie löst das. Sie ist kein Geschmacksthema, sondern ein Werkzeug, mit dem Gestalter den Blick lenken. In diesem Beitrag erklären wir die Mittel, zeigen bewährte Grenzen und geben Ihnen einen Test an die Hand, mit dem Sie jede Seite in Sekunden prüfen.
Was ist visuelle Hierarchie?
Die Nielsen Norman Group definiert visuelle Hierarchie als die Anordnung von Gestaltungselementen so, dass das Auge sie in der Reihenfolge ihrer Wichtigkeit erfasst. Sie zeigt Besuchern, wohin sie zuerst schauen sollen. Fehlt sie, wirkt eine Seite überladen, und niemand weiß, wo er beginnen soll.
Eine gute Hierarchie beantwortet drei Fragen ohne Worte: Was ist das Wichtigste auf dieser Seite? Was gehört zusammen? Was kann ich hier tun?
Die Werkzeuge der visuellen Hierarchie
Gestalter haben eine überschaubare Zahl an Mitteln. Entscheidend ist, sie bewusst und sparsam einzusetzen:
| Mittel | Wirkung | Beispiel auf einer Firmenwebsite |
|---|---|---|
| Größe | Größeres wird zuerst gesehen und als wichtiger empfunden | Hauptüberschrift deutlich größer als Zwischenüberschriften |
| Kontrast | Was sich von der Umgebung abhebt, zieht den Blick an | Ein farbiger Haupt-Button auf ruhigem Hintergrund |
| Schriftstärke | Fett hebt hervor, ohne die Größe zu ändern | Schlüsselbegriffe in Listen, Preise, Fristen |
| Position | Oben und links wird in westlichen Sprachen meist zuerst gelesen | Kernaussage oben, wichtigste Leistung zuerst |
| Nähe und Gruppierung | Nah beieinander Liegendes wird als zusammengehörig wahrgenommen | Überschrift dicht über ihrem Text, Abstand zum nächsten Abschnitt |
| Weißraum | Freiraum isoliert und betont | Großzügiger Rand um den wichtigsten Button |
Größe
Größe ist das stärkste und einfachste Signal. Die Hauptüberschrift sollte auf den ersten Blick als solche erkennbar sein, Zwischenüberschriften deutlich kleiner als die Hauptüberschrift, aber deutlich größer als der Fließtext. Zu viele Abstufungen verwischen den Effekt allerdings – dazu gleich mehr.
Kontrast und Farbe
Die Nielsen Norman Group betont: Nicht die Farbe an sich macht ein Element auffällig, sondern der Kontrast zum Hintergrund und zu den Nachbarelementen. Ein blauer Button fällt auf einer weißen Seite auf, auf einer Seite voller blauer Kästen nicht. Kräftige, gesättigte Farben eignen sich für wichtige Elemente; Rot sollte Warnungen und Fehlern vorbehalten sein. Farbe darf außerdem nie das einzige Unterscheidungsmerkmal sein, weil nicht alle Menschen Farben gleich wahrnehmen. Mehr dazu im Beitrag Farben für die Firmenwebsite wählen.
Position und Lesemuster
Ohne klare Signale überfliegen Menschen Webseiten häufig in einem F-förmigen Muster – oben quer, dann am linken Rand entlang nach unten. Gute Hierarchie nutzt das: Wichtiges steht oben und am Anfang von Zeilen und Überschriften. Gleichzeitig kann eine starke Hierarchie das Muster durchbrechen und den Blick gezielt auf Elemente rechts oder weiter unten lenken.
Weißraum: kein verschwendeter Platz
Weißraum – auch Leerraum oder Negativraum genannt – ist jede Fläche ohne Inhalt. Er muss nicht weiß sein, sondern nur frei. Viele Inhaber empfinden ihn als ungenutzten Platz, den man noch füllen könnte. Das Gegenteil ist richtig: Weißraum ist eines der wirkungsvollsten Gestaltungsmittel.
Die Nielsen Norman Group beschreibt das Gesetz der Nähe als eines der stärksten Gruppierungssignale überhaupt: Elemente, die nah beieinanderliegen, werden als zusammengehörig wahrgenommen – stärker noch als gleiche Farbe oder Form. Daraus ergeben sich praktische Regeln:
- Überschriften gehören zu ihrem Text: Der Abstand über einer Zwischenüberschrift sollte größer sein als darunter. Sonst „schwebt“ sie zwischen zwei Abschnitten.
- Formulare in Gruppen gliedern: Felder für Kontaktdaten, Objektdaten und Wunschtermin optisch trennen. Ein Formular mit zwölf Feldern in drei Gruppen wirkt laut NN/g weniger abschreckend als ein großer Block.
- Beschriftung nah am Feld: Der Abstand zwischen Beschriftung und Eingabefeld muss kleiner sein als der zum nächsten Feld.
- Wichtiges freistellen: Ein Button mit viel Raum drumherum wirkt bedeutender als einer, der zwischen Textblöcken eingequetscht ist.
Was am Desktop nebeneinandersteht, rutscht mobil untereinander. Dabei können Zusammenhänge verloren gehen, etwa wenn ein Button plötzlich näher am nächsten Abschnitt steht als an seinem eigenen Text. Prüfen Sie Abstände deshalb auf jeder Bildschirmgröße.
Wie viele Ebenen? Bewährte Grenzen
Hierarchie lebt von Unterschieden. Je mehr Stufen es gibt, desto kleiner werden die Unterschiede – und desto schwächer wird die Wirkung. Die Nielsen Norman Group nennt für einfache Designs diese Orientierungswerte:
- Höchstens drei Schriftgrößen (klein, mittel, groß).
- Höchstens zwei große Blickfänge pro Ansicht.
- Höchstens zwei Haupt- und zwei Nebenfarben.
Das sind keine starren Gesetze, aber eine gute Kontrollfrage: Wenn eine Seite sechs Schriftgrößen, vier Akzentfarben und fünf Blickfänge hat, konkurrieren diese Elemente miteinander. Wie Sie Schriftgrößen, Zeilenabstände und Schriftarten sinnvoll festlegen, zeigt unser Beitrag Typografie im Webdesign.
Die sichtbare Ordnung sollte der technischen entsprechen: eine H1 pro Seite, darunter H2 und H3 in logischer Reihenfolge. Das hilft Screenreader-Nutzern, die sich über Überschriften durch eine Seite bewegen, und Suchmaschinen, die Gliederung zu verstehen. Überschriften nur wegen ihrer Optik zu wählen, ist ein häufiger Fehler.
Wir entwickeln klare Gestaltungsregeln für Ihre Seiten, die Besucher zum Wesentlichen führen.
Der Squint-Test: Hierarchie in Sekunden prüfen
Der einfachste Test für visuelle Hierarchie kostet nichts: Kneifen Sie die Augen zusammen, bis die Seite unscharf wird, oder zeichnen Sie einen Screenshot in einem Bildprogramm weich. Texte werden unlesbar, übrig bleiben Flächen, Kontraste und Größen.
Fragen Sie sich dann:
- Was sticht als Erstes hervor? Ist das auch das Wichtigste?
- Erkennen Sie die Gruppen – Kopfbereich, Abschnitte, Kacheln?
- Ist der Haupt-Button noch auszumachen?
- Gibt es einen Blickfang, den Sie gar nicht beabsichtigt haben?
Die Nielsen Norman Group beschreibt ein Beispiel, bei dem eine leichte Unschärfe die gewünschte Hierarchie bestätigte, eine starke Unschärfe aber einen unbeabsichtigten Blickfang durch ein kräftig gefärbtes Element offenlegte. Testen Sie außerdem mit echten Inhalten: Ein auffälliges Foto kann die geplante Ordnung komplett überlagern.
Praxisbeispiel: die Leistungsseite eines Elektrikers
Nehmen wir die Seite „Photovoltaik und Speicher“ eines Elektrobetriebs. Vor der Überarbeitung sieht sie so aus, wie wir es häufig antreffen: Ein Bild mit Solarmodulen füllt den oberen Bereich, darauf ein Slogan in dünner, heller Schrift. Darunter folgen fünf gleich große Textblöcke mit Überschriften in derselben Größe wie der Fließtext, dazwischen drei blaue Buttons mit „Mehr erfahren“, „Kontakt“ und „Downloads“.
Mit klarer Hierarchie ändert sich vor allem die Ordnung, kaum der Inhalt:
- Die Hauptüberschrift nennt die Leistung und das Einzugsgebiet und ist das größte Element der Seite.
- Eine Unterzeile in mittlerer Größe fasst den Nutzen zusammen.
- Ein einziger farbiger Button („Beratung anfragen“) steht frei darunter, ein zweiter Link zu Referenzen ist zurückhaltend als Textlink gestaltet.
- Die Abschnitte bekommen echte Zwischenüberschriften, mehr Abstand nach oben und kurze Listen statt Fließtext.
- Das Foto rückt neben die Überschrift und zeigt eine echte Anlage aus der Region statt eines Symbolbilds.
Im Squint-Test sind danach drei Dinge sichtbar: Überschrift, Bild, Button. Genau das sollen Besucher zuerst wahrnehmen.
Typische Fehler
- Alles fett, alles groß: Wenn jede zweite Zeile hervorgehoben ist, hebt sich nichts mehr ab.
- Zu viele gleichwertige Buttons: „Angebot“, „Rückruf“, „Termin“, „Katalog“ in derselben Farbe nebeneinander. Besser: ein Haupt-Button, ein zurückhaltender zweiter. Wie Sie Buttons formulieren und gestalten, zeigt unser Beitrag zum Call-to-Action.
- Überschriften ohne Abstand: Zwischenüberschriften kleben am vorherigen Abschnitt und gliedern nicht.
- Kästen für alles: Wenn jeder Absatz einen farbigen Hintergrund hat, verlieren Hervorhebungen ihre Wirkung.
- Dekoration als Blickfang: Ein großes Ornament oder ein Stockfoto zieht mehr Aufmerksamkeit als die Kernaussage.
- Nicht klickbare Elemente, die wie Buttons aussehen: Farbige Flächen mit Text, die nichts tun, verwirren.
Schritt für Schritt: Hierarchie für eine Seite festlegen
- Ziel der Seite benennenWas soll ein Besucher hier verstehen und tun? Zum Beispiel: „Erkennen, dass wir Wärmepumpen einbauen, und eine Beratung anfragen.“
- Inhalte rankenSchreiben Sie alle Elemente auf und nummerieren Sie sie nach Wichtigkeit. Platz 1 bekommt die stärkste Betonung, ab Platz 4 wird es ruhig.
- Ebenen zuweisenMaximal drei Schriftgrößen, ein Haupt-Button, eine Akzentfarbe für Wichtiges.
- Gruppen bildenZusammengehöriges nah zusammen, Abschnitte mit deutlichem Abstand trennen.
- Squint-Test machenAm Desktop und auf dem Smartphone. Stimmt das Ergebnis mit Ihrem Ranking überein?
- Mit echten Inhalten prüfenFotos und Texte einsetzen und den Test wiederholen.
Checkliste: visuelle Hierarchie
- Auf jeder Seite ist klar, was das Wichtigste ist – auch im Squint-Test.
- Es gibt höchstens drei deutlich unterscheidbare Schriftgrößen für Überschriften und Text.
- Pro Ansicht gibt es nicht mehr als zwei große Blickfänge.
- Ein Haupt-Button hebt sich klar ab, weitere Buttons sind zurückhaltender.
- Überschriften stehen näher an ihrem Text als am vorherigen Abschnitt.
- Formulare sind in sinnvolle Gruppen gegliedert.
- Hervorhebungen werden sparsam eingesetzt, Farbe nie als einziges Signal.
- Die sichtbare Gliederung entspricht der Überschriftenstruktur H1–H3.
- Abstände und Gruppen funktionieren auch auf dem Smartphone.
Häufige Fragen
Wirkt viel Weißraum nicht leer und unprofessionell?
Nur wenn er ohne Plan eingesetzt wird, etwa als riesige Lücke zwischen zwei Abschnitten. Gezielter Weißraum wirkt dagegen ruhig und hochwertig und macht Inhalte leichter erfassbar. Die Nielsen Norman Group nennt in ihrer Untersuchung zur Glaubwürdigkeit von Websites ausreichend Weißraum ausdrücklich als Teil einer professionell wirkenden Gestaltung. Entscheidend ist, dass Abstände einheitlich sind und Zusammenhänge sichtbar machen.
Gilt visuelle Hierarchie auch für Texte, die ich selbst im CMS pflege?
Ja, gerade dort. Wer Inhalte selbst einstellt, sollte Überschriften nach ihrer Bedeutung wählen und nicht nach ihrer Größe, Fettdruck sparsam nutzen und lange Absätze aufteilen. Hilfreich ist ein kurzer Styleguide, der festlegt, welche Überschriftenebene wofür steht und welche Elemente es gibt. So bleibt die Hierarchie auch nach vielen Änderungen erhalten.
Wie unterscheidet sich visuelle Hierarchie auf dem Smartphone?
Die Prinzipien sind gleich, aber der Platz ist knapper. Auf dem Smartphone steht fast alles untereinander, deshalb spielt die Reihenfolge eine größere Rolle als die Anordnung nebeneinander. Größenunterschiede zwischen Überschriften fallen oft etwas geringer aus, damit lange Überschriften nicht über mehrere Zeilen umbrechen. Umso wichtiger sind klare Abstände und ein deutlich erkennbarer Haupt-Button.
Quellen
- Nielsen Norman Group: Visual Hierarchy in UX – Definition (2021) – Kelley Gordon; Werkzeuge, Grenzwerte, Squint-Test
- Nielsen Norman Group: Proximity Principle in Visual Design (2020) – Aurora Harley; Gesetz der Nähe
- Nielsen Norman Group: F-Shaped Pattern of Reading on the Web
- Nielsen Norman Group: Trustworthiness in Web Design – 4 Credibility Factors (2016)
- W3C: Understanding WCAG 2.2 – Use of Color – Erfolgskriterium 1.4.1
H. Kiassif leitet das Marketing bei NEUZEITWERBER und betreut Websites, Kampagnen und Anfragestrecken für Betriebe aus Handwerk und Mittelstand.
