Visuele flow laat de kijker door het document kijken op een manier dat alle belangrijke elementen prominentie krijgen, en niets hindert het zicht of zorgt ervoor dat de kijker het gevoel verliest. Het gebruik van duidelijke stroomelementen zoals pijlen of getallen is de meest voorkomende manier waarop webontwerpers flow gebruiken, maar er zijn andere typen elementen die kunnen worden gebruikt en misbruikt om uw lezers te laten navigeren langs een specifiek pad. De stappen in deze zelfstudie laten voorbeelden zien van goede en slechte flow en helpen u de woordenschat van visuele flow in design te leren.
Wat is Visual Flow?
Visuele flow kan op vele manieren worden bereikt:
- pijlen
- Sequentiële afbeeldingen of tekstelementen
- Perspectief
- Verlopen
- Grootte verandert
- curves
- Beweging in afbeeldingen
- Gezichten - vooral de ogen
De volgende afbeeldingen tonen enkele veelvoorkomende fouten in de voortgang op webpagina's en hoe u deze kunt corrigeren.
02 van 07Westelijke tekst stroomt van links naar rechts
Als je bent opgegroeid met het lezen van een westerse taal, ben je eraan gewend dat de tekst van links naar rechts moet bewegen. Dus terwijl het oog over een tekstregel beweegt, beweegt het van links naar rechts.
In de bovenstaande afbeelding stroomt de waterval van links naar rechts en de tekst stroomt omhoog in de waterval. Omdat we allemaal weten dat watervallen naar beneden vallen, is er een ontkoppeling in de richting van de stroom van water met de stroom van de tekst. Het oog van de kijker beweegt in de verkeerde richting om de tekst te lezen.
03 van 07Uw tekst zou moeten stromen met de afbeeldingen
In dit geval is het beeld omgekeerd zodat de tekst in dezelfde richting als het water stroomt. Alle elementen leiden de kijker naar beneden met de stroom van het water en de stroom van tekst.
04 van 07Van links naar rechts is gelijk aan snel
Het paard in deze foto loopt van rechts naar links, maar de tekst is Engels en dus van links naar rechts. De visuele impact van het paard dat in één richting racet, vertraagt het tempo van het hele document omdat het een andere richting inslaat dan de tekst.
In westerse culturen, omdat onze talen van links naar rechts bewegen, zijn we gekomen om een visuele richting van links naar rechts te associëren als vooruit en snel, terwijl rechts naar links meer achterwaarts en langzaam is. Wanneer u een lay-out maakt met een connotatie van snelheid, moet u dit onthouden en uw afbeeldingen in dezelfde richting laten bewegen als de tekst.
05 van 07Forceer het zicht van de kijker niet
Wanneer het paard en de tekst allebei dezelfde richting volgen, wordt de impliciete snelheid verhoogd.
06 van 07Watch the Eyes in Web Photos
Veel websites met foto's maken deze fout: ze plaatsen een foto van een persoon op de pagina en de persoon kijkt weg van de inhoud. Dit is zelfs te zien op de website About.com Web Design in het oude ontwerp.
Zoals u kunt zien, is mijn foto naast een tekst geplaatst. Maar ik kijk weg van die tekst, ik heb bijna mijn rug ernaar toe. Als je die lichaamstaal zag tussen twee mensen in een groep, zou het gemakkelijk zijn om aan te nemen dat ik de persoon naast mij niet leuk vind (in dit geval het tekstblok).
Veel oogvolgstudies hebben aangetoond dat mensen gezichten op webpagina's zien. En aanverwante studies hebben aangetoond dat mensen bij het kijken naar foto's onbewust de ogen zullen volgen om te zien waar de foto naar kijkt. Als een foto op uw site de rand van de browser af kijkt, zien uw klanten er zo uit en klikt u op de knop Terug.
07 van 07De ogen in elke foto moeten de inhoud onder ogen zien
In het nieuwe ontwerp voor About.com is de foto een beetje beter. Nu kijken mijn ogen meer naar voren, en er is een lichte hint dat ik naar links kijk - waar de tekst is.
Een nog betere foto voor die positie zou er een zijn waarbij mijn schouders ook naar de tekst waren gekanteld. Maar dit is een veel betere oplossing dan de eerste foto. En voor situaties waarin het beeld rechts van zowel inhoud als links is, zou dit een goed compromis kunnen zijn.
Vergeet ook niet dat afbeeldingen van mensengezichten de meeste aandacht trekken, maar hetzelfde geldt voor dierfoto's. In deze voorbeeldlay-out laat ik bijvoorbeeld mijn honden naar links kijken, maar het beeld is gelijk. Dus ze kijken van de pagina af. Deze lay-out zou verbeterd worden als ik de oriëntatie van de hond zou veranderen zodat ze in het midden van het scherm zouden kijken.
