Ontwerpen voor een hogere conversie

Webdesign gaat tegenwoordig niet meer alleen om uiterlijk. Vandaag de dag wordt het steeds belangrijker dat de site ook zijn doelen behaald. Effectiviteit begint dus meer en meer een rol te spelen. Het gaat dan bijvoorbeeld om het verkopen van een product of het op de juiste manier informeren van de bezoeker. In dit artikel staan belangrijke lay-out technieken die je kunnen helpen om deze doelen te bereiken.

Balans

Bij balans gaat het om het op de juiste manier invullen van de verschillende onderdelen op een pagina, dit hoeft niet per se in perfecte symmetrie. Effectief gebruik van balans gaat over het creëeren van een goed samenhangend geheel en hier soms, waar dit belangrijk is, van af te stappen. Een voorbeeld is om een kleinere ruimte een donkerdere kleur te geven en een grotere ruimte een lichtere kleur. Op deze manier komen de twee elementen in balans.

Apple

De website van Apple staat bekend om zijn bijna perfecte balans. Er staat veel informatie op de website, maar je wordt geen moment overweldigd.

Inkd

Inkd’s website is een ander voorbeeld waar balans goed is uitgevoerd. Elke website kan hier wel iets van leren.

Contrast

Contrast is niet alleen het verschil tussen licht en donker. Je kan het ook bereiken door een groot verschil te maken tussen verschillende onderdelen. Dit kan bijvoorbeeld door te spelen met de grootte, vorm en kleur. Contrast wordt effectief als je het gebruikt om het oog van de bezoeker langs de belangrijke informatie te leiden.

Five Simple Steps

Mark Bouttons ‘Five Simple Steps’ gebruikt contrast om de call to action onder de aandacht te brengen. Zoals je kunt zien zijn alleen deze elementen rond, wat contrasteert met alle andere onderdelen die rechthoekig zijn.

Causecast

Op de website van Causecast valt de roze kleur met witte letters direct op. Alle belangrijke elementen zijn met deze kleur gegroepeerd.

Hiërarchie

Door bepaalde elementen te benadrukken breng je over wat belangrijk is en wat minder aandacht verdient. Als alles even belangrijk lijkt, komt de gebruiker al snel in wat ze ‘choice paralysis’ noemen: niet weten wat te doen en daarom maar helemaal niets meer doen.

Het gebruik van hiërarchie wordt effectief wanneer je duidelijk de volgorde van belangrijkheid aan geeft. Het belangrijkste heeft daarbij de meeste nadruk, dit wordt ook wel het centerpoint genoemd. Dit is het punt (een focuspunt) waar het oog naar toe getrokken wordt. Een mogelijkheid dus om de belangrijkste informatie over te brengen.

UX Magazine

UX Magazine geeft duidelijk aan wat het centerpoint is. Het rood springt eruit.

Business Catalyst

Business Catalyst laat geen gras groeien over wat belangrijk is op hun website. De grote witte letters trekken direct je aandacht, en de grote pijl maakt het plaatje helemaal compleet.

Basecamp

Basecamp kent het gevaar van teveel opties en helpt de gebruiker bij het maken van een keuze.

Consistentie

Door bepaalde elementen consistent te gebruiken weet de gebruiker wat hij kan verwachten. Over het algemeen is het goed om zo veel mogelijk te hergebruiken van wat de bezoeker al gezien heeft. Het is dus effectief om alle soorten informatie en mogelijke opties consistent aan te bieden.

Wehkamp

Op welke pagina van Wehkamp je ook bent, het ziet er vertrouwd uit. De gebruiker hoeft amper na te denken als hij over de site surft.

QVC

Als je goed kijkt naar de website van QVC zie je dat bijna alles consistent gebruikt wordt. In feite zijn er maar een beperkt aantal unieke visuele vormen te onderscheiden.

Ritme

Ritme is het herhalen van een visuele vorm. Als gebruiker ga je met je oog vanzelf langs de visuele vormen. Deze beweging kun je gebruiken om de bezoeker te leiden naar iets wat je wilt benadrukken.

Silverback

De tekst op de pagina van SilverBack staat ritmisch onder elkaar. De banaantjes en de tekst trekken je oog als het ware naar de download button daar beneden.

Twit robot

Twit robot gebruikt ritme om de voordelen van het product kenbaar te maken. De gebruiker moet wel weer omhoog scrollen om op de button te drukken.

Gutenberg rule

Voor het grootste gedeelte scannen we informatie van links naar rechts. Als gebruiker kom je met je blik uiteindelijk dus rechts onder uit. Als website kun je hier handig gebruik van maken door belangrijke informatie rechts onder in beeld te zetten.

Goodbarry

Goodbarry benut de ruimte rechts onder om een gratis probeerversie van zijn software aan te bieden.

Stubmatic

Als de gebruiker van Stubmatic de pagina bekeken heeft maar nog niet tot actie is overgegaan, biedt Stubmatic rechtsonder een extra mogelijkheid om het product te leren kennen.

Het visuele midden

Als we ergens naar kijken focussen we niet precies in het midden, maar daar net rechts boven. Dit punt wordt het visuele midden genoemd.

4 Pillars

De bezoeker van de website van 4 Pillars wordt direct geconfronteerd met de zin ‘Stop sinking in debt’. De zin is dan ook in het visuele midden geplaatst, als gebruiker kan je er niet om heen.

Rule of thirds

De rule of thirds is een vuistregel gebaseerd op de gulden snede. De beschikbare ruimte wordt opgedeeld in negen even grote vlakken door twee lijnen horizontaal en twee lijnen vertikaal. De belangrijkste inhoud wordt dan geplaatst langs de lijnen of daar waar de lijnen elkaar raken.

Demandware

Als je goed kijkt zie je dat deze pagina van Demandware is ontworpen met de Rule of thirds in het achterhoofd. Een aantal van de punten waar de lijnen elkaar raken zijn gebruikt om belangrijke informatie te plaatsen.

+ Het AIDA principe

Als bonus (het heeft namelijk niets met layout te maken) het AIDA principe.

Voordat iemand een actie onderneemt, doorloopt hij 4 stappen:

• Attention. De aandacht moet worden getrokken.
• Interest. De gebruiker moet geïnteresseerd raken.
• Desire. De gebruiker moet overtuigd worden van het belang van de actie.
• Action. De gebruiker neemt actie om het te krijgen.

Op het web kan je dit ook toepassen, zodat de gebruiker de gewenste actie onderneemt.

Viviti

Viviti past het AIDA principe toe door de stappen letterlijk onder elkaar te zetten. De aandacht wordt getrokken door een statement waarin ze zich afzetten tegen de concurrentie. Daarna wordt de interesse gewekt door uit te leggen wat het product inhoudt. Door de voordelen van het product te noemen bouwen ze een gevoel van verlangen op. Uiteindelijk kan de gebruiker het product proberen door op de grote button te drukken.

Campaign Monitor

Op de website van Campaign Monitor zijn alle ingrediënten voor de stappen aanwezig. Als je overtuigd bent hoef je alleen nog maar op de blauwe button te drukken.

En dat was het

Dit waren de belangrijkste lay-out technieken die je kan toepassen om de doelen van een website te bereiken. Je hoeft natuurlijk niet alle technieken tegelijk toe te passen, zelfs met een enkele valt al resultaat te behalen.