9 belangrijke principes voor overtuigend webdesign

Overtuigend website design: 9 principes

Het lijkt logisch dat een mooie website ook effectief is. Maar niets is minder waar. Effectief webdesign gaat veel verder dan slechts ‘mooi’ zijn. In die mate dat veel webdesigners zelf maar weinig idee hebben van wat dat nu juist inhoudt.  En dat is jammer, want een goed en doordacht webdesign kan vele tientallen, zelfs honderden procenten verschil maken in respons.

Dé sleutel om tot overtuigend webdesign te komen die klanten werft, ligt besloten in de menselijke psychologie.

Op het internet wil de mens de snelste en makkelijkste weg, liefst zonder veel nadenken.  Effectief webdesign is dus webdesign dat de bezoeker op natuurlijke wijze stuurt naar zijn volgende actie.

 De 9 principes die we hier zullen bespreken vormen de basis van effectief webdesign.

1. Wees in de eerste plaats helder en duidelijk

Wanneer de oermens iets nieuws vond, waren zijn eerste vragen: ‘wat is het?’ en ‘kan ik het opeten?’. De moderne websitebezoeker die voor het eerst op uw website komt, stelt zich gelijkaardige vragen: ‘waarover gaat het?’ en ‘heeft het wat ik zoek?’. Uit onderzoek van HubSpot blijkt ook dat het voor de meerderheid van de mensen belangrijk is snel te vinden wat ze zoeken op een website. Zorg ook dat elke pagina op uw website aan dit principe voldoet.

 

Meer dan 3 op de 4 mensen verkiest een heldere en duidelijke website. Maak dus geen omwegen en hou het eenvoudig!

U woont in Haïti en u zocht naar het laatste nieuws?  Dan vond u misschien deze website: 

Met deze website is natuurlijk heel wat meer mis dan slechts het gebrek aan overzicht. Het is niet duidelijk dat het om een nieuwssite gaat. Als u dus naar nieuws zocht, heeft u waarschijnlijk al na enkele seconden deze pagina gesloten. 

Het verschil met deze website is dan ook hemelsbreed: 

Het is duidelijk waar het hier over gaat. Alles wat relevant is, is ook meteen terug te vinden op de homepage. 

Op de homepage zorgt u best voor een duidelijke, goed zichtbare value proposition. Of ook wel: wat heeft u meer dan uw concurrent? 

2. Wees visueel aantrekkelijk

De eerste indruk die uw bezoeker krijgt van uw website is de belangrijkste, want dat maakt dat hij om te beginnen al op uw website blijft.  Het is de eerste indruk die uw bezoeker verder uw website in trekt, zodat hij ook effectief zal lezen wat u te vertellen heeft.

Volgens onderzoek dat Google uitvoerde, bepalen 2 factoren of bezoekers uw website aantrekkelijke vinden: de complexiteit van de website en de vertrouwdheid van de layout. In minder dan een seconde tijd besluit de bezoeker of hij op uw website blijft of weg klikt.  U doet er dus goed aan om complexe, innovatieve designs waar mensen over moeten nadenken te vermijden.  Uw bezoekers hebben een bepaalde verwachting in categorieën van websites: de zoekfunctie zit bijvoorbeeld altijd bovenaan. 

Overzicht is vanzelfsprekend een onderdeel van wat een website visueel aantrekkelijk maakt.  Maar dat is niet het enige wat een website mooi maakt en daar zijn ook verschillende technieken voor.

 

Een innovatief design voor een website kan zijn voordelen hebben. Deze website, echter, heeft te weinig prototypische kenmerken van een website en ook de beelden die gebruikt worden zijn te abstract (dus te complex).

3. Zorg voor een heldere en sterke hiërarchie op elke pagina

Hou zeker ook rekening met de visuele hiërarchie: de volgorde waarin uw bezoeker de verschillende elementen op uw website ziet.  Het is een van de belangrijkste onderdelen van een goede website.  Beschouw even de volgende vier cirkels en plaats ze in volgorde van belangrijkheid. 

 

