E-book: hoe draagt design bij aan online conversie?

&
Hoe draagt
design bij aan
online conversie?

INHOUDSOPGAVE
Inleiding................................................................................................................................3
Design voor conversie .......................................................................................................4
Responsive voor conversie .............................................................................................21
De praktijk: custom of template ....................................................................................31
HOE DRAAGT DESIGN BIJ AAN 2
ONLINE CONVERSIE ?
eFusion Group B.V.
Randstad 21 - 26
1314 BM Almere
036 - 30 30 155
info@eFusion.eu
eFusion.eu
*Copyright eFusion Group BV, Almere
*Copyright SEOshop Group BV, Amsterdam

In de digitale wereld van vandaag is de gemiddelde webbezoeker lui en verwend
geworden. Zij willen vaak direct aangesproken worden zonder al te veel te
hoeven lezen. Daarbij helpt een mooi creatief design vaak, maar ook niet altijd.
De functionaliteit speelt namelijk ook een grote rol in het kader van de customer
journey en experience. En alsof dat niet genoeg is, komen ze vanaf allerlei
apparaten op je website terecht.
Hoe ga je daarmee om en waar zou je rekening mee kunnen houden? Hoe draagt
design bij aan conversie?
ONLINE CONVERSIE ?
1 INLEIDING

Wat wil je bereiken met je website? Wat maakt een website aansprekend? Welke
aspecten van design dragen bij aan een hogere conversie? Dat zijn zo ongeveer de
basisvragen die je zal hebben als je aan een website begint.
Het designproces van een website is onder te verdelen in een aantal essentiële
aspecten. Feitelijk houd je rekening met het gebruikersgedrag, de indeling van een
pagina, kleurgebruik, huisstijl versus de gewenste design richtlijnen, het fotogebruik en
de triggers.
Zo is kleur bijvoorbeeld zeer bepalend voor de visuele uitstraling en
herkenbaarheid van een website. Bijna net zo belangrijk als hoe kleur een grote rol
speelt bij de visuele en psychologische aspecten van de huisstijl van een bedrijf.
Het is echter belangrijk om te weten dat het één op één toepassen van corporate
kleuren in een online omgeving niet altijd goed werkt, vooral in e-commerce.
Wanneer het kleurenschema juist wordt toegepast, zorgt dat voor een visueel
aangenaam en overzichtelijke uitstraling: mooi, professioneel ogend en plezierig.
“Kleur verkoopt”, zegt men wel eens en kan als hét uitgangspunt worden gezien
wanneer je begint met het designproces van je bedrijf. Het effect van kleur op de
bezoeker is namelijk instant.
Op de volgende pagina is een afbeelding te vinden van een kleurenschema van de
basisbegrippen van de Westerse wereld. Dus afhankelijk van wat je wilt bereiken
met je webpagina, kun je jezelf het volgende afvragen (met de basisbegrippen in
het achterhoofd):
• Wie is mijn bezoeker?
• Hoe kan ik hem of haar bereiken?
• Wat is de functie van mijn kleurgebruik?
• Wil ik overtuigen, informeren of overzicht geven?
• Wil ik tot emotie aanzetten?
• Wil ik triggeren?
• Wil ik inspireren?
• Wil ik verkopen?
• Hoeveel kleuren kan ik gebruiken?
In de loop van dit hoofdstuk zullen we deze vragen behandelen.
ONLINE CONVERSIE ?
2 DESIGN VOOR CONVERSIE

Kleurenschema basisbegrippen in de westerse wereld
ONLINE CONVERSIE ?
DESIGN VOOR CONVERSIE
Ondanks dat kleur principieel leidend hoort te zijn en dus bijdraagt aan de
conversie, wordt het vaak onderschat.
De bezoeker en de pagina-indeling
Heb je al onderzoek gedaan naar je doelgroep? Wat is de demografische
samenstelling van je beoogde doelgroep? Zijn het mensen die vanuit hun emotie
besluiten nemen of vanuit het verstand? Wat wil je dat de bezoeker voor actie
onderneemt wanneer hij of zij eenmaal op de site is gelandt?
Als je weet hoe de gemiddelde bezoeker zich gedraagt op je website, kan dat
behoorlijk helpen in het designproces van de site. Een bezoeker leest in eerste
instantie niet, maar scant de site; onbewust hebben zij een taak uit te voeren. De
pagina-indeling speelt hierbij een belangrijke rol.

Uit eyetracking-onderzoek op websites is gebleken dat bezoekers, bijna altijd,
vooral de linkerkant van een webpagina bekijken; met maar liefst 69% van de
tijd. Volgens webonderzoeker Jacob Nielsen is de overige 31% verdeeld over 30%
aandacht voor de rechterhelft van het scherm, de overige één procent besteedt de
bezoeker aan de rechterkant van de pagina.
Een afbeelding van een eyetracking-onderzoek toegespitst op de homepage van eFusion
In de Westerse wereld oriënteren wij ons van links naar rechts vanwege onze
schrijf en lees eigenschappen. Over de jaren heen zullen kijkpatronen wellicht
kunnen veranderen. Dat kan of afhankelijk zijn van de opvallende elementen
op je website, of door toedoen van een utopische maatschappij waarin we
multicultureel zo geïntegreerd zijn, dat zelfs onze leesrichting veranderd.
Tot dan kun je gerust zijn, want volgens het onderzoek van Nielsen zal de
gemiddelde bezoeker altijd een aantal fasen doorlopen wanneer hij of zij zich op je
website bevindt.
ONLINE CONVERSIE ?

