Zuerst auf Steintafeln, Papyrusrollen und Papier, dann auf Computerbildschirmen und Tablets – während sich die Technik zum Darstellen einer Seite weiterentwickelt, bleibt es Aufgabe des Designers, den Inhalt übersichtlich zu arrangieren. Aber wie macht man das am besten? Kurz gesagt: mit Hilfe visueller Hierarchie.

Was ist visuelle Hierarchie?

Visuelle Hierarchie ist die Anordnung grafischer Elemente in einem Design, ihrer Wichtigkeit nach geordnet. Die visuelle Bedeutung definiert die Wichtigkeit eines Elements in der Hierarchie des Designs und sagt dem Betrachter, in welcher Reihenfolge er sich worauf konzentrieren soll.

Dabei handelt es sich um eine immer wichtiger werdende Frage, da responsive Frameworks Designer herausfordern, sich über viele verschiedene Seiten gleichzeitig Gedanken zu machen. Angesichts umfangreicher Texte und kurzer Aufmerksamkeitsspannen haben Designer 6 Grundregeln entwickelt, die den Blick des Lesers auf die wichtigste Information lenken.

Diese 6 Grundregeln der visuellen Hierarchie werden dir dabei helfen, alles von Broschüren bis Apps zu designen, und garantieren dem Leser ein positives Leseerlebnis.

tablets
Links: Tontafel (via Wikipedia); Rechts: iPad (via apple.de)

1. Lesemuster

In allen Kulturen wird von oben nach unten gelesen und in den meisten von links nach rechts. Und auch wenn das wichtig für das Seitendesign ist, wissen Designer doch, dass die Aufgabe wesentlich komplizierter ist.

Jüngste Studien haben gezeigt, dass die Menschen vor dem Lesen zuerst eine Seite überfliegen, um ein Gefühl dafür zu bekommen, ob es sie interessiert. Das Muster, in dem die Seite überflogen wird, entspricht zumeist einer von zwei Formen, dem „F“ oder dem „Z“ und du kannst dir dies in deinen Design zunutze machen.

F-Muster

F-Muster kommen bei herkömmlichen, textlastigen Seiten wie Artikeln oder Blog Posts vor. Ein Leser überfliegt die Seite von links oben nach unten, sucht nach interessanten Stichwörtern in linksbündigen Überschriften oder Einleitungssätzen und liest dann nach rechts weiter, wenn er etwas Interessantes gefunden hat. Das Ergebnis sieht ein wenig aus wie ein F (oder wie ein E oder etwas mit noch mehr horizontalen Balken, aber man ist beim F geblieben).

visual hierarchy page scanning patterns
Heatmap der Nielsen Norman Group

Wie kannst du dies nutzen? Richte deine wichtigen Informationen linksbündig aus und nutze kurze, auffällige Überschriften, Stichpunkte und andere Blickfänge, um Abschnitte aufzuteilen.

Z-Muster

Z-Muster findet man auf allen anderen Seiten wie Anzeigen oder Webseiten, bei denen Informationen nicht zwingend in Abschnitten präsentiert werden. Der Blick des Lesers überfliegt zunächst den oberen Teil der Seite, wo Informationen aller Wahrscheinlichkeit nach zu finden sind, geht dann diagonal nach unten in die entgegengesetzte Ecke und macht dann im unteren Teil der Seite genau dasselbe.

Z-pattern in visual hierarchy
via tuts+

Webdesigner bauen ihre Seiten häufig so auf, dass sie zu diesem Verhalten passen, platzieren die wichtigsten Informationen in den Ecken und richten andere wichtige Infos entlang des oberen und unteren Rands sowie der verbindenden Diagonalen aus.

Im Design für die Build Conference 2010 bestehen die wichtigen Elemente aus dem Logo (oben links), dem „Register Now“ Button (oben rechts) und der Liste der Sprecher (am unteren Rand) und sind alle gezielt an den idealen Punkten des Z-Musters platziert.

build
Die Build-Website nutzt ein Z-Muster

2. Größe ist wichtig

