Visuelle Hierarchie im Webdesign: Ein praktisches Rahmenwerk mit Beispielen

Visuelle Hierarchie im Webdesign ist die bewusste Lenkung der Aufmerksamkeit auf einer Seite. Sie legen fest, was zuerst, was als Nächstes und was nur dann gelesen wird, wenn der Besucher länger auf der Seite bleibt. Die Seite führt den Blick entweder gezielt durch diese Reihenfolge oder lenkt die Aufmerksamkeit auf das jeweils auffälligste Element, wodurch die gewünschte Leserschaft verloren geht.

Fünf Hebel bilden die Hierarchie: Größe, Gewicht, Raum, Kontrast und Bewegung. Jede andere Technik ist eine Kombination dieser fünf. Die meisten Seiten setzen zwei Hebel richtig und drei falsch um, weshalb sie überladen wirken, ohne gelesen zu werden. Die Lösung liegt nicht in mehr Design. Die Lösung besteht darin, die Hebel anhand des tatsächlichen Lesepfads zu priorisieren und jeden Hebel gezielt für diesen Lesepfad einzusetzen.

Dieser Artikel beschreibt die praktische Umsetzung dieser Lösung. Die fünf Hebel, sechs echte Landingpages von Linear, Vercel, Stripe, Figma, Arc und Apple mit den aktuellen Hierarchieänderungen, drei Vorher/Nachher-Analysen, die häufige Fehler und deren Behebung aufzeigen, und eine Figma-Checkliste, die Sie in zwanzig Minuten auf jeder Arbeitsdatei durchführen können, bevor Sie sie an die Entwickler übergeben.

Visuelle Hierarchie, die Arbeitsdefinition

Visuelle Hierarchie ist die Reihenfolge, in der ein Betrachter eine Seite liest. Nicht die Reihenfolge, in der die Elemente im DOM erscheinen, nicht ihre Position im Designraster, sondern die Reihenfolge, in der das Auge sie tatsächlich wahrnimmt.

Eine starke Hierarchie bedeutet, dass das Auge zuerst auf die Hauptbotschaft, dann auf die Nebenbotschaft und zuletzt auf die ergänzenden Inhalte stößt – und zwar jedes Mal genau in dieser Reihenfolge. Eine schwache Hierarchie führt dazu, dass der Blick des Besuchers abschweift, zwischen konkurrierenden Elementen hin und her springt, auf einem Link in der Fußzeile landet, bevor er die Überschrift sieht, und die Seite verlässt, ohne ihren Zweck erfüllt zu haben.

Die Anforderungen variieren je nach Seite. Auf der Startseite sollte der Blick zuerst auf das Nutzenversprechen und dann auf einen Call-to-Action (CTA) fallen. Auf einer Preisseite sollte der Blick zuerst auf die empfohlene Stufe, dann auf die günstigere Stufe und schließlich auf die FAQ gelenkt werden. Ein Blogbeitrag sollte zuerst auf die Überschrift, dann auf die Einleitung und schließlich auf den ersten Absatz fallen. Die Einstellungen der Hierarchiehebel ändern sich je nach Zweck. Die Tatsache, dass eine Hierarchie existiert, bleibt jedoch bestehen.

Hier enden auch die meisten Artikel zu diesem Thema. Sie definieren Hierarchie und gehen dann zum Schluss. Die eigentliche Arbeit besteht nicht in der Definition, sondern darin, die richtigen Hebel für die jeweilige Seite auszuwählen.

Die fünf Hebel für den Aufbau von Hierarchie

Größe, Gewicht, Raum, Kontrast und Bewegung sind die einzigen Werkzeuge, die Sie benötigen. Alles andere ist eine Kombination dieser fünf.

Größe ist die relative Größe eines Elements im Vergleich zu seiner Umgebung. Gewicht beschreibt, wie massiv ein Element wirkt. Es wird durch Schriftstärke, Strichstärke, Fülldichte und visuelle Masse gesteuert. Raum beschreibt, wie viel Platz ein Element um sich herum hat – die negative Form, die dem Element Raum gibt und es als primäres Element wahrnehmbar macht. Kontrast ist der Unterschied in Farbe, Helligkeit oder Sättigung zwischen einem Element und seinem Hintergrund. Bewegung beschreibt, ob und wie das Element animiert erscheint oder auf Interaktionen reagiert.

Jede Hierarchieentscheidung ist eine Einstellung an einem oder mehreren dieser fünf Hebel. Die Überschrift ist größer als der Fließtext – das ist die Größe. Der Call-to-Action (CTA) ist fett gedruckt – das ist das Gewicht. Der Hero-Bereich hat 80 % Weißraum – das ist der Raum. Der CTA ist leuchtend orange vor dunklem Hintergrund – das ist der Kontrast. Die Überschrift erscheint etwas vor dem Fließtext – das ist die Bewegung.

Der Fehler, den die meisten Seiten machen, ist, alle fünf Hebel gleichzeitig für jedes Element zu betätigen. Alles ist groß, alles ist fett, alles hat viel Raum, alles hat hohen Kontrast, alles bewegt sich. Die Hierarchie geht verloren, sobald jedes Element den gleichen Rang beansprucht. Die Kunst besteht darin, die einzelnen Hebel für die jeweiligen Elemente auszuwählen und Hebel bewusst neutral zu lassen.