De bezoeker neemt eerst de volgende elementen intuïtief waar:
• Waarneming basisgrid: waar ben ik en hoe ziet de navigatie eruit?
Zie hier van links naar rechts in welke volgorde je scant voor het basisgrid
• Waarneming opmaak: wat voor afbeeldingen, designvisuals en banners zie ik?
• Waarneming actiepunten: waar zijn de icoontjes en buttons om acties mee uit
ONLINE CONVERSIE ?
te voeren?
• Waarneming informatie/content: waar is de belangrijkste informatie en hoe
neem ik dat tot me?
Hiërarchie van prioriteiten wanneer je voor het eerst op een website bent beland
Wanneer de gebruiker als doel heeft om een bepaalde actie uit te voeren, zoals
het kopen van een product, wordt er direct gezocht naar buttons en de daaraan
gerelateerde links. Meestal wordt pas in de vervolgfase de bijbehorende tekst
gelezen.
A/B test: aanmeldformulier links of rechts?
Veel webpagina’s plaatsen automatisch de webtekst aan de linkerkant van
de pagina en een afbeelding of formulier aan de rechterkant. Maar of deze
(standaard) indeling ook ‘prettig’ is voor je sales, is een ander verhaal.
1. Titels,
2. Subtitels, vetgedrukte
tekstfragmenten en
opsommingstekens,
3. En dan pas gedetailleerde
informatie lokaliseren.

Blogger Matt Sulivan deed op de website van DirectCapital een A/B test. Hij
wilde weten wat de impact zou zijn op het aantal inschrijvingen als je het
inschrijfformulier links of rechts van de pagina plaatste. Hij testte 3 varianten
waarvan 1 variant uiteraard de huidige pagina was. Het bleek dat de variant met
het inschrijfformulier links geplaatst de meeste conversie opleverde; conversie van
maar liefst 217%!
De 3 varianten. Kijk zelf even wat jij hieraan prettiger vindt en wat jou tot actie zou doen overgaan
Wil je dat de bezoeker van een pagina tot actie overgaat dan moet het ‘actie
element’ in plaats van de belangrijkste informatie links van de pagina staan. In elk
ander geval zou je kunnen zeggen dat het ‘OK’ is om de webtekst links te plaatsen
aangezien we links georiënteerd zijn.
Doe wel altijd eerst een A/B test om vast te stellen wat je moet weten in plaats van
lukraak je hele site meteen om te bouwen.
Het AIDA-model toegepast op je site
Binnen 1/20ste van een seconde hebben bezoekers al bepaald of je website voor
hen interessant is of niet. Dit blijkt uit onderzoek van Carleton University Ontario
in 2006. Kleur, vorm en fotografie zijn daarbij bepalend. Dus de positionering van
deze elementen zijn zeer belangrijk. Met de toepassing van het AIDA-model kun
je direct de aandacht van de bezoeker vasthouden na zijn of haar eerste reactie.
Grijp hun interesse! Daarmee verhoog je dus niet alleen je conversie, maar houd je
de ‘bounce rate’ van je website ook laag.
Zoals eerder al verteld scant de gemiddelde bezoeker de ‘basisgrid’ van de
website. Je kunt deze basisgrid ook in een F-vorm bekijken. Visualiseer een
grote F-vorm over je website. Het AIDA-model dien je dan ook in deze vorm te
verwerken.
ONLINE CONVERSIE ?

Het AIDA-model staat voor: Attention, Interest, Desire en Action.
• Attention (aandacht) heb je al binnen 1/20ste van een seconde wanneer een
ONLINE CONVERSIE ?
bezoeker op je site terecht komt.
• Interest (interesse) bij de bezoeker creëer je door in de F-vorm kort en bondig
informatie te presenteren.
• Desire (verlangen) maak je los bij je websitebezoeker wanneer je een
interessant aanbod of uitdagende vraag weet te presenteren.
• Action (actie) door de bezoeker komt vaak pas tot stand met een overtuigende
call-to-action gepresenteerd in een mooie call-to-action button (later hierover
meer).
Zie hieronder 4 voorbeelden waarin het AIDA-model is verwerkt in de F-vorm;
kruisvergelijk de nummers in de afbeeldingen met het hierboven beschreven
AIDA-model.
Printscreens met het AIDA-model verwerkt in de F-vorm

Psychologie van kleurgebruik
Ieder mens heeft een lievelingskleur. Wat is jouw lievelingskleur of welk kleuren
vind je lelijk? Wat doen die kleuren met je?
Kleur is krachtig, maar zeer subjectief. In elk werelddeel of cultuur verschilt de
betekenis van kleur. Waar zwart in het westen de kleur is van de dood, is dat in het
Midden-Oosten de kleur van de wedergeboorte. De kleur rood heeft in het Westen
zelfs verschillende betekenissen. Dus los van cultuur speelt de context een grote
rol.
De onderstaande afbeelding betreft het colour wheel van McCandles, waarmee
heel overzichtelijk wordt aangegeven wat verschillende kleuren betekenen in de
verschillende culturen over de wereld.
ONLINE CONVERSIE ?
Het colour wheel van McCandles

Er zijn een zestal zaken waar rekening mee dient te worden gehouden als je de
colour wheel bekijkt:
• Kleur kan een specifieke betekenis oproepen.
• Kleur en de betekenis ervan kan bepaald zijn door biologie of ervaring.
• Kleur kan gedragsverandering oproepen.
• Kleur heeft een instant effect op de kijker.
• Kleur is op basis van context/omgeving variabel in de betekenis en effect
ONLINE CONVERSIE ?
daarvan.
• Kleur wordt direct geëvalueerd door de kijker.
Betekenis en gebruik actiekleur
Wat voor actie wil je dat de bezoeker onderneemt en hoe kun je dat met kleur
triggeren?
In de eeuwige zoektocht naar conversie(verbetering) wil je bijvoorbeeld als
webshopeigenaar, dat je bezoeker tot een actie overgaat. Daarbij doe je er goed
aan rekening te houden met de kleuren die tot actie oproepen. Deze actiekleur
kan gekoppeld worden aan de menu’s, tabs, links en primaire buttons. Uit de
praktijk is gebleken, dat het goed is om 2 varianten te hanteren:
1. Primaire acties - de meest prominente en in het oog springende kleur gebruik
je uitsluitend voor de unieke en meest belangrijke acties, zoals de bestel of
betaal button.
2. Secundaire acties - een duidelijke, maar minder prominente kleur gebruik
je speciaal voor alle andere actie gerelateerde elementen, zoals minder
belangrijke buttons: wenslijst, print of share button etc.
Wat dan nog overblijft zijn de content- en designelementen. Precies zoals
omschreven onder het kopje ‘De bezoeker en de pagina-indeling’: voor de content
en overige informatie dient er altijd een goed leesbaar lettertype gebruikt te
worden met voldoende leescontrast.