U weet helemaal niets over deze cirkels en toch kon u ze in volgorde plaatsen. Dat is visuele hiërarchie. 
In de praktijk zal het neerkomen op dit: 

Uw aandacht wordt eerst en vooral naar de smakelijke visual getrokken. Vervolgens gaat u verder naar rechts (dat strookt met de leesrichting) en ziet u opeenvolgend: Vacatures, Onze menu en Reservatie. De volgende logische plek waar de bezoeker zal kijken is links bovenaan en zo naar links beneden. Het overzicht zorgt bij de bezoeker voor rust, de prachtige foto wekt zijn nieuwsgierigheid naar de rest en bij de laatste stop op de homepage vindt de bezoeker het telefoonnummer en relevante informatie over sluitingstijden. Het is geen expliciete call-to-action, maar als de potentiële klant bij punt 4 nog twijfelde om te bellen, dan belt hij of zij misschien wel bij punt 6. 

U ziet ook het verschil met het vorige voorbeeld: deze website van een restaurant is heel herkenbaar voor de bezoeker.  Er is een duidelijk menu aan de linkerkant, een relevante afbeelding van het product in het midden en aan de rechterkant de highlights en call-to-action.  Dat alles zorgt voor een visueel aantrekkelijke website.

Wanneer mensen op een website komen, ‘scannen’ ze die eerst alvorens ze de inhoud lezen. Daarom is een goede eerste indruk belangrijk; daarom moet het belangrijkste deel van de pagina het eerst in het oog springen.

4. Toon mensen, maar betrek uw product erbij

Er zijn natuurlijk nog manieren om tot effectief webdesign te komen die de visuele aantrekkelijkheid van uw website verhoogt.  Zo doen bijvoorbeeld foto’s van mensen het heel goed en zoals gebleken is uit heatmaps kunnen de mensen in de foto de aandacht naar uw product sturen.

 

Onderzoekers testten twee versies van deze reclame voor luiers: in de linkse versie kijkt de baby naar het publiek, in de rechtse versie kijkt de baby naar de tekst. Met eye-tracking technologie kwam duidelijk naar voor dat in de linkse foto de meeste aandacht naar de baby ging; in de rechtse foto ging meer aandacht naar het product en het merk. (Rood en geel duiden de meest bekeken plaatsen aan) 

Ook hier gaat de meeste aandacht naar het gezicht van Scarlett Johansson. Als zij naar het parfumflesje had gekeken, dan was er meer aandacht voor het product geweest bij het publiek. 

5. Zet uw kleurgebruik goed in

Nog een manier om aandacht naar een bepaalde punt te trekken is door een afwijkend kleur te gebruiken.

Uit een A/B-test is gebleken dat de blauwe tekstballon twee keer meer respons kreeg dan een groene, hoewel die beter paste in het algehele design van de website en dus “mooier” overkwam. Het gaat dus niet zozeer over welk kleur u gebruikt, zolang het maar een afwijkend kleur is ten opzichte van de rest van de website.

De kleur van deze website is overwegend groen, wit en zwart. Door de call-to-action in het blauw te zetten, trekt hij meer aandacht en genereert hij dus ook meer kliks.

6. Speel met contrasten en verrassing

Ook contrast werkt goed: voor en na. Ons brein is er op gemaakt om snel verschillen op te merken.

Toen de mens nog in de natuur op jacht moest, was het van groot belang dat hij alle verschillen snel opmerkte. Die bult in het lange gras zou zomaar eens een roofdier kunnen zijn!

Vergeet ook het voordeel van verrassing niet.  Zeker een verrassend beeld zal langer onze aandacht vasthouden, maar ook onverwachtse tekst zal ons aandachtiger doen lezen. 

Via een ‘voor en na’-foto kunt u de bezoeker overtuigen te kiezen voor uw product of dienst. Op deze manier geeft u duidelijk aan wat het effect is van het product dat u aanbiedt.

Iets dat verrassend is, dat anders is dan we hadden verwacht, trekt onze aandacht. Het moet natuurlijk wel passen bij uw merk, product of dienst. 

