Visual Hierarchy im Webdesign

Visual hierarchy ist ein aus dem Englischen stammender Fachbegriff, der sich dank der verwendeten Fremdworte relativ leicht ins Deutsche übertragen lässt. Doch auch wenn von visueller Hierarchie gesprochen wird, erschließt sich dem Leser das zugrunde liegende Konzept wohl nicht sofort. Daher soll dieser Text eine erste Annäherung an dieses Thema darstellen und die Grundlagen erklären.

Was ist visuelle Hierarchie?

Um zu verstehen, wie ein Besucher eine Website wahrnimmt, ist es hilfreich zu verstehen, wie Menschen im Allgemeinen Informationen verarbeiten. Das menschliche Gehirn ist seit Urzeiten darauf trainiert, Informationen nicht einfach nur aufzunehmen, sondern sie möglichst schnell in Beziehungen zu setzten. Dies hilft uns zwar enorm dabei, Muster zu erkennen, zwingt uns aber auch des Öfteren dazu, welche zu sehen, die gar nicht existieren. Aberglaube und viele Vorurteile basieren darauf, dass der Mensch darauf programmiert ist, zwei Dinge nicht einfach als gleichzeitig zu sehen, sondern sie direkt miteinander in Verbindung zu bringen und Beziehungen zwischen ihnen zu sehen.

Das betrifft auch besonders die Dinge, die wir sehen. Eine Zeichnung oder Grafik besteht logisch betrachtet immer nur aus einzelnen Punkten oder Linien. Der menschliche Drang, den Dingen einen Sinn zu geben, wird aber jeden Betrachter dazu verleiten, mehr zu sehen. Sehen wir beispielsweise ein Bild mit zwei geometrischen Formen, werden wir es nicht bei dieser Beobachtung belassen. Wir werden sofort anfangen, die beiden Formen in eine Beziehung zu setzten. Sind es verschiedene Formen? Sind sie gleich groß? In der gleichen Farbe?

Das zu verstehen, hilft ein wirklich gutes Web-Design zu erstellen. Nur wer sich bewusst ist, wie eine Seite wahrgenommen wird, kann das Augenmerk des Besuchers so lenken, wie der Web-Designer es möchte.

Anwendung

Die einfachste Möglichkeit, diesen Effekt zu erläutern, bietet sich, wenn das Prinzip auf die einfachste und elementarste Art des Inhalts angewendet wird, den das Internet kennt, den Text. In der Typografie gibt es den Begriff der Bleiwüste, der ein Dokument beschreibt, das so überladen mit Buchstaben ist, dass der Leser es eher als einen Block aus Zeichen wahrnimmt, und nicht als den Text, den es eigentlich darstellt. Wer etwas Erfahrung mit Layout besitzt, weiß, dass es sinnvoll ist, seinen Text mit Zeilenabständen, Zeilenumbrüchen und Absätzen so zu strukturieren, dass er sich bequem lesen lässt.

Diese Lektion wird umso wichtiger, wenn für das Internet geschrieben wird. Gerade im Netz schrecken Benutzer oft vor langen und unstrukturierten Texten zurück. Deshalb ist es ratsam, mit Absätzen und Zwischenüberschriften zu arbeiten, die nicht nur das einfachere Lesen ermöglichen, sondern die dem Leser zudem schnell die Möglichkeit geben, den Artikel nach Inhalten zu „scannen“ und somit festzustellen, ob ein Mehrwert zu erwarten ist. Doch auch über den einfachen Text hinaus gibt es einiges zu beachten, will man eine erfolgreiche Website erstellen. Im Folgenden sollen daher einige der wichtigsten Werkzeuge vorgestellt werden, die dem Web-Designer zur Verfügung stehen, um die Aufmerksamkeit des Lesers in gewünschte Bahnen zu lenken.

Größe

Die Größe ist einer der wichtigsten Faktoren, die wir heranziehen, um Hierarchien zu bilden. Daher ist es auch gerade bei Grafiken anzuraten, die wichtigsten Elemente auch am größten darzustellen und damit die Aufmerksamkeit des Betrachters sofort in die richtige Richtung zu lenken.

Farbe

Farben richtig zu verwenden, ist eine Kunst für sich. Hierbei gilt es zu beachten, dass die Wahl der Farben nicht nur die Aufmerksamkeit des Lesers beeinflusst, sondern auch hervorragend dazu geeignet ist, Emotionen zu wecken. Eine Website mit kalten Farben wird andere Gefühle auslösen als eine, die in warmen Farbtönen daherkommt. Darüber hinaus können Farben auch ausgezeichnet dazu verwendet werden, eine Corporate Identity herzustellen, die sich im Gedächtnis des Kunden verankert. Man denke beispielsweise nur an den bekannten Schokoladenhersteller, der es geschafft hat, die Farbe Lila untrennbar mit seinem Produkt zu verbinden.

