Der visuelle Fluss führt das Auge des Betrachters so durch das Dokument, dass alle wichtigen Elemente hervorgehoben werden und nichts die Sicht behindert oder den Betrachter den Sinn für das Stück verliert. Die Verwendung von offensichtlichen Flusselementen wie Pfeilen oder Zahlen ist die häufigste Methode, mit der Webdesigner den Fluss verwenden. Es gibt jedoch andere Arten von Elementen, die verwendet und missbraucht werden können, um Ihre Leser dazu zu bewegen, sich entlang eines bestimmten Pfads zu bewegen. Die Schritte in diesem Tutorial zeigen Ihnen Beispiele für guten und schlechten Fluss und helfen Ihnen, das Vokabular des visuellen Flusses im Design zu lernen.
Was ist Visual Flow?
Der visuelle Fluss kann auf viele Arten erreicht werden:
- Pfeile
- Sequentielle Bilder oder Textelemente
- Perspektive
- Farbverläufe
- Größe ändert sich
- Kurven
- Bewegung in Bildern
- Gesichter - vor allem die Augen
Die folgenden Bilder zeigen Ihnen einige häufige Fehler im Fluss auf Webseiten und deren Behebung.
02 von 07Westlicher Text fließt von links nach rechts
Wenn Sie mit dem Lesen einer westlichen Sprache aufgewachsen sind, glauben Sie, dass sich der Text von links nach rechts bewegen sollte. Wenn sich also das Auge über eine Textzeile bewegt, bewegt es sich von links nach rechts.
Im obigen Bild fließt der Wasserfall von rechts nach links und der Text fließt den Wasserfall hinauf. Da wir alle wissen, dass Wasserfälle herunterfallen, gibt es eine Trennung in Richtung des Wasserflusses mit dem Textfluss. Das Auge des Betrachters bewegt sich in die falsche Richtung, um den Text zu lesen.
03 von 07Ihr Text sollte mit den Bildern fließen
In diesem Fall wurde das Bild umgekehrt, sodass der Text in dieselbe Richtung wie das Wasser fließt. Alle Elemente lenken den Blick des Betrachters mit dem Wasserfluss und dem Textfluss nach unten.
04 von 07Von links nach rechts gleich schnell
Das Pferd in diesem Foto läuft von rechts nach links, der Text ist jedoch englisch und von links nach rechts. Die visuelle Wirkung des Pferderennens in eine Richtung verlangsamt die Geschwindigkeit des gesamten Dokuments, da es in eine andere Richtung als der Text geht.
Weil sich unsere Sprachen in westlichen Kulturen von links nach rechts bewegen, verbinden wir eine visuelle Richtung von links nach rechts mit vorwärts und schnell, während von rechts nach links mehr Rückwärts und langsamer ist. Wenn Sie ein Layout mit Geschwindigkeitskonfiguration erstellen, sollten Sie dies berücksichtigen - und Ihre Bilder in dieselbe Richtung wie der Text bewegen.
05 von 07Das Auge des Betrachters darf nicht langsamer werden
Wenn das Pferd und der Text in dieselbe Richtung gehen, wird die implizierte Geschwindigkeit erhöht.
06 von 07Beobachten Sie die Augen in Webfotos
Viele Websites mit Fotos machen diesen Fehler - sie stellen ein Foto einer Person auf die Seite und die Person schaut Weg aus dem Inhalt. Dies ist sogar auf der Website About.com Web Design im alten Design sichtbar.
Wie Sie sehen, wird mein Foto neben Text platziert. Aber ich schaue von diesem Text weg, ich habe fast den Rücken zu ihm gedreht. Wenn Sie diese Körpersprache zwischen zwei Personen in einer Gruppe gesehen haben, ist es leicht anzunehmen, dass ich die Person, die ich neben mir bin, nicht mag (in diesem Fall den Textblock).
Viele Eyetracking-Studien haben gezeigt, dass Menschen Gesichter auf Webseiten sehen. Und verwandte Studien haben gezeigt, dass Menschen beim Betrachten von Bildern unbewusst den Augen folgen, um zu sehen, worauf das Bild schaut. Wenn ein Foto auf Ihrer Website über den Rand des Browsers hinausschaut, werden Ihre Kunden dort hinschauen und dann auf die Zurück-Schaltfläche klicken.
07 von 07Die Augen in einem Foto sollten sich dem Inhalt stellen
Im neuen Design von About.com ist das Foto etwas besser. Jetzt schauen meine Augen mehr nach vorne und es gibt einen kleinen Hinweis, dass ich nach links schaue - wo der Text ist.
Ein noch besseres Foto für diese Position wäre ein Foto, auf dem auch meine Schultern auf den Text gerichtet waren. Dies ist jedoch eine viel bessere Lösung als das erste Foto. In Situationen, in denen das Bild sowohl rechts als auch links vom Bild ist, könnte dies ein guter Kompromiss sein.
Denken Sie auch daran, dass Bilder von Gesichtern die größte Aufmerksamkeit auf sich ziehen, dasselbe gilt für Tierfotos. In diesem Beispiel-Layout habe ich zum Beispiel meine Hunde, die nach links schauen, aber das Bild ist rechtsbündig. Also schauen sie von der Seite weg. Dieses Layout würde sich verbessern, wenn ich die Ausrichtung der Hunde so ändern würde, dass sie in die Mitte des Bildschirms blicken.