Alvast wat praktijkvoorbeelden: kleurgebruik pagina en call-to-action button
Hoe gaat het er aan toe in de praktijk?
Help je gebruikers direct duidelijk maken wat ze op een pagina kunnen doen (en
aanklikken). Om een concreet beeld te schetsen van het hier bovengenoemde,
volgen er nu een aantal voorbeelden waarin het kleurschema duidelijk en
consistent is gebruikt.
Het gaat om 2 websites en een (call-to-action) button waarin het kleurschema
correct is toegepast!
ONLINE CONVERSIE ?
Budgetfloorstore
Bovenstaande printscreen is 1 van de 2 voorbeelden, waarin er goed rekening is gehouden met het
kleurgebruik op de homepage. Het tweede voorbeeld staat op de volgende pagina

Philips
Zie hierboven voorbeeld 2: de site van Philips OEM met een minimale stijl en sterk gebruik van de primaire
ONLINE CONVERSIE ?
en secundaire kleuren
1. Actiekleur (a).
2. Wat overblijft; statische informatie (b).
3. Primaire kleur; belangrijke in het oog springende actie (c).
Buttongebruik: call-to-action
Welke button op je website is volgens jou het belangrijkste?
Van alle buttons op je website zijn de call-to-action buttons vaak de belangrijkste.
Een goede call-to-action button valt op en trekt de aandacht van bezoekers. Kleur,
vormgeving en een aantal andere zaken spelen hierin een belangrijke rol:
1. Kleur
De belangrijkste regel is dat een actieknop moet contrasteren; een heldere
kleur die afwijkt van de rest van de pagina valt het meeste op.
In Nederland is de kleur #Oranje met 31% veruit de favoriet op ruime afstand
gevolgd door rood. Groen staat bijvoorbeeld op 15%.

Oranje is bijvoorbeeld een goede conversiekleur. Geel trekt heel goed
de aandacht van je bezoekers. Rood is controversieel. Het kan negatieve
associaties oproepen: stop, nee, verbod, agressie en gevaar.
Graag onderstrepen we nog even dat kleurgebruik natuurlijk ook afhankelijk is
van context, omgeving en demografie.
Maar liefst 20% van de Nederlandse websites gebruikt een rode call-to-action
button. Rood kan blijkbaar in de praktijk prima werken. Vaak past het namelijk
‘toevallig’ wel bij de huisstijl.
In onderstaande afbeelding zie je een printscreen van een A/B test, waarin de
rode actieknop als winnaar uit de bus komt.
Verklaring: de kop van de tekst begint met het woordje “Stop (...)”. In die zin
wordt er onbewust op psychologisch niveau een positieve associatie gemaakt
met de rode kleur. Hier zie je dus hoe de tekst en kleur, die normaliter
averechts zouden werken, nu juist wel aanvullend op elkaar inspelen.
ONLINE CONVERSIE ?
2. Breedte
Een call-to-action heeft in de regel de vorm van een button. Dat ‘triggert’ de
bezoeker sneller dan een tekstlink of banner.

Hierin hebben afgeronde hoeken de voorkeur, omdat ze naar binnen wijzen.
De breedte van een dergelijke knop, speelt ook een grote rol, wil je dat de knop
meer opvalt. Vorm en grootte trekken de aandacht van een bezoeker naar de
call-to-action toe. Ook oogt het wat prettiger. In Nederland gebruikt maar liefst
58% liever afgeronde hoeken voor hun actieknoppen.
ONLINE CONVERSIE ?
3. Opmaak
De meeste websites in Nederland (58%) gebruiken een call-to-action button die
aansluit bij de huisstijl. ABN AMRO, Albert Heijn, C1000, Essent etc. kiezen allen
voor een actieknop in de huiskleuren.
Het is duidelijk dat de huisstijl over het algemeen boven alles regeert. Toch is
het niet gek om eens een afwijkende kleur te kiezen. Kleur valt namelijk op. Zie
de website van www.Bongo.nl
Naast de huisstijl en de afwijkende kleurenoptie, hebben Nederlandse
designers vaak een uitgesproken voorkeur voor een kleurverloop (69%) in
plaats van een omlijning of schaduweffect.
4. Call-to-action: tekst en visueel
De tekst van een call-to-action moet duidelijk zijn. Duidelijkheid gaat voor
alles, maar probeer rekening te houden met bijvoorbeeld je tone of voice. De
werkwoordsvorm bepaalt namelijk je tone of voice. Je zegt liever “Bestel(len)” in
plaats van “Bestel nu”. De voorkeur gaat uit naar een actieve formulering dan
een lijdende passieve formulering of een dwingende tone of voice.
Een gepaste afbeelding bij de call-to-action button kan de roep tot actie
ondersteunen. Uiteraard moet dit symbool ook duidelijk en herkenbaar
zijn. Kijk maar naar H&M. Zij gebruiken een shopping bag in plaats van een
winkelwagentje.
In Nederland wordt de visuele call-to-action in 64% van de gevallen toegepast.

Extra klikargumenten zijn nooit ongewenst. Kijk maar op de volgende pagina
naar een afbeelding van een call-to-action button op de vacaturepagina van
www.eFusion.eu.
Bij het knopje is er subtiel een pijltje geplaatst om de tekst te ondersteunen.
Bijvoorbeeld webwarenhuis www.Fonq.nl haalt de onzekerheid weg
door onderaan in hun call-to-action button de ondersteunende tekst te
plaatsen “gratis thuisbezorgd”. Dat is wederom een goed voorbeeld van een
klikargument!
ONLINE CONVERSIE ?
5. Best practice: grootste gemene deler
Uit onderzoek is gebleken dat een oranje actieknop met afgeronde hoeken als
beste naar voren komt. Als grootste gemene deler zegt dit natuurlijk niets over
de effectiviteit van het knopje. Het resultaat (conversie) bepaalt uiteindelijk
hoe succesvol de designkeuzes zullen zijn. Volgens Guido Jansen spelen vele
variabelen een rol bij het succes van een actieknop.