Doch auch wenn es nur um die visuelle Hierarchie geht, lässt sich mit Farbe einiges erreichen. Kontrastreiche Farben eignen sich ausgezeichnet dazu, Aufmerksamkeit auf die entsprechenden Elemente zu lenken. Elemente in der gleichen Farbe werden hingegen vom Besucher sofort als zusammengehörend wahrgenommen werden.

Kontraste

Auch wenn dieser Punkt bei den Farben schon kurz erwähnt wurde, lohnt es sich doch, noch einmal getrennt darauf zu verweisen. Denn auch wenn farbliche Kontraste wohl die offensichtlichste Anwendung sind, lassen sich auch durch andere Elemente Kontraste herstellen, die das Auge de Lesers leiten und bestimmte Dinge betonen. Eine andere Schriftart oder -größe kann ebenso die Aufmerksamkeit eines Besuchers auf sich ziehen wie fette oder kursive Schrift.

Anordnung

Wenn es darum geht, die Inhalte einer Website bestmöglich zu ordnen, spielen natürlich nicht zuletzt kulturelle Umstände eine wichtige Rolle. Ein Benutzer aus dem westlichen Kulturkreis wird eine Seite anders wahrnehmen als jemand, der aus einer Kultur stammt, die Texte nicht von links nach rechts und von oben nach unten liest. Damit lässt sich also die Aufmerksamkeit des Betrachters schon ein wenig beeinflussen, wenn man weiß, wie er eine Seite üblicherweise lesen wird. Aber es gibt auch Faktoren, die eher typisch für das Internet sind, wie zum Beispiel, dass sich auf einer Seite die interaktiven Elemente meist rechts oben befinden. Wer also nach einem Log-in-Button sucht oder seine Einkäufe bezahlen möchte, wird dort zuerst nach dieser Option suchen.

Wiederholung

Wer grafische Elemente wiederholt einsetzt, schafft damit nicht nur eine Zusammengehörigkeit zwischen diesen Elementen, er gibt sich dadurch auch die Möglichkeit, Kontraste wirksamer zu nutzen. Ein Text in roter Farbe wird noch mehr Aufmerksamkeit auf sich richten, wenn zuvor wiederholt eine andere Schriftfarbe eingesetzt wurde. Wer nur auf Kontraste setzt, wird keine Akzente setzten können.

Nähe

Eine räumliche Nähe lässt immer auch eine inhaltliche erahnen. Nicht umsonst finden sich die Hauptinhalte einer Website meist untereinander oder nebeneinander. Wer seine Inhalte auf seiner Seite verteilt und Anzeigen oder andere Seitenelemente dazwischen platziert, muss damit rechnen, dass ein Benutzer Probleme bekommen könnte, redaktionelle Inhalte und Werbung zu unterscheiden.

Dichte und Leere

Wer versucht, zu viele Inhalte auf zu wenig Raum unterzubringen, läuft Gefahr, die Übersichtlichkeit seiner Seite zu verlieren. Wer hingegen zu viel freien Raum zwischen ihnen hat, wird es dem Besucher unter Umständen erschweren, seine Inhalte miteinander in Beziehung zu setzten. Hier ist einiges an Fingerspitzengefühl gefragt, wenn man die richtige Mischung treffen möchte.

Stil und Struktur

Hierbei handelt es sich wohl um den am schwersten fassbaren und zugleich wichtigsten Faktor beim Design einer Website. Letzten Endes ist eine komplette Seite eben doch mehr als die Kombination ihrer Elemente. Was für sich allein genommen funktioniert, kann in Verbindung mit anderen Elementen einen ungewünschten Effekt erzeugen. Ein Hintergrund kann für sich genommen andere Emotionen erzeugen als im Zusammenspiel mit den anderen Elementen. Wer ein Element betonen möchte, kann Gefahr laufen, dass es im Endprodukt eher für Ablenkung sorgt als für den gewünschten Akzent.

Gerade weil Web-Design eben trotz allem keine exakte Wissenschaft ist, lässt es sich manchmal schwer beurteilen, wie die Dinge auf der fertigen Website wirken werden. Aber dafür gibt es ja aber schließlich Profis, die über ausreichend Erfahrung verfügen, um diese Faktoren einschätzen und nutzen zu können.