Manchmal schauen Sie sich eine Website an, die attraktiv genug ist, aber etwas fehlt. Es hat tolle Farben, schöne Grafiken, eine perfekte Ausrichtung und eine clevere Kopie, aber es ist nur etwas fad. Obwohl alles schön aussieht, kommt auf einer höheren Ebene wirklich nichts lebendiger durch als alles andere. Diese Lösung für dieses Problem ist die visuelle Hierarchie.
Designer sind oft intuitiv genug, um den Elementen auf der Seite eine klare Hierarchie zu geben, ohne dass sie darüber nachdenken müssen. In anderen Fällen führt die mangelnde Absicht in diesem Bereich zu einem Design wie dem oben beschriebenen. In diesem Artikel werden einige der grundlegenden Prinzipien des Entwurfs unter Berücksichtigung einer visuellen Hierarchie der Informationen untersucht.
Prinzipien bei der Arbeit
Der Grund, warum die visuelle Hierarchie so wichtig ist, liegt darin, dass Sie durch das Beherrschen der Ansicht immense Kontrolle darüber haben, wie ein Besucher Ihre Seite liest. In einer idealen Welt würde jeder Zuschauer alle Informationen auf der Seite sorgfältig lesen, sodass Sie unendlich viel Zeit und Raum haben, um Ihre Botschaft zu vermitteln. In der Realität haben Sie jedoch wahrscheinlich nur ein paar Sekunden, um die Aufmerksamkeit einer Person zu erlangen und ihnen zu sagen, worum es bei der Website geht, bevor sie sich abwenden und woanders hingehen.
Durch die Festlegung einer klaren Hierarchie von Grafiken und Informationen kann der Leser fast unbewusst dem Weg folgen, den Sie für ihn festgelegt haben. Technisch gesehen lesen keine zwei Personen eine Seite auf dieselbe Weise, aber Sie können starke Trends in Richtung Ihrer bevorzugten Art entwickeln.
Dies gilt für verschiedene Bereiche und Methoden. Die visuelle Hierarchie kann durch die Position, Größe, Farbe und Komplexität eines Elements in Bezug auf die anderen Elemente auf der Seite festgelegt werden.
Um Ihre Nachricht richtig zu strukturieren, müssen Sie alles berücksichtigen, von den verwendeten Schriftarten bis zum Leerzeichen um ein gegebenes Objekt. Seien Sie sich immer bewusst, was auf Ihrer Seite auf sich aufmerksam macht, und stellen Sie sicher, dass es beabsichtigt ist.
Position
Position ist eine der grundlegendsten Methoden zum Aufbau einer Hierarchie. Betrachten Sie das folgende Beispiel:
Wahrscheinlich waren Sie beim ersten Blick auf dieses Bild nicht ganz sicher, was los war. Ihre Augen huschten wahrscheinlich ein wenig herum und suchten nach einem unterscheidbaren Muster. Betrachten Sie nun dieses Beispiel mit den gleichen Buchstaben.
Obwohl die Nachricht immer noch durch den physischen Raum und unnötige Formen verzerrt ist, ist es viel einfacher, sie zu entziffern, wenn wir die Reihenfolge umkehren. Obwohl beide Botschaften dazu führten, dass Ihre Augen um das Bild wanderten, war es durch die zweite sehr viel einfacher, die Buchstaben zu sehen, die sich zu Wörtern vereinten, als die erste. Das liegt daran, dass Sie es gewohnt sind, von links nach rechts zu lesen. Wenn auf einer Seite ein unsicheres visuelles Chaos besteht, ist die erste Möglichkeit, mit der Ihr Gehirn die Informationen organisieren soll, in der Reihenfolge, in der Sie lesen gelernt haben: von links nach rechts und von oben nach unten.
Das soll Sie nicht schockieren, es ist offensichtlich, dass wir von links nach rechts lesen. Wenn Sie sich dieser Tendenz bewusster bewusst werden, können Sie Ihre Inhalte angemessen strukturieren. Denken Sie daran, dass dieses Prinzip über die Wörter hinaus auf grafische Elemente auf einer Seite hinausgeht. Wenn Sie Ihren Benutzern ein Raster von Objekten vorlegen, deren Größe, Form und Farbe ziemlich ähnlich sind, neigen sie dazu, das Raster von links nach rechts zu lesen, es sei denn, es wird eine andere Aufforderung erteilt.
Ist das nicht langweilig?
Sie fragen sich vielleicht, wie Ihre Entwürfe aussehen würden, wenn Sie das Z-Reading-Prinzip oben genau befolgen. Die Antwort ist unglaublich langweilig und unoriginal.
Das Ziel ist dann, Objekte auf einer Seite attraktiver anordnen zu können, während der Leser veranlasst wird, seine unbewusste Neigung zu ignorieren, z. Dies wird durch die Verwendung der anderen nachstehend diskutierten Prinzipien der visuellen Hierarchie erreicht.
Größe
In der Designwelt spielt die Größe eine entscheidende Rolle. Durch Ändern der Größe von Elementen auf einer Seite können Sie die Tendenz des Z-Musters leicht brechen.
Trotz der Tatsache, dass die schriftliche Frage höher ist als das Quadrat, lenkt die schiere Größe und Kühnheit des Quadrats Ihre Aufmerksamkeit vor den Worten. Werfen wir einen Blick auf dieses Prinzip, das praktisch für das Webdesign gilt.
Dies ist eine extrem einfache Seite, die eine klare visuelle Hierarchie verwendet. Das Zitat in der Mitte der Seite ist groß genug, um das erste Objekt zu sein, das Ihre Aufmerksamkeit auf sich zieht. Danach ist das Logo oben links nicht nur der natürliche Ort, um Ihre Lesetendenzen zurückzusetzen, sondern ist auch der nächsthöchste Kontrast auf der Seite. Der Designer hat die Site so strukturiert, dass Sie, wenn Sie nur wenige Sekunden auf der Seite verbringen, „Think Big“ lesen. Sei flink. gefolgt von? Hobson Dungog + Davis ?.
Dies ist eine klassische Manipulation der visuellen Hierarchie bei der Arbeit (beachten Sie, dass auch Whitespace eine große Rolle spielt). Es wäre einfach gewesen, das Zitat so einzustellen, dass es oben links gefolgt vom Logo angezeigt wird, aber das Layout wäre nicht so interessant oder flexibel gewesen.
Farbe
Ein geschickter Einsatz von Farbe kann eine der visuell interessantesten Möglichkeiten sein, Elemente auf einer Seite zu unterscheiden und die Aufmerksamkeit dort zu lenken, wo Sie sie möchten. Die Besessenheit Ihres Gehirns mit dem Kontrast wird dazu führen, dass Ihre Augen auf Objekte fokussieren, die sich einfach aufgrund ihrer Farbunterschiede in Bezug auf die umgebenden Objekte auszeichnen. Betrachten Sie das folgende Beispiel:
Dieser Designer hat verschiedene kontrastierende und ergänzende Farbtöne verwendet, um eine visuelle Hierarchie in einem ansonsten monotonen Textblock festzulegen. Die helleren Abschnitte lenken Ihre Aufmerksamkeit und machen es Ihnen leicht, den Kern des Absatzes zu verstehen, ohne sich die Zeit zu nehmen, um ihn zu lesen.
Der Kontext spielt auch hier eine wichtige Rolle. Wenn dies ein Druckdesign wäre, würden Sie nichts von dem helleren farbigen Text halten, der darüber hinaus Ihre Aufmerksamkeit erregen sollte. Im Internet erwartet Ihr Gehirn jedoch, dass diese offensichtlich absichtlichen Bereiche etwas Bedeutsameres bedeuten: In diesem Fall einen Link.Der hellere Text in Links umzuwandeln ist genau das, was dieser Designer getan hat. Trotz der ungewöhnlichen Formatierung, die durch den fehlenden Navigationsbereich dargestellt wird, können Sie schnell herausfinden, wie die Website funktioniert, da Sie die visuelle Hierarchie verwendet haben.
Visuelle Komplexität
Die letzte Möglichkeit, die visuelle Hierarchie zu steuern, ist die visuelle Komplexität und erkennbare Muster. Das Prinzip hier ist, dass, wenn Sie möchten, dass etwas mehr auf Ihrer Seite hervorgehoben wird als die Objekte, die es umgeben, es wesentlich mehr oder weniger komplex ist. Selbst wenn die Objekte eine ähnliche Größe und Farbe haben, erhöht die Komplexität das visuelle Interesse.
Dieses Prinzip knüpft stark an erkennbare Muster an. Wie bereits erwähnt, versucht Ihr Gehirn ständig, das Chaos der auf dem Bildschirm angezeigten Pixel zu ordnen und zu ordnen. Es wird sich daher an den Bereichen festhalten, die aufgrund ihrer Komplexität nicht nur die interessantesten sind, sondern auch die Elemente, denen ein bekanntes Schema auferlegt werden kann.
Das grundlegende Beispiel oben kann uns viel darüber vermitteln, wie wir unsere Aufmerksamkeit richten. Es gibt zwei Bereiche des Bildes, die sich am meisten hervorheben. Der erste und offensichtlichste Bereich sind die zwei besonderen Formen in der oberen Reihe. Sie sind nicht nur optisch komplexer als die Objekte um sie herum, sie erinnern auch an etwas Vertrautes: an ein Augenpaar. Trotz des Chaos um sie herum ziehen diese Formen Ihre Aufmerksamkeit auf sich, denn Gesichter gehören zu den bekanntesten, freundlichsten oder sogar bedrohlichsten Objekten, denen wir begegnen. Wenn Sie einen bestimmten Bereich in der visuellen Hierarchie hoch festlegen möchten, unabhängig davon, wo er sich auf einer Seite befindet, können Sie mit einem Gesicht nichts falsch machen.
Nachdem Sie das Augenpaar aufgegeben haben, sind Ihr nächstes wahrscheinliches Ziel die zwei wiederholten Dreiecke in der unteren Reihe. Auch hier versucht Ihr Gehirn, Ordnung zu schaffen. Es versteht diesen Bereich aufgrund des wiederholten Elements etwas mehr als die anderen. Die selektive Wiederholung in Ihren Entwürfen ist eine hervorragende Möglichkeit, visuelles Interesse hinzuzufügen, entfernte Objekte zu verbinden und den Betrachter auf dem gewünschten Pfad zu führen. Um die Wiederholung effektiv zu nutzen, implementieren Sie einfach die soeben diskutierten Variablen (Größe, Farbe und Komplexität) als Grundlage für das wiederholte Element.
Fazit
Das Ziel dieses Artikels war es, Sie mit den Konzepten der visuellen Hierarchie vertraut zu machen, um die Hervorhebung von Objekten auf einer Seite zu steuern und Ihre Betrachter in die Richtung zu steuern, in die Sie möchten. Ich hoffe, dass es mir gelungen ist, Sie dazu zu bringen, bei jedem von Ihnen entworfenen Element bewusst eine klare und vorsätzliche Hierarchie anzuwenden.
Verwenden Sie die folgenden Kommentare, um uns mitzuteilen, was Sie über den Artikel gedacht haben und ob Sie jemals über Ihre Verwendung von visuellen Informationshierarchien nachgedacht haben.