Es ist ganz einfach: Menschen lesen größere Dinge zuerst. Wenn in der Werbung für das Young Vic Theater dein Blick zu „Performance“ wandert noch bevor du „cracking“ liest, solltest du sofort einen Termin mit einem Wahrnehmungspsychologen machen: Wahrscheinlich könntest du gutes Geld damit verdienen, dich als seltene Anomalie diversen Tests zu unterziehen.

using font size for visual hierarchy
Dieses Poster von Rebecca Foster nutzt verschieden Schriftgrößen, um eine visuelle Hierarchie zu erzeugen

Das Interessante ist, dass diese Tendenz stark genug ist, um sich über die Regel „von oben nach unten“ hinwegzusetzen. Im obigen Bild überstrahlt „cracking“ „time to act“, weil es sowohl größer ist als auch links steht (die Regel „von links nach rechts“ ist hier also behilflich).

Aber in der Seite unten aus dem Annual Report: Human Rights Campaign 2012 (designt von Column Five Media), lesen wir das groß gedruckte „Fighting for Equality on the Campaign Trail“ noch vor dem direkt darüberstehenden Text „Election 2012“.

print-mag
Annual Report von Column Five

„Election 2012“ ist die essenziellste Information: Sie verrät uns das allgemeine Thema, unter das die Information darunter fällt. Aber der Designer hat sich entschieden, dass die Artikelüberschrift für den Leser interessanter ist, und gestaltet sie in ihrer Größe daher so, dass sie zuerst gelesen wird.

3. Raum und Textur

Ein weiterer Weg, um Aufmerksamkeit zu erregen, besteht darin, dem Inhalt genügend Raum zum Atmen zu geben. Wenn sich genügend Weißraum um einen Button befindet oder die Zeilen in einem Textabschnitt weit auseinanderliegen, werden diese Elemente für den Leser sichtbarer.

Wie du im Bild unten sehen kannst (Teil der Website von Draw to Click), kann die Laufweite eine elegante Alternative oder Zusatz zur Größe sein. Hier ist das Verkaufsargument „Notre agence vous accompagne…“ in einer sehr kleinen Schrift geschrieben, ist aber von jeder Menge Weißraum umgeben, der auf die Wichtigkeit hindeutet. Darunter werden die Wörter „LE COMPRENDRE“, „LE RÉALISER“ und „LE PARTAGER“ besonders hervorgehoben, indem sie durch den sie umgebenden Raum getrennt werden.

visual hierarchy example
Website für Draw to Click

Wenn man von „Textur“ im Zusammenhang mit visueller Hierarchie spricht, bezieht man sich nicht auf bildliche Textur-Effekte. Stattdessen bezieht sich diese Art Textur auf die insgesamte Anordnung oder Muster von Raum, Text und anderen Details auf einer Seite. Dieses Beispiel von Bright Pink veranschaulicht das Konzept sehr gut:

sports
Poster: Bright Pink (via Smashing Magazine)

Im ersten Bild steht das Wort „Sport“ höher in der Hierarchie als „Badminton“, weil es höher, größer und fetter ist. Im zweiten Bild sind die beiden Wörter in etwa gleichwertig, dank des schwarzen Rechtecks, welches „Badminton“ hervorhebt und ihm einen eigenen Raum gibt.

Im dritten Bild stört ein Gekritzel im Hintergrund den Raum von „Sports“, aber nicht den von „Badminton“, was schließlich dazu führt, das „Badminton“ in der Hierarchie am höchsten steht. Solch eine Entwicklung ist schwer vorherzusehen, weshalb Designer sie häufig einer „Textur“ zuschreiben.

4. Schriftstärke und -paarung

Die Wahl der Schriftwahl ist äußerst wichtig, um eine visuelle Hierarchie zu erzeugen. Zu den wichtigsten Merkmalen einer Schriftart gehören die Stärke – also die Dicke der Striche, aus denen die Buchstaben bestehen – und der Stil, wie Serifenschriften und serifenlose Schriften. Auch andere Modifizierungen wie Kursivschrift können eine Rolle spielen.