Eine hilfreiche Regel: Jedes Element auf einer Seite sollte auf maximal zwei Hebeln bewertet werden. Die Hero-Überschrift ist groß und kontrastreich. Erledigt. Der Call-to-Action ist fett und kontrastreich. Erledigt. Der Begleittext ist auf allen Hebeln neutral. Erledigt. Die Seite hat nun eine intuitive Lesestruktur.

Die Größe bestimmt den ersten Lesevorgang

Das größte Element auf der Seite fällt dem Auge zuerst ins Auge. Daher sollte es das sein, was das Unternehmen als erstes lesen möchte.

Die meisten Teams wissen das theoretisch, ignorieren es aber in der Praxis. Sie machen das Logo zum größten Element, weil das Brand-Team es so gewünscht hat. Sie machen die Navigation zum größten Element, weil sie die meisten Links enthält und diese aufnehmen muss. Sie machen das Hero-Bild zum größten Element, weil der Fotograf viel dafür verlangt hat. Keine dieser Entscheidungen berücksichtigt, was der Besucher zuerst lesen möchte.

Die Lösung ist offensichtlich. Die Überschrift des Hero-Bereichs, das Nutzenversprechen oder der primäre Call-to-Action (CTA) – je nach Seite – ist mit Abstand das größte Element. Nicht nur etwas größer, sondern deutlich sichtbar. So groß, dass kein anderes Element im ersten Blickfeld die Aufmerksamkeit auf sich zieht.

Linear macht das auf der Feature-Seite. Die Überschrift ist riesig, der begleitende Text klein, die Navigation klein, das Logo klein. Ein einziges Element beansprucht die Aufmerksamkeit des Betrachters, und der Blick fällt darauf, noch bevor die Seite vollständig geladen ist. Im Vergleich dazu sind auf einer typischen SaaS-Homepage Überschrift, Navigation und Hero-Illustration etwa gleich groß. Der Blick wird geteilt, der Lesefluss unterbrochen.

Größe ist relativ. Eine 48 Pixel große Überschrift auf einer Seite mit 16 Pixel großem Fließtext wirkt eindrucksvoll. Eine 48 Pixel große Überschrift auf einer Seite mit 28 Pixel großem Fließtext hingegen nicht. Das Verhältnis ist entscheidend für die Platzierung, nicht die absolute Zahl. Streben Sie beim Hero-Element jeder Landingpage ein Verhältnis von Primärtext zu Fließtext von mindestens 2,5x, idealerweise 3x oder höher, an.

Die Gewichtung trennt Primärtext von Sekundärtext

Die Gewichtung ist der zweite Filter, und hier scheitern die meisten Seiten stillschweigend, weil Fettdruck als Dekoration statt als Rangordnungssystem verwendet wird.

Fettdruck dient der Hierarchie. Er signalisiert dem Auge: Dieses Element ist wichtiger als die daneben stehenden Elemente mit normaler Gewichtung. Sobald eine Seite in drei verschiedenen Absätzen fettgedruckten Text enthält, die alle ungefähr gleich wichtig sind, verliert die Rangordnung ihre Bedeutung. Fettdruck wird zur Textur, nicht zur Rangordnung. Das Auge verliert das Vertrauen in ihn.

Verwenden Sie die Gewichtung als striktes Rangordnungssystem. Die höchste Gewichtung für das wichtigste Element der Seite. Eine etwas geringere Gewichtung für das sekundäre Element. Normale Gewichtung für den unterstützenden Text. Verwenden Sie im Fließtext keine Fettdrucke, es sei denn, der fettgedruckte Satz ist tatsächlich wichtiger als der umgebende Satz, was selten vorkommt.

Stripe setzt dies konsequent um. Betrachten Sie eine beliebige Landingpage von Stripe. Die Hero-Überschrift ist fett gedruckt. Der restliche Text ist normal formatiert. Im Fließtext selbst gibt es fast keine Fettdrucke. Die Seite liest sich so, wie Stripe es wünscht, und die Gewichtung trägt maßgeblich zur Wirkung bei, ohne dabei aufdringlich zu wirken.

Gewichtung beschränkt sich nicht nur auf Typografie. Der CTA-Button wirkt durch Füllfarbe, Rahmenstärke oder Schlagschatten gewichtiger als die umgebenden Elemente. Eine hervorgehobene Preisstufe wirkt durch einen dunkleren Kartenhintergrund oder einen dickeren Rahmen ebenfalls gewichtiger als die übrigen Stufen. Das Prinzip ist dasselbe: Mehr Gewicht bedeutet höhere Priorität.

Ein häufiger Fehler: Designer greifen oft zu Fettdruck im Fließtext, um wichtige Phrasen hervorzuheben. Diese Hervorhebungen sind jedoch meist nicht wirklich von höherer Priorität, sondern wirken eher wie eine nervöse Betonung. Entfernt man diese Hervorhebungen, liest sich der Fließtext klarer, und die wirklich wichtigen, fettgedruckten Phrasen gewinnen ihre eigentliche Bedeutung zurück.