Belangrijk is, dat men beseft dat er een gegeven context is, waarbinnen een
call-to-action button zich manifesteert. Dit is van doorslaggevend belang daar
de setting van een webpagina of -site bepalend is, hoe het knopje wel of niet
tot zijn recht komt.
Fotogebruik
Maak je al gebruik van foto’s op je website? Op wat voor manier doe je dat?
Er zijn namelijk een aantal spelregels hoe je met foto’s op je website kunt omgaan
om bijvoorbeeld een snellere laadtijd te hebben, om beter gevonden te worden,
om een sfeer te creëren of zelfs om de conversie op de betreffende webpagina te
verhogen. Over dat laatste hier een aantal tips, want het houdt allemaal verband
met elkaar:
• Zorg dat de personages op de foto’s kijken naar de meest belangrijke
ONLINE CONVERSIE ?
elementen op de webpagina’s.
• Zorg dat de objecten ook richting de belangrijkste elementen gericht zijn op de
pagina; draai bijvoorbeeld de foto van een beeldscherm altijd in de richting van
de belangrijkste informatie.
• Zorg voor een kwalitatief goede en heldere foto.
• Zorg dat de foto de sfeer van de pagina aanvult.
• Zorg dat uw website snel blijft door correct fotogebruik.
• Zorg dat hoge resoluties niet direct gedownload worden en geef de optie om
een afbeelding te vergroten.
• Zorg dat je rekening houdt met de eigenschappen van afbeeldingen op een
website; gebruik bijvoorbeeld altijd RGB kleuren en houdt het liefst een
resolutie aan van 800x600 pixels op 72 dpi.
Een voorbeeld van hoe Agis goed gebruik maakt van een afbeelding op haar site; moeder en dochter kijken
naar de verzekeringspremie en brengen deze onder de aandacht

Triggers
Tot nu toe hebben we gelezen dat kleur, indeling en vormgeving van een pagina
of element voor een trigger kunnen zorgen. Een trigger kan zijn dat men het een
prettige site vindt en duidelijk kan vinden waar hij of zij naar op zoek is. Deze zijn
natuurlijk niet de enige triggers. Waarmee en hoe kun je de bezoeker nog meer
prikkelen om tot actie over te gaan?
Kunnen en willen
Volgens BJ Fogg, een onderzoeker op het gebied van gedragsbeïnvloeding aan
de Stanford University in de VS, wil je als webshopeigenaar dat je bezoekers
doelgedrag vertonen. Het gedrag dat jij graag wil dat deze mensen vertonen op
je website. Zie onderstaande grafiek die mooi illustreert hoe ‘kunnen’ en ‘willen’
(ability & motivation) met elkaar in verband staan om een bepaald doelgedrag te
bereiken.
ONLINE CONVERSIE ?
Triggers
Low
Motivation
Hard to Do Easy to Do
High
Motivation
Motivation
Ability
fail here
Triggers
succeed here
De grafiek die Fogg heeft ontwikkeld aan de Standford University

Voorbeeld: stel dat je bezig bent een database op te bouwen voor leadgeneratie
door middel van een leuke call-to-action. De bezoeker moet dan zijn of haar
emailadres en eventueel andere (contact)gegevens invullen. Dat invullen is het
doelgedrag.
Op zich geen moeilijke opgave. Maar hoe zit het met motivatie? Het ‘willen’. Voor
velen zal die erg laag zijn, maar er zullen ook mensen zijn, die graag de nieuwsbrief
of white paper willen ontvangen. Van die laatste groep is de motivatie, het ‘willen’,
dus erg hoog. Zij hebben slechts een kleine trigger nodig om tot actie over te gaan.
Stel je voor dat je een wiskundesom moet oplossen, voordat je jouw
contactgegevens mag invullen. Niet iedereen die de nieuwsbrief of white paper
wil ontvangen, zal de som kunnen oplossen. Een kleine motivatie zal vaak niet veel
helpen tenzij je er bijvoorbeeld 10.000 euro tegenover zet. Dat verandert gelijk de
zaak.
De meeste mensen zitten wat betreft ‘kunnen en willen’ vaak in het midden.
Meestal is er slechts een klein zetje nodig om hen zover te krijgen om tot een
bepaalde actie over te gaan.
Gedrag triggeren
Een beloning op zichzelf is niet altijd genoeg. Het doelgedrag moet echt getriggerd
worden óók al ìs de motivatie erg hoog. Veel dingen die je graag zou willen doen,
doe je uiteindelijk toch niet. Simpelweg, omdat je er op dat moment niet aan
denkt.
Er zijn veel soorten triggers: een herinneringsalarm, een smsje of een boodschap
dat de kortingsactie bijna is verlopen. Een goede trigger ligt ten grondslag aan het
volgende:
• Als ze opmerkbaar zijn.
• Als je ze koppelt aan het doelgedrag.
• Als ze plaatsvinden op het juiste moment: dat je gemotiveerd en in de
ONLINE CONVERSIE ?
gelegenheid bent om het gedrag uit te voeren.
Vooral het laatste puntje is belangrijk; timing is vaak essentieel, maar ook lastig.
Psychologen spreken van ‘cues’. Korte boodschappen die je op de juiste plaats en
tijd ontvangt. Helaas gaat het in veel gevallen mis met de timing.
Als je terugkijkt naar de grafiek dan zul je zien dat triggers alleen werken boven