7. Hou de aandacht van de bezoekers vast

Nu u de aandacht heeft getrokken van uw bezoeker, komt het moeilijkste deel: zijn aandacht behouden.  Onthou hierbij vooral dat de bezoeker niet voor u naar uw website komt. Hij komt vooral voor zichzelf: what’s in it for me? En de bezoeker wil snel vinden wat hij zoekt.  U kunt hierbij gebruik maken van een visueel pad. Dat kan met cijfers, maar evengoed met lijnen.  Of beide.  Vermijd saaie designs.  Dus niet: zwart-wit, statisch of te veel tekst, maar wel: slim kleurgebruik, dynamiek en scanbare tekst.

Als u veel verschillende producten aanbiedt, zorgt u best voor een eenvoudig filtersysteem.  De Wet van Hick stelt dat hoe meer keuze er is, hoe langer het duurt om tot een keuze te komen.  Dat is logisch, maar op een bepaald moment is veel keuze té veel keuze en dan vertrekt de bezoeker weer.  In het Frans noemen ze dat l’embarras du choix.  Een eenvoudig filtersysteem kan uw bezoeker helpen snel te vinden wat hij zoekt.

Hier zijn de cijfers eigenlijk overbodig. De stippellijn is voldoende om de verschillende stappen in de juiste volgorde te doen. Het stappenplan op deze manier voorstellen zorgt voor dynamiek en dynamiek trekt de aandacht van de bezoeker. U ziet ook dat er iconen gebruikt worden (in plaats van saaie titels bijvoorbeeld) en dat de tekst de essentie weergeeft, kort en bondig. 

Als u nooit eerder een bepaald product (shampoo bijvoorbeeld) kocht, dan bent u misschien op voorhand al ontmoedigd door deze overdaad aan keuze. 

Opteer ook voor een grotere afbeelding van het product.  Uit onderzoek is namelijk gebleken dat de verkoop stijgt wanneer de afbeeldingen van de producten groter zijn (dus ook minder afbeeldingen per pagina).  Een grote afbeelding heeft meer impact op de bezoeker.

Dus beter zo:

Dan zo:

8. Witruimte helpt om te benadrukken wat werkelijk telt

Wanneer u de aandacht naar een bepaald product wil trekken, kan het gebruik van witruimte u helpen dat beeld er te laten uitspringen. 

 

De combinatie van witruimte en de kinderen die intensief bezig zijn met het instrument zorgt ervoor dat alle aandacht van de bezoeker naar het instrument gaat.

9. Kom met uw vraag tot actie op het juiste moment

Wanneer een bezoeker naar uw winkel komt, begint u ook niet met “Koop dit!” terwijl u hem iets in zijn handen duwt.  De klant zal dan niets liever willen dan vertrekken.  Hetzelfde principe geldt op uw website: plaats de juiste call-to-action op de juiste plaats op het juiste moment (in de verkoopcyclus).

De vuistregel hier is: vraag slechts één actie per pagina.  Als u er toch meer dan 1 zou hebben is dat nog niet meteen reden tot paniek.  Een secundaire call-to-action is perfect mogelijk, maar zorg dat deze de aandacht niet afleid van uw primaire call-to-action.  Dat kan bijvoorbeeld in het geval waar uw bezoeker zich nog niet meteen wil engageren voor uw product of dienst, maar er wel informatie over wil ontvangen. 

Conclusie: Effectief webdesign werkt

We zetten nog even op een rijtje hoe u tot effectief webdesign komt.  Zorg ervoor dat uw website:

• overzichtelijk is
• visueel aantrekkelijk is
• een heldere en sterke hiërarchie op elke pagina heeft
• mensen toont met uw product erbij
• slim gebruik maakt van kleuren
• speelt met contrasten en verrassing
• de aandacht van de bezoekers vasthoudt
• Witruimte efficiënt inzet om te benadrukken wat werkelijk telt
• call-to-actions op de juiste plaats heeft