Raum als unterschätzter Hebel

Leerraum ist nicht leer, er ist die negative Form, die jedem anderen Element seine Bedeutung verleiht.

Raum ordnet Elemente nach ihrer Isolation. Das Element mit dem meisten Leerraum um sich herum wirkt am wichtigsten, unabhängig von Größe oder Gewicht. Eine kleine Überschrift in der Mitte eines größtenteils leeren Viewports wirkt primär. Eine große Überschrift, die neben Navigation, Logo und Hero-Illustration gequetscht ist, wirkt wie eines von vier konkurrierenden Elementen.

Die Produktseiten von Apple sind ein Paradebeispiel. Das Hero auf einer iPhone-Produktseite ist oft ein einzelnes Foto mit einer kurzen Bildunterschrift, umgeben von viel Leerraum. Das Element mit dem meisten Raum gewinnt die Aufmerksamkeit, und Apple gewinnt dies jedes Mal auf jeder Seite. Das Produkt steht im Vordergrund, alles andere ist unterstützend, und der Raum als Hebel leistet den größten Teil der Arbeit.

Die meisten Seiten lassen keinen Raum leer. Es gibt immer noch ein weiteres Testimonial-Logo, das eingefügt werden muss, eine weitere Funktion, die erwähnt werden soll, einen weiteren sekundären Call-to-Action (CTA). Jede Ergänzung schwächt die Hierarchie. Das Element, das bisher allein die Aufmerksamkeit auf sich zog, konkurriert nun mit dem Neuzugang, und die Bedeutung des Elements nimmt ab.

Die Disziplin besteht darin, den sichtbaren Bereich bewusst weitgehend leer zu lassen. Der Hero-Bereich einer Landingpage sollte mindestens 60 Prozent Freiraum haben, idealerweise 70 Prozent oder mehr, wobei die Hauptbotschaft einen klar definierten visuellen Bereich in der Mitte oder links davon einnimmt. Wenn sich der Hero-Bereich mit so viel Freiraum unwohl fühlt, hat das Team diesem Hebel noch nicht vertraut.

Auch innerhalb von Elementen spielt der Raum eine Rolle. Die Zeilenhöhe des Fließtextes, der Abstand zwischen Abschnitten, die Innenabstände in Karten, der Abstand zwischen Überschrift und zugehörigem Text – all dies sind Hebel für die Raumgestaltung und beeinflussen die Position des Elements im Verhältnis zu seiner Umgebung. Eine geringe Zeilenhöhe bei großzügigen Abschnittsabständen signalisiert dem Auge: Dieser Absatz bildet eine Einheit, der nächste Abschnitt eine andere. Zu geringe Zeilenhöhe bei gleichzeitig geringem Abstand zwischen den Abschnitten vermittelt dem Auge den Eindruck eines endlosen Textblocks – viel Glück beim Auffinden der gewünschten Informationen.

Kontrast fesselt den Blick

Kontrast ist das, was eine lesbare Seite in eine fesselnde verwandelt.

Kontrast wirkt auf drei Ebenen: Helligkeitskontrast (der Unterschied in der Helligkeit zwischen einem Element und seinem Hintergrund) – der Hebel, der zugänglicher Farbkontrast steuert und die Lesbarkeit am stärksten beeinflusst. Farbkontrast (der Unterschied im Farbton zwischen einem Element und seiner Umgebung) – der Hebel, der einen Call-to-Action (CTA) vom Rest der Seite abhebt. Sättigungskontrast (der Unterschied zwischen kräftigen und gedeckten Farben) – der Hebel, der einen einzelnen Akzent vor einer entsättigten Farbpalette hervorhebt.

Der primäre CTA von Stripe besteht aus einer einzelnen, hochgesättigten Farbe auf einer Seite mit geringer Sättigung. Das Auge erfasst ihn sofort, da er das einzige gesättigte Element im gesamten Viewport ist. Linear macht es genauso mit einem einzelnen, leuchtend violetten Button auf einer fast monochromen Seite. Keiner dieser CTAs ist das größte oder auffälligste Element. Sie ziehen die Aufmerksamkeit auf sich, weil sie das kontrastreichste Element auf der Seite sind – Punkt.

Ein häufiger Fehler: Seiten mit fünf oder sechs gesättigten Farben, die um Aufmerksamkeit konkurrieren. Ein grüner CTA, eine rote Fehlermeldung, eine blaue Linkfarbe, eine orange Hervorhebung, ein pinkfarbener Akzent auf der Hero-Illustration. Jede Farbe will die Aufmerksamkeit auf sich ziehen, und das Auge gibt auf, sie zu priorisieren. Wählen Sie eine Akzentfarbe, verwenden Sie sie für eine einzige Funktion (in der Regel den primären CTA) und entsättigen Sie alle anderen Farben.