de curve. De combinatie van ‘kunnen en willen’ moeten boven een bepaalde
drempelwaarde uitkomen.
Motiveer, vergemakkelijk en trigger
Het kernwoord in dit paragraafje is ‘hoe’. Hoe motiveer je de bezoeker? Hoe maak
je dingen makkelijker? En hoe trigger je de potentiële klant?
De heer Fogg noemt 3 manieren om iemands motivatie te vergroten:
1. Plezier en pijn; iets plezierig doe je sneller dan iets dat pijn veroorzaakt.
2. Hoop en angst; hopen op een prijs werkt beter dan de angst dat je iets
ONLINE CONVERSIE ?
kwijtraakt.
3. Sociale acceptatie en afwijzing; shares en likes zijn voorbeelden van sociale
acceptatie en die aspiraties dragen bij aan het vergroten van iemands
motivatie.
Ook zijn er een zestal punten hoe je zaken kunt vergemakkelijken:
1. Tijd; iets moet niet te veel tijd in beslag nemen.
2. Geld; het product moet niet te duur zijn.
3. Fysieke inspanning; niet al te veel fysieke inspanning helpt ook.
4. Mentale inspanning; vaak wil de bezoeker niet te veel nadenken.
5. Sociale norm doorbreken; dit is een moeilijk punt, maar belangrijk hierin is om af
te wegen of je tegen de gangbare norm wilt ingaan.
6. Routine; routinegedrag is laagdrempeliger dan dat je weer een nieuwe routine
moet aanleren.
Fogg heeft ook een drietal punten waaronder je triggers kunt scharen:
1. Sparks; motiverende boodschappen op het moment dat je beoogde doelgroep
er iets mee kan doen. De doelgroep moet de trigger wel herkennen en kunnen
koppelen aan het gewenste doelgedrag.
2. Facilitators; deze maken het gedrag eenvoudiger zoals de OV-ambassadeurs,
die ouderen helpen om met de bus te reizen.
3. Reminders; soms zijn reminders cruciaal.

3 RESPONSIVE VOOR CONVERSIE
Naast de verschillende aspecten van design spelen er ook andere factoren een rol,
die je conversie kunnen verhogen. Je zult vast al eens hebben nagedacht of jezelf
hebben afgevraagd hoe er ook conversie valt te halen uit het mobiel verkeer op je
website.
In dat geval zit je al op de goede weg. “Details is what matter”. En al helemaal na het
lezen van hoofdstuk 1. Je zult nu vast een goed beeld hebben van hoe de kleine
dingen in design erg belangrijk zijn.
De pointers uit dit hoofdstuk kun je én moet je eigenlijk meenemen in de
ontwerpfase van je site.
De vraag is dus: wat ga je doen? Ga je een nieuwe website bouwen? Begin je pas
aan je site of ga je die aanpassen? Je doet er goed aan om meteen de mobiele
beleving van je doelgroep hierin mee te nemen. Want heb je al een website voor
desktop, maar niet geoptimaliseerd voor mobiel? Als je daarmee rekening wilt
houden dan heb je 3 keuzes:
1. Bouw een website met een responsive design.
2. Bouw een volledige toegewijde mobiele website.
3. Bouw een app voor op je mobiel.
Wij zullen het in dit hoofdstuk echter alleen hebben over de voordelen van een
responsive design en werpen kort wat licht op hoe een responsive design impact
heeft op je content.
Responsive design
Wat is responsive precies? Er zijn veel zienswijzen en definities over wat responsive
precies inhoudt. Om het beter te begrijpen kijken we eerst naar de letterlijke
betekenis van het Engelse woord ‘responsive’; in het Nederlands letterlijk vertaald:
“toegankelijk” of “aanspreekbaar”. In de context van webdesign is het woordje
“toegankelijk” veel beter op zijn plek.
Auteurs definitie: “een manier van ontwerpen, waarbij er rekening wordt gehouden
met een optimale gebuikerservaring door meteen de verschillende schermformaten
en resoluties van de mobiele apparaten tijdens het ontwerpproces mee te nemen en
de indeling - en content - te ontwerpen aan de hand van de beschikbare ruimte op het
betreffend mobiele apparaat.” - Tristan Wirabangsa
ONLINE CONVERSIE ?

Zie hier enkele voorbeelden van responsive sites gebouwd door eFusion.
Zie hierboven een responsive voorbeeld site van TopVorm.nl gebouwd door eFusion
Een ander voorbeeld van de website Marie-Stella-Maris.nl
ONLINE CONVERSIE ?
RESPONSIVE VOOR CONVERSIE

Adaptive design
Adaptive design gaat een stapje verder dan responsive design. Bij ‘adaptive’ design
houd je als designer rekening met de manier waarop een apparaat wordt gebruikt
door te kijken naar de contextuele factoren als tijd en locatie. In dit geval past
niet alleen de content zich aan, maar ook de functionaliteit van een website. Vaak
worden adaptive en responsive design met elkaar verward.
Praktijkvoorbeeld ‘adaptive’ design
Websites van events hebben bijvoorbeeld een tijdelijk karakter. In zo een geval
neem je de factor ‘tijd’ mee in het designproces. Je kunt je als eigenaar van zo een
site afvragen wat de behoefte is van je bezoekers en hoe deze verandert naarmate
het betreffend event dichterbij komt.
Van tevoren willen bezoekers informatie over het event zelf, de line-up, een
routebeschrijving of misschien willen ze zelfs al het kaartje meteen kopen. Tijdens
het event bijvoorbeeld zou het veel toepasselijker zijn als de website meer als
‘online krant’ zou dienen. Dingen als route-informatie worden meteen minder
belangrijk, maar waar je bijvoorbeeld gratis water kunt halen tegen de hittegolf, is
dan wel weer meer gewild. Achteraf zijn bezoekers hoogstwaarschijnlijk op zoek
naar foto’s, filmpjes of gevonden voorwerpen. De prioriteit van content verandert
vaak op basis van van de gegeven situatie.
Voordelen responsive design
Of je site of shop nou adaptive of alleen responsive is, maakt voor deze alinea niet
uit. De essentie is een platform dat reageert op de verschillende schermformaten,
resoluties en op apparaten van de bezoeker. Een dergelijke ‘smart’ site heeft dus
een aantal voordelen:
1. Een beter oordeel door gebruikers, omdat de site zich aan hun specifieke
ONLINE CONVERSIE ?
wensen aanpast.
2. Een langere bezoektijd; dus lagere bounce rate, omdat de site de belangrijkste
en meest relevante content duidelijk en overzichtelijk indeelt en presenteert.
3. Een stijging in het bezoek van de aantal pagina’s, omdat de site lekker
meeschaalt.
4. Een stijging van het aantal unieke bezoekers op de homepage, omdat de
dempel lager is om met je mobiel of ander apparaat een responsive website te
bezoeken.
5. Een stijging van het aandeel mobiel verkeer, wederom vanwege de verlaagde
drempel.
6. Een hogere authorranking van Google, omdat bezoekers je content echt