Schau dir an, wie die Hierarchie der Wörter im Webdesign für The Tea Factory durch die Schriftart beeinflusst wird: „The perfect teas to keep you warm“ steht im Mittelpunkt, aber die Unterschiede in der Schriftstärke und die Kursivschrift erzeugen zusammen mit der Platzierung der Wörter ein dynamischeres, weniger lineares Leseerlebnis. „See our selection“ – der Call-to-Action – wird aufgrund der Größe und Laufweite stärker betont als der Text darüber.

tea-factory
Branding für The Tea Factory

In manchen Fällen besteht das Ziel darin, eine Vielzahl von Informationen als gleichermaßen dringend zu präsentieren. Ihnen allen dieselbe Größe und Stärke zu geben, würde für Gleichwertigkeit sorgen, es aber auch monoton aussehen lassen. Unterschiedliche Schriftarten sind ein Weg, um dies zu vermeiden, wie beim Magazincover für Trendi weiter unten.

Hier sind alle fünf Teaser am Rand der Seite in der Hierarchie gleichrangig, erzeugen aber Abwechslung durch zwei gut gepaarte Schriftarten – einer mittelschweren Serifenschrift und einer leichten, aber großen serifenlosen Schrift.

trendi
Magazincover für Trendi (via The Kasper Stromman Design Blog)

5. Farbe und Farbton

Hier ist ein weiterer Selbstläufer: Helle Farben stechen aus gedeckten Farben oder Graustufen heraus, wohingegen hellere Farbtöne „distanzierter“ wirken und daher in der Hierarchie unter den kräftigeren, dunkleren Farbtönen stehen. Die Website für Where They At setzt ein helles Gelb und ein farblich hervorgehobenes Bild als Kontrast vor ein schwarz-weißes Raster, um einen beeindruckenden Effekt zu erzielen:

color used for visual hierarchy
Website für Where They At

Die Website des Guggenheim Museums nutzt Farbe, um wichtige Informationen wie Auswahl des Ortes, eine Liste der aktuellen Ausstellungen und die Links zu besonderen Ausstellungen hervorzuheben.

Guggenheim Museum
Website für das Guggenheim Museum

Die Website für das Whitney Museum hingegen erzeugt mit nur einer einzigen Schriftart, -stärke und -farbe (Schwarz) eine Hierarchie, indem sie eine Tönung nutzen (welche sich auf die Zugabe von Weiß zu einer Grundfarbe bezieht, wodurch diese heller wird). „Cory Arcangel on Pop Culture“ steht in der visuellen Hierarchie klar unter „New on Whitney Stories“; nicht nur, weil es weiter unten platziert ist, sondern auch, weil es heller ist und dadurch vor dem weißen Hintergrund weniger auffällt.

Whitney Museum of American Art
Website für Whitney Museum of American Art

Farbe ist besonders im App-Design von Bedeutung, wo ein kleiner Bildschirm deine Möglichkeiten begrenzt, andere Strategien wie unterschiedliche Größen und weite Zeilenabstände zu nutzen. In der App von Grainger Industrial Supply ist der Button „Proceed to Checkout“ rot eingefärbt, wodurch er auf jeder Seite hervorsticht. Die Leiste „Narrow Your Search Results“ ist im Gegensatz dazu grau und dadurch in der Hierarchie in etwa gleichrangig mit anderen Elementen wie der Suchleiste und den Produkt-Links.

App design for Grainger
App design for Grainger (via codrops)

6. Richtung

Seitenlayouts werden in der Regel entlang eines Rasters mit vertikalen und horizontalen Linien designt, einerseits weil es so üblich ist, andererseits weil es das lesbarste Format ist. In solch einem System tritt eine neue Möglichkeit zutage, um eine Hierarchie zu erzeugen: Weiche vom Raster ab.

Ein Text, welcher entlang einer Kurve oder Diagonalen angeordnet wird, wird sich automatisch von Text absetzen, der dem Raster folgt, und die Aufmerksamkeit auf sich ziehen. Dies ist schon seit Langem eine wirkungsvolle Strategie in der Werbung, wie beispielsweise beim Poster von Frost Design an einer Haltestelle, das unten zu sehen ist.

General Pants Co.
Poster für General Pants Co. (via Frost*collective)
Welche Regeln der visuellen Hierarchie sind deiner Meinung nach am wichtigsten? Verrate es uns in den Kommentaren!