Kontrast hat auch einen Mindestwert. Grauer Fließtext auf einem etwas dunkleren grauen Hintergrund ist nicht nur unattraktiv, sondern beeinträchtigt auch die Barrierefreiheit. Streben Sie ein Kontrastverhältnis von mindestens 7:1 für Fließtext und 4,5:1 für UI-Elemente an. Unterhalb dieser Werte führt Kontrast nicht mehr zu einer besseren Lesbarkeit, sondern zu Ermüdung.

Bewegung rundet die Sequenz ab

Bewegung ist der letzte Hebel und wird am häufigsten falsch eingesetzt, da viele Teams sie als Dekoration betrachten, obwohl sie eigentlich ein Orientierungshilfe ist.

Das Auge folgt Bewegungen. Jedes animierte Element ist kurzzeitig das wichtigste Element auf der Seite, unabhängig von Größe, Gewichtung, Platz oder Kontrast. Das ist eine enorme Wirkung, weshalb Bewegung am leichtesten falsch eingesetzt werden kann. Auf einer Seite, auf der jedes Element eingeblendet, nach oben geschoben und beim Überfahren mit der Maus pulsiert, ist die Bewegung konstant, wodurch sie keine Rolle mehr spielt.

Setzen Sie Bewegung sparsam und nur für das wichtigste Element ein. Die Hero-Überschrift wird animiert eingeblendet. Der Call-to-Action (CTA) hat einen Hover-Effekt. Der begleitende Text ist statisch. Das Auge fällt zuerst auf die Überschrift, da sie sich bewegt hat, und dann auf den CTA, wenn sich der Cursor nähert. So bleibt der Lesepfad erhalten.

Die Homepage von Vercel nutzt Bewegung als zentrales Gestaltungselement. Der Hero-Bereich wird in einer festgelegten Reihenfolge animiert: zuerst die Überschrift, dann der unterstützende Text, anschließend der Call-to-Action (CTA). Der Rest der Seite bleibt weitgehend statisch, bis der Nutzer scrollt. Die Bewegung selbst bildet die Abfolge. Bis der Besucher die Hero-Animation beendet hat, hat er die Seite in der von Vercel gewünschten Reihenfolge gelesen.

Eine sinnvolle Einschränkung: Beschränken Sie die Bewegung auf ein Element pro Viewport sowie auf Interaktionszustände (Hover, Fokus, aktiv) eines einzelnen primären CTAs. Werden mehrere Elemente gleichzeitig animiert, dient die Bewegung nicht der Darstellung, sondern der Dekoration. Die Seite wirkt unruhig, ohne den Blick des Nutzers gezielt zu lenken. Bewegung als Gestaltungselement passt zudem hervorragend zu Prinzipien des Bewegungsdesignss Ansatz, bei dem jede Animation eine Frage beantwortet, anstatt nur die Zeit zu füllen.

Sechs kommentierte Landingpages

Das Framework ist nur dann relevant, wenn es sich im praktischen Einsatz bewährt. Daher präsentieren wir Ihnen sechs Landingpages, die sich aktuell in der Produktion befinden.

Jede Analyse ist kurz und prägnant. Sie zeigt, was die Seite an den einzelnen Hebeln leistet, wo sie punktet und wo Potenzial ungenutzt bleibt. Keine dieser Analysen ist perfekt. Alle liegen jedoch über dem Standard für SaaS-Landingpages, weshalb sie eine eingehende Untersuchung wert sind.

Linear, Hierarchie als Komprimierung

Linear bietet eine der übersichtlichsten Hierarchien im Web, da jeder Hebel exakt eine Funktion erfüllt.

Größe: Hero-Überschrift etwa viermal so lang wie der Fließtext. Schriftstärke: Die Überschrift ist fett, ansonsten normal. Freiraum: Der Hero-Bereich bietet 70 % Leerraum, keine konkurrierenden Illustrationen. Kontrast: Ein leuchtend violetter CTA hebt sich von einer nahezu monochromen Seite ab. Bewegung: Ein dezenter Fade-in im Hero-Bereich, unterhalb der Falz keine Animationen.

Das Auge fällt auf die Überschrift, erfasst den begleitenden Text, findet den CTA und liest den Rest der Seite nur, wenn der Besucher verweilt. Jeder Hebel ist optimal abgestimmt. Jede Entscheidung dient einem bestimmten Lesepfad.

Wo Linear Potenzial verschenkt. Das Feature-Raster unterhalb des Hero-Elements ist dichter als das Hero-Element selbst, und das Rangsignal schwächt sich leicht ab, sobald der Blick über die Falz hinaus wandert. Eine Angleichung des Größenverhältnisses in diesem Raster würde die Hierarchie des Hero-Elements weiter nach unten auf der Seite ausdehnen.

Vercel, Hierarchie als Bewegung

Vercel nutzt Bewegung als primären Hebel der Hierarchie, und das funktioniert, weil die anderen vier Hebel bewusst zurückhaltend eingesetzt werden.