ONLINE CONVERSIE ?
consumeren en waarschijnlijk zelfs ook delen.
7. Een regelmatig terugkerend bezoek van de doelgroep, omdat zij het bezoek als
prettig hebben ervaren.
8. Een compleet beeld van al het verkeer, omdat je 1 website hebt voor alle
vormen in plaats van een dedicated mobile site of native app.
9. Een toekomstvriendelijke site, omdat responsive al automatisch rekening
houdt met elk ander schermformaat of -resolutie van de toekomst.
10. Een surplus voor je social media ‘presence’, omdat de drempel verlaagd is om
een webpost te delen met je ‘peers’.
11. Een hogere vindbaarheid, want zo verwijzen alle links en ‘bookmarks’ naar 1
URL.
12. Een autoritaire uitstraling, omdat je als professionele website meegaat met de
mogelijkheden van de tijd.
13. Een stapje voor op je concurrenten en een verbetering van je imago, omdat je
progressief bent ingesteld, maar ook gebruiksvriendelijk bent.
14. Een daling van de kosten, want je hebt geen onderhoudskosten voor meerdere
sites.
15. Een stijging van efficiency, omdat je maar 1 keer content hoeft te publiceren en
je niet verschillende websitevormen moet onderhouden.
De bovenstaande voordelen dragen allen bij in het grootste voordeel van alles: een
hogere conversie!
Mobiele site (responsive) en de content
Laten we naar enkele voorbeelden van succesvolle responsive designs kijken. Deze
responsive designs kunnen bijdragen aan meer mobiele conversie. De volgende
websites zijn van desktop naar responsive overgegaan:
O’Neill Clothing

Het populaire surfmerk O’Neill heeft interessante resultaten weten te boeken na
de implementatie van een responsive design. Gedurende 3 weken hebben zij de
conversie, transacties en winst gevolgd, vóórdat ze overgingen op responsive. En
toen, na de lancering van responsive elementen, hebben ze voor nog eens 3 weken
alle (3 de) activiteiten nagemeten en de resultaten waren indrukwekkend.
ONLINE CONVERSIE ?
iPhone/iPad:
• Conversie verhoogde met 65,71%.
• Transacties stegen met 112,50%.
• Winsten stegen met 101,25%.
Andriod apparaten:
• Conversie verhoogde met 407,32%.
• Transacties stegen met 333,33%.
• Winsten stegen met 591,42%.
Skinny Ties
Het bedrijf Skinny Ties bestaat al bijna 40 jaar. Ongeacht de leeftijd van je
onderneming, kun je blijkbaar net als Skinny Ties, kiezen voor een nieuwe identiteit
om je bedrijf opnieuw te positioneren op de markt. Zij hebben een platform laten
bouwen, dat toekomstvriendelijk moest zijn en kozen daarom voor een responsive
design. In slechts enkele weken kon Skinny Ties al nameten wat voor impact hun
besluit had:
• Winsten van een iPhone stegen enorm met 377,6%.
• Conversie ratio van iPhone steeg met 71,9%.
• Winsten van alle apparaten gingen omhoog met 42,4%.
• Bounce rate ging drastisch omlaag met 23,2%.
Terugblik
Zoals beweert, kun je in de 2 casestudies hierboven zien, dat een responsive
design veel beter is dan een desktop als je meer conversie wilt halen uit je
mobiel dataverkeer. Ondernemingen die mobiele bezoekers aantrekken op hun
desktopsite, verliezen een aanzienlijk potentie op conversies en meer winst. De
mobiele markt raakt steeds meer verzadigd en het publiek voert veel meer uit op
hun mobiele apparaten. Het niet overgaan op responsive kan voor je het weet,
juist veel meer kosten dan de eenmalige investering in een responsive website.
Content op responsive
Als je kiest voor de toekomst, een responsive website, dan is het belangrijk om te

weten dat je afhankelijk bent van de situatie. Met andere woorden: is je website
van tijdelijke aard, heb je veel mobiel verkeer op je site of is je website je product?
Een goed opgebouwde responsive site vereist dat je rekening houdt met de
pagina-indeling door je content te prioriteren. Zie hieronder 5 zaken waar je
rekening mee dient te houden:
ONLINE CONVERSIE ?
1. Richt je op het belangrijkste
Verwijder alles wat onnodig is, zoals grote lappen teksten. Zorg ervoor dat je
propositie het eerste is wat je bezoekers zien.
Links zie je een voorbeeld waarin de propositie niet duidelijk wordt gepresenteerd aan het publiek in
vergelijking met de rechter

Vergeet daarbij niet de triggers of beloningen duidelijk neer te zetten, zodat je
conversie gewaarborgd blijft. Een responsive site alleen is niet de oplossing.
“Details is what matter”, remember?
ONLINE CONVERSIE ?
2. Maak opvallende CTA’s
Zorg ervoor dat je call-to-action knoppen zo groot zijn, dat ze de totale breedte
van een mobiel scherm in beslag nemen. Zo hoeven je bezoekers niet in te
zoomen op de CTA button.
Houd hierbij ook rekening met het mobielgedrag van je bezoekers. Zo doe je
geen goed voor je conversie als je een whitepaper van 15 pagina’s laat laden
op je mobiele site. Geef je bezoeker de mogelijkheid om op een call-to-action
button te klikken aangezien ze vaak onderweg zijn. Dan hebben ze thuis rustig
de tijd en ruimte om je whitepaper te lezen.
Je doet er slim aan om bijvoorbeeld mobiel specifieke call-to-actions te
plaatsen onder contactinformatie, zoals “bel nu” of “routebeschrijving”. Dit kan
resulteren in een meer getargete mobiele ‘browsing experience’.
Zie hoe AUDi hun CTA hebben geplaatst; de bezoeker weet meteen wat hij of zij kan doen op de site

