Visuelle Richtung im Webdesign

Eines der großen Geheimnisse des Designs besteht darin, zu lernen, wie man die visuelle Richtung des Betrachters lenkt. Dieses Prinzip wird selbst von den erfahrensten Designern oft übersehen. Heute werden wir uns eingehender damit befassen, wie es funktioniert. Visuelle Richtung steuert die Augenbewegung des Benutzers; Dies kann durch sorgfältige Auswahl Ihrer Bilder und durch platzierte und ausgerichtete Designelemente erreicht werden.

Es ist allgemein bekannt, dass die standardmäßige Augenbewegung auf der gesamten Seite (in einem LTR - Links nach Rechts - Layout) von links oben nach rechts unten verläuft, wie das Bild veranschaulicht:

Jedoch; Dies kann nicht weiter von der Wahrheit abweichen. Durch die Anordnung der Kompositionselemente in einer bestimmten Weise kann ein Designer die Bewegung der Augen des Betrachters im und um das Layout des Designs steuern und erzwingen. Beispielsweise bewegt sich das Auge entlang eines tatsächlichen Pfades, beispielsweise einer durchgezogenen oder gepunkteten Linie, oder es bewegt sich auf subtileren Pfaden, z. B. von großen Elementen zu kleinen Elementen, von dunklen Elementen zu helleren Elementen, von Farbe zu Nicht-Farbe, aus ungewöhnliche Formen zu gewöhnlichen Formen usw. Eine Abstufung der Größe und wiederholte Formen und Größe der verwandten Elemente führt das Auge ebenfalls subtil.

1. Steuern von Richtungen mit Bildern

Mit Bildern können Sie auf einfache Weise steuern, wie Ihre Kunden Ihr Design anzeigen. Nachfolgend finden Sie einige explizite Beispiele für Richtungsbilder, die entweder als Teil Ihres Designs oder im Inhalt verwendet werden können, um Besucher auf der Seite zu führen:

Natürlich ist es ziemlich offensichtlich, in welche Richtung diese Bilder zeigen, auch wenn viele Bilder nicht so klar sind, schauen Sie sich diese anderen Beispiele an:

2. Das Auge führen

Dies ist einer der Hauptfehler, auf die Designer und Content-Redakteure in der Regel nicht in die Lage versetzt werden, dass Ihre Bilder von Ihrer Seite nach außen zeigen. Bilder (insbesondere Gesichter und Augen) sollten in die Mitte Ihres Designs zeigen.

Schauen Sie sich diese Beispiele auf CNN- und BBC-Websites an:

Im BBC-Beispiel blicken die beiden oberen linken Bilder von der Seitenmitte weg. Dies führt dazu, dass wichtige Informationen entlang des Standardpfads "nicht gesehen" werden, wie das Bild veranschaulicht:

  1. Sie beginnen oben links als üblicher Standardspeicherort
  2. Wenn Sie sich entlang des Standardpfads bewegen, stoßen Sie auf das erste Bild, das nach außen gerichtet ist, so dass sich Ihre Sicht automatisch aus der Seite heraus bewegt
  3. Ihre Augen schauen zurück in die Mitte der Seite
  4. Sie begegnen einem anderen Bild, das nach außen gerichtet ist, so dass Sie Ihre Sicht wieder außerhalb der Seite bewegen
  5. Zum Schluss bewegen sich Ihre Augen in Richtung Seitenzentrum, es gibt jedoch einen großen "blinden Fleck", der durch die Platzierung des Bildes und die durch das "?" Markierte Richtung erzeugt wird.

Vergleichen Sie nun die nächste "feste" Version der BBC-Homepage mit der Originalversion oben:

Wenn Sie diese Version betrachten, werden Sie feststellen, dass sich Ihr Auge nicht außerhalb der Seite bewegt. Die Gesichter der Personen, die nach innen schauen, helfen Ihnen, in die gleiche Richtung zur Mitte der Seite zu schauen.

3. Formulare

Sehen Sie sich dieses Beispiel mit zwei Möglichkeiten an, um die Beschriftungen an Ihren Formularfeldern auszurichten. Dies kann sich stark darauf auswirken, wie leicht Benutzer dieses Formular ausfüllen können:

Auf der linken Seite befinden sich oben ausgerichtete Etiketten, die schneller und einfacher auszufüllen sind als links oder rechts angeordnete Etiketten (rechts). Dies liegt daran, dass bei Etiketten mit der höchsten Ausrichtung die Hälfte der Augenbewegungen erforderlich ist, als bei links oder rechts ausgerichteten Etiketten. Beschriftungen mit oberer Ausrichtung ermöglichen es Benutzern außerdem, das Formular in eine visuelle Richtung nach unten zu verschieben, anstatt zwei visuelle Richtungen mit links und rechts ausgerichteten Beschriftungen. Dies macht das Ausfüllen von Formularen schneller und einfacher.

Die Platzierung steuert nicht nur, wie sich das Auge bewegt, sondern trägt auch dazu bei, dass ein Design einfacher verwendet werden kann, auch wenn es sich auf einer unterbewussten Ebene befindet.

4. Designrichtung

Das Richtungselement kann einen starken Einfluss auf die Stimmung eines Designs haben, aber die Gewissensentscheidung über die vorherrschende Richtung in einem Design kann einen spürbaren Einfluss auf die Atmosphäre der Arbeit haben.

Manchmal bestimmen das Bild oder das Layout die dominierende Richtung. Manchmal können Sie ihm eine Richtung auferlegen.

Die klaren horizontalen Linien in den unteren Motiven vermitteln ein Gefühl von Stille, Stabilität, Ruhe und Gelassenheit.

In der zweiten Gruppe unten verstärkt die diagonale Anordnung der Elemente das Gefühl von Bewegung und Aktion.

Die dritte Gruppe weist eine dominante vertikale Richtung auf, die das, was ansonsten zufällig sein könnte, statisch ordentlich beeinflusst und ein Gefühl von Wachsamkeit und Formalität vermittelt.

Die gleiche Änderung des Charakters ist in diesen drei Fotografien zu sehen. Das Motiv ist in jedem Fall das gleiche, die Änderung der Richtungsschärfe erzeugt in jedem Bild eine andere Atmosphäre.

Die vertikale Betonung im ersten Bild vermittelt ein Gefühl ordentlicher Formalität, die zweite horizontale Betonung fühlt sich ruhig und stabil an, während die dritte diagonale Betonung aktiv und animiert ist.

Fazit

Denken Sie immer daran, wie sich Ihr Publikum fühlen soll, legen Sie die Stimmung fest, indem Sie die Richtung Ihres Designs auswählen, und setzen Sie diese durch, indem Sie das richtige Layout und die richtige Bildauswahl auswählen.

Wenn es um formulare oder textbasierte Designs geht, wird die Nutzbarkeit Ihrer Arbeit erheblich verbessert, wenn Sie wissen, wie Ihre Besucher ihre Augen um ein Design richten.