Größe: Die Hero-Überschrift ist groß, aber nicht riesig. Schriftstärke: Normal, nicht zu dick. Platz: Großzügig, nicht übertrieben. Kontrast: Gering, größtenteils Graustufen bis zum Call-to-Action. Bewegung: Dominant. Das Hero-Element wird in einer bewusst gewählten Sequenz animiert, die die Lesereihenfolge durch Bewegung aufbaut, und der Rest der Seite belohnt das Scrollen mit Animationen im darunterliegenden Bento-Raster.

Diese Strategie funktioniert, weil die anderen Hebel so zurückhaltend eingesetzt werden, dass die Bewegung ihre Wirkung entfalten kann. Wäre der Held ebenfalls groß, schwer und kontrastreich, würde die Bewegung hektisch wirken. Da der statische Zustand ruhig ist, wirkt die Bewegung wie eine Choreografie, nicht chaotisch.

Wo Vercel Potenzial verschenkt: Die Animationszeiten beim ersten Laden können Nutzer mit geringer Bewegungspräferenz unnötig überfordern. Ein aggressiverer Fallback für Nutzer mit geringerer Bewegungspräferenz würde die Hierarchie für diese Zielgruppe schützen, ohne die Choreografie für alle anderen zu beeinträchtigen.

Stripe, Hierarchie als Zurückhaltung

Die Hierarchie von Stripe ist größtenteils unsichtbar – die höchste Kunstform.

Größe: Die Proportionen sind klar, aber nicht übertrieben. Gewicht: Eine einzelne, fette Schrift für die Überschrift, ansonsten normale. Platz: Großzügig. Kontrast: Gering auf der gesamten Seite, mit einer hochgesättigten Hauptfarbe für den Call-to-Action (CTA). Bewegung: Fast keine, abgesehen von einem dezenten Hover-Effekt beim CTA.

Die Disziplin von Stripe ist die Disziplin der Zurückhaltung. Sie könnten an jedem Hebel mehr ausreizen, tun es aber nicht. Das Ergebnis ist eine Seite, die sich in der von Stripe gewünschten Reihenfolge lesen lässt, ohne jemals aufgesetzt zu wirken. Die Hierarchie ist spürbar, nicht sichtbar.

Wo Stripe Geld verschenkt. Manche Produktseiten überladen den Hero-Bereich mit Codebeispielen, Illustrationen und unterstützendem Text, was die erste Lesbarkeit beeinträchtigt. Würde man den Hero-Bereich auf eine einzelne Überschrift und einen Call-to-Action reduzieren und das Codebeispiel in den zweiten Viewport verschieben, wäre die Lesbarkeit wiederhergestellt.

Figma, Hierarchie als Dichte

Figma packt mehr in einen Hero-Bereich als fast alle Konkurrenten und hält den Lesepfad dennoch klar.

Größe: Große Überschrift auf kleinerem Dek, Produkt-UI-Elemente noch kleiner skaliert. Gewichtung: Gewichtige Überschrift, normaler Dek, dezente UI-Overlays. Platzbedarf: geringer als bei Linear oder Stripe, aber höher als bei den meisten vergleichbaren SaaS-Anbietern. Kontrast: hoch bei der Überschrift vor dunklem Hintergrund, geringer bei den umgebenden Elementen. Bewegung: dezent in der Produktvorschau, keine in der Überschrift selbst.

Der Hero-Bereich von Figma funktioniert, weil das Größen- und Gewichtungsverhältnis so gewählt ist, dass er die Aufmerksamkeit der Leser fesselt, selbst wenn mehr Inhalte um den sichtbaren Bereich konkurrieren. Eine schwächere Abstimmung dieser beiden Faktoren würde die Überschrift in den Hintergrund drängen. Da die Verhältnisse stimmen, verträgt die Seite eine höhere Inhaltsdichte als üblich, ohne die Hierarchie zu beeinträchtigen.

Hier lässt Figma Potenzial ungenutzt. Die Navigation wirkt durch mehrere primäre Navigationselemente, eine sekundäre Navigation, einen Kontaktbutton und einen Anmeldebutton optisch überladen. Eine Reduzierung auf einen einzigen primären Call-to-Action (CTA) in der Navigation würde die Konkurrenz um den Hero-Bereich verringern.

Arc, Hierarchie als Rebellion

Arc bricht bewusst mit Größen- und Gewichtungskonventionen, und die Hierarchie funktioniert dennoch, da Kontrast und Bewegung die Hauptrolle spielen.

Größe: unauffällig. Gewicht: nicht schwerfällig. Raum: variabel, manchmal beengt. Kontrast: hoch über die gesamte Seite, mit mehreren gesättigten Farben. Bewegung: dynamisch, mit Parallax-Effekten, scrollbasierten Effekten und animierten Illustrationen.

Arcs Hero-Element ist ein Gegenbeispiel zum Standard. Die Überschrift ist nicht das größte, nicht das schwerste Element, und der Blick fällt nicht unbedingt zuerst darauf. Die Seite funktioniert, weil Arc ein bekanntes und zugleich unbekanntes Element ist, der Besucher neugierig ist und Bewegung plus Kontrast den Blick durch eine Sequenz lenkt, die keine traditionelle Hierarchie benötigt.