ONLINE CONVERSIE ?
3. Foto’s en video’s
Maak goed gebruik van foto’s en video’s, want deze spreken eerder tot de
beleving en verbeelding van een bezoeker. Grote lappen tekst lezen, is niet
waar de gemiddelde websitebezoeker op zit te wachten.
Let op: uit onderzoek is gebleken dat 67% verwacht dat een mobiele site laadt binnen 4 seconden. Gebruik
dus niet te veel of te grote foto’s of filmpjes en zeker ook geen flash
4. Kort je formulieren in
Hiervoor kijken we even naar het autoverhuurbedrijf Hertz. Als je informatie
wilt over een huurauto, hoef je alleen maar 4 informatievelden in te vullen:
naam, adres en contactinformatie zijn totaal niet nodig. Dat kan in een later
stadium. Faciliteer eerst de gewenste informatie aan je bezoeker.
Zie op de volgende pagina een voorbeeld van de mobiele pagina van Hertz.

ONLINE CONVERSIE ?
De mobiele pagina van Hertz
5. Gebruik tabs om structuur aan te brengen
Structureer en organiseer je informatie op basis van categorieën, zodat
mobiele gebruikers sneller kunnen vinden waar zij naar op zoek zijn.
Kijk op de volgende pagina weer naar een voorbeeld van hoe het gebruik van
tabs in de praktijk wordt toegepast.

Een voorbeeld van hoe een desktop site (links) boven de vouw de belangrijke informatie plaatst en de
overige onderin ten opzichte van een mobiele site, die met een tabblad de informatie heeft gestructureerd
ONLINE CONVERSIE ?

4 DE PRAKTIJK: CUSTOM OF TEMPLATE
Zal ik een custom site laten bouwen of een template gebruiken voor mijn
webshop- of site?
Dat is een vraag die velen stellen en die je jezelf waarschijnlijk ook eens hebt
gesteld. Tegenwoordig is het ook mogelijk om als doe-het-zelver je eigen
website te bouwen zonder enige verstand van kennis te hebben. Vaak is het een
budgetgebonden probleem, waardoor men kiest om hun site of zelf te bouwen of
om voor een template te kiezen.
Vergis je niet! Als je een template hebt uitgekozen, ben je er nog niet. De voorbeeld
websites die men online laat zien, zijn natuurlijk gevuld met mooie demo content,
die de standaard template goed tot zijn recht laat komen. Bij jouw website is er
geen demo content, laat staan content die je template tot zijn of haar recht doet
komen.
Er zijn een aantal afwegingen die je moet maken in dat opzicht:
• Budget, is uiteraard het eerste waar je naar kijkt; een custom site is veel
ONLINE CONVERSIE ?
duurder dan een template.
• Tijd, is een tweede daar een custom site een langere productietijd behoeft.
• Concept, omdat het concept bepalend is voor de oriëntatie en ontwikkeling van
je website.
• Content, wat voor content heb je in gedachten? Lappen tekst, foto’s of filmpjes?
Ook deze zijn belangrijk om mee te nemen in je afweging tussen template of
custom. Is je beoogde template wel mediavriendelijk? Kun je filmpjes uploaden
of embedden of is het alleen een template geoptimaliseerd voor tekst?
Hieronder zullen we ter afsluiting van dit E-book kort en overzichtelijk de voor- en
nadelen van een custom site geven ten opzichte van een site gebouwd op een
template.
Voor- en nadelen van custom
Voordelen
• Je hebt een op maat gemaakte look & feel voor je website.
• Je hebt na oplevering de mogelijkheid om van je website’s CSS een standaard
template te maken.
• Je hebt een site die naadloos aansluit bij je huisstijl.
• Je hebt een site die je doelgroep aanspreekt.
• Je kunt je site zo inrichten dat het ‘compatible’ is met allerlei content, omdat het

ONLINE CONVERSIE ?
DE PRAKTIJK: CUSTOM OF TEMPLATE
design zich aanpast aan de content en niet andersom.
• Je kunt je business propositie veel duidelijker naar voren doen komen.
• Je hebt (mits er garantie bij komt kijken) direct contact met de bouwer van je
website als er een foutje is gemaakt of iets snel gewijzigd moet worden.
• Je kunt je eigen CMS ook op maat inrichten.
• Je hebt invloed op de usability en de user interface, want je kunt je bezoekers
op deze manier leiden om zich of in te schrijven voor de nieuwsbrief, een
whitepaper te downloaden of om een account aan te maken.
Nadelen
• Je bent voor je het weet snel duizenden euro’s kwijt.
• Je bent veel tijd kwijt aan het design- en bouwproces.
Een afbeelding van eFusion’s maatwerk voor GewoonKnus.nl

ONLINE CONVERSIE ?
Voor- en nadelen template
Voordelen
• Je bent snel online; een template behoeft minder werk.
• Je hebt minimale kosten; sommigen zijn zelfs gratis of kosten enkele tientjes.
• Je hebt al punten bij Google; het indexeren kan meteen beginnen.
• Je hebt een professioneel ogend website; content is hierin ‘key’.
Nadelen
• Je kunt de template beperkt aanpassen.
• Je bent tijd kwijt met het aanpassen van content die in lijn moet met de
template.
• Je website is niet uniek tenzij je de volledige template afneemt, maar dan ben je
bijna net zo duur uit als een custom website.
• Je moet meer moeite doen om een call-to-action button ergens op de pagina
mooi te plaatsen.
Baselife.nl een door eFusion op maat gebouwde website op basis van een Delta template

Het voorbeeld op de voorgaande pagina is een prima voorbeeld van ‘ eten van 2
walletjes’: er is namelijk maatwerk verricht op het Delta thema. Je kunt namelijk
eerst een thema aanschaffen om op basis daarvan maatwerk te verrichten.
ONLINE CONVERSIE ?
Zie onderstaand voorbeeld van het standaard Delta thema.
Delta is een thema ontwikkeld door eFusion. Als je goed kijkt zal je enkele stijl-elementen
herkennen op de pagina van Baselife aangezien dit een thema is met
custom aanpassingen.

