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.

Lesemuster

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).

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.

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.

Groesse

Es ist ganz einfach: Menschen lesen grössere 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.

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össer 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 gross gedruckte «Fighting for Equality on the Campaign Trail» noch vor dem direkt darüberstehenden Text «Election 2012».

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

Raum
Textur

Ein weiterer Weg, um Aufmerksamkeit zu erregen, besteht darin, dem Inhalt genügend Raum zum Atmen zu geben. Wenn sich genügend Weissraum 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össe sein. Hier ist das Verkaufsargument «Notre agence vous accompagne…» in einer sehr kleinen Schrift geschrieben, ist aber von jeder Menge Weissraum 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.

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:

Im ersten Bild steht das Wort «Sport» höher in der Hierarchie als «Badminton», weil es höher, grösser 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 schliesslich 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.

Schriftstaerke
Schriftpaarung

Die Wahl der Schrift ist äusserst 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 zum Beispiel 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össe und Laufweite stärker betont als der Text darüber.

In manchen Fällen besteht das Ziel darin, eine Vielzahl von Informationen als gleichermassen dringend zu präsentieren. Ihnen allen dieselbe Grösse 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.

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 grossen serifenlosen Schrift.

Farbe
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-weisses Raster, um einen beeindruckenden Effekt zu erzielen:

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.

Die Website für das Whitney Museum hingegen erzeugt mit nur einer einzigen Schriftart, -stärke und -farbe (Schwarz) eine Hierarchie, indem eine Tönung genutzt wird (welche sich auf die Zugabe von Weiss 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 weissen Hintergrund weniger auffällt.

Farbe ist besonders im App-Design von Bedeutung, wo ein kleiner Bildschirm deine Möglichkeiten begrenzt, andere Strategien wie unterschiedliche Grössen 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.

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.