Dies ist die Ausnahme, die das Rahmenwerk bestätigt. Arc kann die Regeln brechen, weil die Marke sich die Erlaubnis dazu durch Positionierung, Erwartungen der Zielgruppe und die Bereitschaft der Besucher zum Scrollen und Erkunden erkauft hat. Die meisten Marken haben sich diese Erlaubnis nicht erkauft und sollten nicht davon ausgehen, dass sie sie haben.

Wo Arc Geld verschenkt. Der dynamische Hero-Bereich kann Erstbesucher verwirren, die Arc nicht kennen. Ein klareres Element oberhalb der Animation würde Neukunden helfen, ohne die Zielgruppe, die der Marke bereits vertraut, zu verprellen.

Apple, Hierarchie als Bühne

Die Produktseiten von Apple sind ein Paradebeispiel für scrollbasierte Hierarchie, bei der Raum und Bewegung dominieren.

Größe: Riesige Produktbilder, fast plakatartige Typografie bei wichtigen Aussagen, ansonsten klein. Gewicht: meist gering. Platz: enorm, oft 80 % oder mehr des sichtbaren Bereichs. Kontrast: bewusst eingesetzt, oft ein Hauptfoto vor fast schwarzem Hintergrund. Bewegung: scrollgesteuert, wobei jeder Abschnitt erst beim Scrollen sichtbar wird.

Apple betrachtet den gesamten Scrollvorgang als Hierarchie. Jeder Abschnitt beansprucht genau einen Lesevorgang. Der Besucher durchläuft eine vom Seitenlayout vorab festgelegte Sequenz. Am Ende der Seite hat Apple eine Geschichte in der von Apple gewünschten Reihenfolge erzählt.

Hier liegt das Potenzial von Apple: Die Produktseiten laden auf leistungsschwächeren Geräten langsam, und die Bewegungsabläufe sind bei langsamen Verbindungen beeinträchtigt. Dies kann die Hierarchie für Besucher, die die neuen Inhalte nicht sehen, verflachen. Ein aggressiverer Fallback bei geringer Bandbreite würde den Lesepfad für weniger frequentierte Besucher schützen.

Sie wünschen sich eine Website, auf der jede Seite einen bewussten Lesepfad bietet und nicht auf Raten basiert? Miete Brainy. UXBrainy bietet Hierarchie-Audits und die Entwicklung kompletter Designsysteme an, AppBrainy hingegen entwickelt Produkt-UIs für Teams, die dieselbe Disziplin auch auf ihre Anwendungen anwenden möchten.

Drei Vorher-Nachher-Beispiele

Die Stellschrauben zu kennen ist das eine, eine echte Seite zu optimieren das andere. Hier sind drei häufige Hierarchiefehler und ihre exakten Lösungen.

Erstens: Der Hero-Bereich mit fünf konkurrierenden Elementen. Ein typischer SaaS-Hero-Bereich besteht aus Überschrift, Einleitung, primärem und sekundärem Call-to-Action (CTA), einem Kundenlogo und einer Hero-Illustration – alles im sichtbaren Bereich. Jedes Element buhlt um Aufmerksamkeit, keines wirkt überzeugend. Lösung: Wählen Sie das wichtigste Element (meist Überschrift und primärer CTA), beanspruchen Sie den sichtbaren Bereich nur mit diesen beiden und verschieben Sie alles andere nach unten. Der Hero-Bereich ist nun sofort erkennbar.

Zweitens: Die Seite, die alles fett formatiert. Fettgedruckter Text in der Überschrift, fettgedruckte Phrasen in drei Absätzen, fettgedruckte Zwischenüberschriften, fettgedruckte CTAs, fettgedruckte Testimonials. Die Gewichtung der Elemente hat ihre Wirkung verloren. Korrektur: Entfernen Sie alle Fettdrucke innerhalb von Fließtextabsätzen, es sei denn, der fettgedruckte Satz ist tatsächlich wichtiger als der umgebende Satz. Stellen Sie die Fettdruckformatierung für das jeweils wichtigste Element pro Abschnitt wieder her. Die Gewichtung dient nun wieder als Rangfolge und nicht mehr als Textur.

Drittens: Die Seite mit fünf Akzentfarben. Grüne Handlungsaufforderungen (CTAs), rote Fehlermeldungen, blaue Links, orange Hervorhebungen, pinke Hero-Illustrationen. Die Kontrastdarstellung hat ihre Wirkung verloren und wirkt ermüdend. Korrektur: Wählen Sie eine Akzentfarbe für die primäre Handlungsaufforderung (CTA), entsättigen Sie alle anderen Farben und verwenden Sie Graustufen oder gedeckte Versionen der Markenfarbe. Akzeptieren Sie, dass „farbig aussehen“ nicht dasselbe ist wie „gute Platzierung“. Die Seite platziert die Handlungsaufforderung nun klar und die Marke wirkt selbstbewusster.

Jede Korrektur ist keine Neugestaltung. Jede Korrektur besteht darin, konkurrierende Elemente zu entfernen, bis die Gewichtung wieder ihre Funktion erfüllt. Die meisten Hierarchieprobleme sind Subtraktionsprobleme, die als Designprobleme getarnt sind.

