z-beweging van het oog

Visuele hiërarchie en conversie

Als we het ontwerp van een website kiezen, kijken we meestal naar de “look” en “feel”. We vinden iets mooi of lelijk. Een goed ontworpen site doet meer: het verhoogt ook de effectiviteit en gebruiksvriendelijkheid.

webdesigners zijn constant bezig met het structureren van visuele informatie. Een website verdient niet alleen goede content en straffe programmatie maar zeker ook doordachte vormgeving en een sterke visuele hiërarchie. Een goed ontworpen website zorgt ervoor dat de elementen op de site op de juiste manier de aandacht trekken.
Een goede visuele hiërarchie is de sleutel tot een degelijk geoptimaliseerde website. Het doel: een duidelijke boodschap overbrengen, en actie stimuleren, van een bezoeker een tevreden klant maken. Hoe kom je tot de juiste visuele balans? Hoe verhoog je de kans dat mensen overgaan tot actie?

Bekijk de site met een kritische blik: naar wat kijk je eerst als je de site bezoekt?
Beperk de acties tot één per pagina, anders wordt het te druk en bereik je zeker je doel niet, mensen zullen snel geïrriteerd wegklikken. Teveel toeters en bellen zorgen voor chaos: keep it simple, less is more…

Hoe kijken mensen naar een website? Dit is door vele wetenschappers onderzocht. Het oog maakt een soort van zigzagbeweging over het scherm. Mensen “scannen” en analyseren eerst snel de visuele informatie-stukjes (zoals het contrast, formaten, beweging, randen,…) om zo een overzicht te krijgen van de omgeving.

Hier zijn enkele visuele kenmerken die een invloed hebben op de visuele hiërarchie. Al deze visuele kenmerken hebben ook een invloed op elkaar.

Beweging

Een bewegend object trekt snel de aandacht van het oog (kan ook als irriterend ervaren worden, niet overdrijven!).

Plaats, compositie

Waar je een object zet, en hoe de objecten onderling van elkaar staan, speelt een rol, zowel afzonderlijk als samen. De juiste positionering zorgt voor herkenbare patronen en voor balans en logica in het ontwerp.

Formaat

Door een object groter te zetten, gaat het meer op de voorgrond komen.

Vorm

Een andere vorm valt op tussen dezelfde vormen.

Padding

Ruimte rond de elementen is even belangrijk als de objecten zelf.

Contrast

Iets met veel contrast valt harder op dan iets met weinig contrast;

Kleur

Signaalkleuren zoals rood en geel trekken snel de aandacht, maar komen ook “goedkoop” over;

Saturatie

Donkere kleuren vallen minder hard op als felle kleuren.

Gezicht

De mens is erg snel afgeleid door een gezicht, vooral door de ogen en mimiek. Het gezicht kijkt naar de actie, en niet ervan weg. Of de actie staat dicht in de buurt van het gezicht, om zo mee te profiteren van de aandacht.

Interessante links:

Understanding the z layout
Visual hierarchy and conversion
Wikipedia: gestaltpsyschologie
Wikipedia: eyetracking