Zie hieronder een ander voorbeeld van een Delta thema, waarbij er geen
maatwerk is verricht.
ONLINE CONVERSIE ?

Waar let je op bij een maatwerkpartij
Ben je op zoek naar een partij die maatwerk verricht of een partij die werkt met
vaste templates?
Ongeacht waar je naar op zoek bent, vinden wij dat de eisen voor een
maatwerkpartij net zo streng dienen te zijn voor een partij, die met templates
werkt. De reden is simpel: je betaalt uiteindelijk er wel voor en je moet waar krijgen
voor je geld.
Wij van eFusion zelf hebben een heel goed en concreet idee waar je als
geïnteresseerde op moet letten, wil je een partij hebben die goed werk levert.
Graag maken we eerst duidelijk dat er een nuance bestaat in de term ‘goed werk’
leveren:
• ‘Goed werk’ in de zin van: partij A bouwt de mooiste sites!
• ‘Goed werk’ in de zin van ‘the whole package’: partij B bouwt naast mooie sites
ook goede functionele sites voorzien van mogelijkheden om gebruik te maken
van alle moderne web-innovaties.
Goed werk betekent helaas nog steeds niet dat je een goede partij te pakken hebt.
Zie hieronder een set aan criteria waarmee je kunt bepalen of de beoogde partij
inderdaad ‘goed’ werk levert:
• Creatieve designs.
• Functioneel ontworpen.
• Uitstekende customer experience.
• Duidelijke communicatie.
Creatieve designs
De huisstijl van een onderneming is voor velen een uitgangspunt om de website
op te richten. Zoals gelezen in hoofdstuk 1 is het niet altijd mogelijk om je huisstijl
één op één te vertalen in een online en of e-commerce omgeving.
Het bedrijf dat je op het oog hebt om je website te laten bouwen, dient een
portfolio te hebben, dat niet alleen spreekt van creativiteit, maar ook commerciële
creativiteit. Zij dienen op de hoogte te zijn van hoe kleur, vormgeving, knopjes,
pagina-indelingen etc. van invloed kunnen zijn op de uitstraling van een website,
maar ook je ten doel gestelde conversie. Het één sluit het ander niet uit!
Zie op de volgende 2 pagina’s maatwerk voorbeelden, waarvan beiden zijn
gebouwd ‘from scratch’.
ONLINE CONVERSIE ?

ONLINE CONVERSIE ?
De prachtige website van Marie-Stella-Maris

De eigenzinnige & arty-like website van 10-27. Niet altijd hoeft een website eruit
te zien, zoals wat de ‘ mainstream’ doet. Volgens eFusion mag een beetje eigenzinnig ook wel.
ONLINE CONVERSIE ?

Functioneel ontworpen
Succesvol online ondernemen staat en valt met de juiste software. Los van
het esthetische is het functioneel ontwerp van je site of webshop namelijk erg
belangrijk. De juiste inrichting van je webtechniek is daar een voorbeeld van.
Software speelt dus een cruciale rol, omdat de juiste koppelingen nodig zijn tussen
de back-end en de front-end.
Back-end: zorg dat je de juiste softwarepakketten hebt, die op elkaar aansluiten,
zodat er een naadloze aansluiting is met de user interface aan de front-end kant.
Front-end: zorg dat je ook hier kiest voor de beste user interface. Onderzoek
je doelgroep en kom erachter hoe zij zich oriënteren op een website, wat hen
motiveert en triggert.
Uitstekende customer experience
Voor het selecteren van een maatwerkpartij, is het belangrijk om te weten dat
customer experience voorop staat. Dat houdt in: een goede klantenservice en
bereikbaarheid. Je gaat namelijk in de ontwerpfase van je site geregeld het ‘hoe of
wat’ bespreken.
Met een wireframe, de blauwdruk van een webshop of -site, wordt in overleg met
jou de indeling van de site bepaald. Deze fase in de ontwikkeling van de website
noemen wij ‘interactie design’.
Met een duidelijke navigatie en een overzichtelijk en helder design moet er
zorggedragen worden voor een optimale klantbeleving. Je bezoeker wordt
hierdoor aangemoedigd om actie te ondernemen op de pagina. Uiteindelijk staat
conversie optimalisatie altijd voorop, tenminste... bij eFusion wel.
In een later stadium hoort er ook structureel overleg plaats te vinden over details
om je site verder te ‘fine tunen’. Zaken als de kleurenstelling, vormgeving van de
knoppen en de ontwikkeling van call-to-action banners zijn enkele stijlelementen
die, zoals gelezen, de basis vormen voor elk webdesign.
Duidelijke communicatie
Er is nog een laatste punt waar je naar dient te kijken voor je een dure
maatwerkpartij aan de haak slaat: de communicatie.
Je kunt de beste webbouwer ter wereld hebben, maar wanneer de communicatie
en het overleg niet helder en duidelijk verlopen, zal de ontwikkeling dit ook niet
doen.
ONLINE CONVERSIE ?

Tijdens de offertefase kun je al snel terugzien of de betreffende partij helder
communiceert en daarin consequent is. Als de offerte niet duidelijk is en er zijn te
veel vragen dan is dat vaak een voorbode van hoe de communicatie tijdens het
designproces zal verlopen.
Als je vragen hebt, stel deze gerust en let daarbij goed op of ze je een duidelijk
antwoord kunnen geven. Je kunt het zelfs nog een stapje verder nemen: “Stelt de
beoogde partij zich naast een goede service ook klantgericht op?”
Nog even een woord van onze pro
Joey Schmidt, Art Director eFusion
ONLINE CONVERSIE ?
“Details is what matter”, weet je nog?
Ter afsluiting van dit E-book hebben wij in het kader van een ‘ sign-off’ Joey
Schmidt, de art director van eFusion, gevraagd hoe hij op de hoogte blijft in zijn
vakgebied.
Het is een art director met een echte passie voor grafisch design en alles wat
daarmee te maken heeft.
“Details is what matter”, weet je nog?

E-book: hoe draagt design bij aan online conversie?

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

E-book: hoe draagt design bij aan online conversie?