Die meisten Hierarchieprobleme sind Subtraktionsprobleme.

Dies ist eine Seite mit fünf Akzentfarben. ## Die 20-Minuten-Checkliste für BRAND7-Audits

Führen Sie diese Checkliste vor der Übergabe an einer beliebigen Arbeitsdatei durch, um Hierarchiefehler zu erkennen, die in der Produktion landen könnten.

1. Blinzeltest: Betrachten Sie die Zeichenfläche mit zusammengekniffenen Augen, bis die Details verschwimmen. Fängt ein Element die Aufmerksamkeit auf sich? Falls nicht, hat der Hero-Bereich ein Problem mit Größe oder Gewichtung.

2. Erstlesetest: Decken Sie die Seite ab, geben Sie sie kurz frei und decken Sie sie wieder ab. Was haben Sie gelesen? Falls es nicht die Hauptbotschaft war, korrigieren Sie Größe und Kontrast dieses Elements.

3. Verhältnis von Überschrift zu Fließtext: Vergleichen Sie die Größe der Hauptüberschrift mit der des Fließtextes. Ist das Verhältnis kleiner als 2,5, ist die Schriftgröße zu gering.

4. Gewichtung: Zählen Sie die fettgedruckten Elemente auf der Seite. Sind es mehr als drei pro Ansichtsfenster, dient die Gewichtung der Dekoration und nicht der Gewichtung.

5. Farbsättigung: Zählen Sie die gesättigten Akzentfarben auf der Seite. Sind es mehr als zwei, wirkt der Kontrast ermüdend und nicht der Gewichtung.

6. Leerraumanteil. Schätzen Sie den Leerraum im Hero-Viewport. Beträgt er weniger als 60 %, ist der Leerraum zu gering.

7. Animationen. Zählen Sie die Elemente, die beim ersten Laden animiert werden. Sind es mehr als zwei, wird die Animation nicht mehr berücksichtigt.

8. CTA-Kontrast. Überprüfen Sie die Farbe des primären CTAs vor dem Hintergrund. Liegt das Kontrastverhältnis unter 4,5:1, korrigieren Sie es vor der Veröffentlichung.

9. Textkontrast. Überprüfen Sie den Text vor dem Hintergrund. Liegt das Verhältnis unter 7:1, ist die Seite schlecht lesbar.

10. Zeilenhöhe. Überprüfen Sie die Zeilenhöhe des Fließtextes. Ist sie kleiner als das 1,5-fache der Schriftgröße, wirkt die Seite unübersichtlich.

11. Abschnittsabstand. Überprüfen Sie den Abstand zwischen den Hauptabschnitten. Verschwimmen die Abschnitte, ist der Leerraum nicht optimal.

12. Test für mobile Endgeräte. Öffnen Sie die Datei in mobiler Breite. Bleibt die Hierarchie erhalten oder schrumpft die Überschrift auf die gleiche Größe wie der Fließtext? Im letzteren Fall muss die Schriftgröße für Mobilgeräte angepasst werden.

Eine Seite, die diese zwölf Kriterien erfüllt, weist eine funktionale Hierarchie auf. Sie ist nicht perfekt, aber auch nicht peinlich, und der für das Unternehmen notwendige Lesepfad ist für den Besucher in der ersten Sekunde erkennbar.

FAQ

Was ist visuelle Hierarchie im Webdesign?

Visuelle Hierarchie im Webdesign ist die bewusste Lenkung der Aufmerksamkeit auf einer Seite, sodass der Besucher die Hauptbotschaft zuerst, die Nebenbotschaft als zweites und die ergänzenden Inhalte zuletzt in genau dieser Reihenfolge liest. Sie basiert auf fünf Stellschrauben: Größe, Gewichtung, Abstand, Kontrast und Bewegung. Eine starke Hierarchie bedeutet, dass der Blick standardmäßig auf dem Hauptelement ruht. Eine schwache Hierarchie bedeutet, dass der Blick zwischen konkurrierenden Elementen hin und her wandert und die Seite ihre Kernbotschaft nicht vermittelt.

Wie erstellt man visuelle Hierarchie auf einer Website?

Wählen Sie auf jeder Seite das Element aus, das für das Unternehmen am wichtigsten ist und als erstes gelesen werden soll. Betätigen Sie dann zwei der fünf Hebel (Größe, Gewicht, Raum, Kontrast, Bewegung) stark auf dieses Element, während Sie die anderen Hebel neutral halten. Wiederholen Sie dies für das zweite Element, wobei Sie die Hebel etwas weniger stark betätigen. Der restliche Inhalt bleibt bei allen Hebeln neutral. Das Ergebnis ist eine Seite, auf der der Lesepfad mühelos erkennbar ist – genau das, was gute Landingpages brauchen.

Was sind die wichtigsten Prinzipien der visuellen Hierarchie?

Die fünf Hebel sind Größe, Gewicht, Raum, Kontrast und Bewegung. Die Größe bestimmt den Lesefluss, indem das wichtigste Element am größten dargestellt wird. Das Gewicht trennt primäre von sekundären Elementen, indem es dem wichtigsten Element viel Gewicht verleiht. Der Raum bestimmt die Lesbarkeit durch die Isolation und gibt dem wichtigsten Element den meisten leeren Raum. Der Kontrast verstärkt die Wirkung, indem er das Element mit der höchsten Sättigung oder dem höchsten Wert auf der Seite darstellt. Die Bewegung rundet die Sequenz ab, indem sie als einziges animiertes Element sparsam eingesetzt wird. Alle fünf Hebel müssen zusammenwirken, nicht isoliert.

Warum ist visuelle Hierarchie auf Landingpages wichtig?

Landingpages haben eine Aufgabe: eine klare Botschaft zu vermitteln und zu einer klaren Handlung aufzufordern. Ohne Hierarchie verliert sich die Aufmerksamkeit des Besuchers in konkurrierenden Elementen, die Botschaft zersplittert, und die gewünschte Handlung wird nicht ausgeführt. Mit Hierarchie hingegen liest der Besucher das Nutzenversprechen, findet den Call-to-Action (CTA) und konvertiert in der vom Seitenlayout vorgesehenen Reihenfolge. Jede Steigerung der Conversion-Rate einer Landingpage hängt davon ab, wie klar die einzelnen Elemente der Seite angeordnet sind – genau das, was gute Gestaltungsprinzipien für Landingpages gewährleisten sollen.

Was ist der Unterschied zwischen visueller Hierarchie und Informationsarchitektur?

Visuelle Hierarchie beschreibt, wie das Auge eine einzelne Seite oder einen Bildschirm wahrnimmt. Informationsarchitektur beschreibt, wie Inhalte und Navigation auf der gesamten Website organisiert sind. Hierarchie ist auf einen einzelnen Viewport beschränkt, Informationsarchitektur hingegen global für die gesamte Nutzererfahrung. Eine Website mit guter Informationsarchitektur kann dennoch Seiten mit schlechter Hierarchie enthalten und umgekehrt. Beides ist wichtig und stellt separate Disziplinen dar, die bewusst gestaltet werden müssen.

Das Muster, das die meisten Seiten übersehen

Eine Seite mit starker Hierarchie zeichnet sich nicht durch viele Designentscheidungen aus, sondern dadurch, dass jede einzelne Entscheidung einem bestimmten Lesepfad dient.

Der Fehler vieler Teams liegt darin, Hierarchie als reine Stilfrage zu behandeln. Sie glauben, starke Hierarchie bedeute mehr Fettdruck, mehr Farbe, mehr Animationen, mehr visuelles Interesse. Das Gegenteil ist jedoch der Fall. Starke Hierarchie ist in der Regel subtraktiv. Sie bedeutet, den Viewport weitgehend leer zu lassen, die Gewichtung nur einem Element pro Abschnitt zuzuweisen, die Akzentpalette auf eine einzige gesättigte Farbe zu beschränken und die Bewegung auf ein Element pro Falte zu begrenzen. Das Ergebnis ist eine Seite, die sich in einer bewussten Reihenfolge liest, ohne jemals aufgesetzt zu wirken.

Die Marken, die mit starker Hierarchie arbeiten (Linear, Stripe, Apple), haben dies verinnerlicht. Marken mit schwacher Seitenhierarchie tappen meist in die Additionsfalle: Jedes Quartals-Review bringt ein neues Element in den Hero-Bereich, eine neue fettgedruckte Formulierung in den Hauptteil, eine neue Akzentfarbe in den Call-to-Action – und der kumulative Effekt verwischt den ursprünglichen Lesepfad. Die Lösung ist selten ein Redesign. Vielmehr braucht es eine Überprüfung, eine systematische Reduzierung überflüssiger Elemente und die Rückkehr zur Disziplin, jeden Stellhebel gezielt und zielgerichtet einzusetzen.

Wenn Ihr Team Seiten veröffentlicht, deren Lesepfad unklar ist, auf denen jedes Element um Aufmerksamkeit buhlt und deren Conversion-Rate sich trotz A/B-Tests nicht verbessert, liegt das Problem fast immer in der Hierarchie. Die Stellhebel sind falsch eingestellt. Sie konkurrieren miteinander. Sie wirken zu stark auf einmal. Reduzieren Sie die Seite auf die fünf unabhängigen Stellschrauben Größe, Gewichtung, Abstand, Kontrast und Bewegung. Stellen Sie jede Stellschraube so ein, dass sie dem vom Unternehmen benötigten Lesepfad entspricht, und die Seite funktioniert wieder.

Wenn Sie eine Website wünschen, auf der jede Seite einen klar definierten Lesepfad und eine Hierarchie hat, die auf jedem Viewport optimal funktioniert, dann Brainy einstellen. UXBrainy liefert Hierarchie-Audits, Designsysteme und komplette Webdesign-Projekte mit integrierter Hierarchie. AppBrainy entwickelt Produkt-UIs mit derselben Sorgfalt, die auch für eingeloggte Nutzer angewendet wird. Das Framework auf dieser Seite setzen wir in jedem Projekt und auf jeder Seite ein, bevor wir etwas veröffentlichen.