Naar De Knoppen: Zo Maak Je De perfecte CTA’s Voor Jouw Website!

De Call To Action – of CTA – is cruciaal voor het succes van je website. Je kunt CTA’s strategisch inzetten om verkoop te boosten of inschrijvingen te genereren voor je nieuwsbrief. In dit artikel leg ik uit hoe je de perfecte CTA creëert in de context van jouw onderneming of industrie. Ook geef ik je concrete tips waarmee je meteen aan de slag kunt.

De effectiviteit van een button is sterk afhankelijk van de context. Met context bedoel ik hier: hoe ziet de rest van het platform eruit? Wie is de doelgroep en wat is hun verwachtingspatroon?

Voorbeeld.

Als je op Google zoekt naar advies over welke kleur je CTA’s optimaal doet converteren, kom je een hooiberg van onderzoeken tegen. In veel van deze onderzoeken lees je wat het effect is van kleur op de menselijke psyche.

Rood of blauw?

Helaas spreken deze onderzoeken elkaar vaak tegen. Zo zou volgens het ene onderzoek de kleur rood de eetlust een boost geven, terwijl het andere onderzoek beweert dat mensen juist negatief staan tegenover de kleur rood als ze mogen kiezen tussen rood en blauw.

Op internet zwerven talloze infographics rond die menselijke associaties verbinden aan kleuren. Geel staat vaak voor optimisme, blauw wekt vertrouwen, etc. Echter zijn dit soort associaties in grote mate afhankelijk van zaken als geslacht, cultuur, etc.

Wat doet kleur dus voor je CTA’s? Dat is volledig context-afhankelijk. Belangrijk is dus om jouw CTA’s op de juiste wijze in jouw unieke content te plaatsen. Maar hoe pak je dat aan?

Grote knoppen

Een van de meest voor de hand liggende mogelijkheden om een CTA op te laten vallen, is het formaat. Als je een hele grote knop op je website plaatst, is de kans groot dat je bezoeker hem ziet en uiteindelijk gaat klikken.

Houd wel in de gaten dat grote knoppen ook een keerzijde hebben: namelijk dat ze de visuele hiërarchie kunnen verstoren als je er iets te enthousiast mee strooit.

Conversiekilling

Kies dus heel bewust welke knoppen het belangrijkst zijn, maak daar je primaire CTA’s van en maak die eventueel wat groter dan de rest.

Verder is het belangrijk dat je rekening houdt met de aanbevolen grootte van buttons in het algemeen. Niets is zo conversiekilling als om op een minuscuul linkje te moeten klikken of tikken!

Maak het de bezoeker makkelijk op alle apparaten: Smashing Magazine heeft hier een heel overzichtelijk artikel over. Ook kun je kijken naar de guidelines van Apple, Material Design en andere veelgebruikte design systemen.

Bepaal de positie

De plek waar je buttons neerzet, bepaalt de vindbaarheid van de actie die je de bezoeker aanbeveelt. Als je ze op een onbenullige plek zet, vallen al je weloverwogen keuzes wat betreft kleur en formaat in het water!

Om te kunnen begrijpen waarom positionering zo’n groot effect heeft, geef ik je enkele voorbeelden van hoe mensen websites scannen.

Verleidingen

Als je weet hoe mensen websites scannen, kun je er op inspelen en op de juiste plekken verleidingen plaatsen. Voor bronnen over dit soort vraagstukken verwijs ik je graag naar de Nielsen Norman Group. In enkele van hun onderzoeken bleek dat mensen scannen in verschillende soorten patronen – afhankelijk van het type content.

Bron: Tutsplus

Z-patroon

Een Z-patroon is een patroon dat vaak voorkomt op sites waar niet heel erg veel tekst op staat, en waar vaak weinig gescrold hoeft te worden.

Min of meer alle informatie is dus zichtbaar op je scherm. De bezoeker kijkt eerst links bovenin, waar hij belangrijke informatie verwacht, en beweegt dan naar rechts, schuin naar beneden naar links, en weer naar rechts.

Op een Z-patroon kun je dus inspelen door de meest belangrijke informatie bovenin te plaatsen, wellicht met een titel en een CTA links.

Bron: Nielsen Norman Group

F-patroon

Een F-patroon wordt vaak aangetroffen op een ander soort sites: dit zijn vaak sites met veel tekst. Denk hierbij bijvoorbeeld aan een blog of een nieuwswebsite.

De bezoeker gaat in een horizontale beweging van de linker- naar de rechterkant en herhaalt dit nadat hij een klein stukje naar beneden heeft gescrold. Vervolgens beweegt hij verder naar beneden om te kijken naar kernwoorden en buttons.

Voor een F-patroon is het een goed idee om te letten op CTA’s aan de boven- en onderkant van de site, en in het midden: voornamelijk als er niet heel veel andere navigatie-elementen worden geplaatst.

De impact van microcopy

Microcopy klinkt heel klein en lief, maar kan een enorme impact hebben op hoe duidelijk je buttons zijn voor de bezoekers van je website. Tijd om die eens serieus onder handen te nemen dus!

Met microcopy bedoel ik de kleine teksten op een website die dienen als een soort hints voor je bezoeker. Hier vallen dus niet alleen buttons onder, maar ook bijvoorbeeld error-meldingen en productbeschrijvingen.

In het geval van CTA’s is het belangrijk dat de microcopy je precies vertelt wat je kunt verwachten als je erop klikt.

Is het een knop die zorgt dat je een mailtje kan sturen? Zet er dan in ‘E-mail ons’. Is het een knop die zorgt dat je een evenement in je agenda kan zetten? Zet er dan in ‘Toevoegen aan agenda’. Zorg dat er geen enkele twijfel is bij je bezoeker. Dat brengt jou meer klanten of leads.

Kies de perfecte kleur… voor jou

Nog even over kleur. Het is niet zo dat kleur niks uitmaakt voor de perfecte CTA. Maar blauw is niet per se beter dan rood.

Misschien valt een blauwe CTA wel veel beter op op jouw website dan een rode en presteert deze daardoor beter!

Onderzoek toont ook aan dat een eye catching CTA veel beter converteert dan een CTA met laag contrast.

Zie je? Als de tekst bijna wegvalt tegen de kleur van de button, of de button wegvalt op de achtergrond, werkt dit niet fijn. Dit kan dus ook gevolgen hebben voor jou, als het op je branding aankomt.

Contrast

Als jouw website grotendeels geel is, moet je dus niet precies die kleur voor de buttons gebruiken. Een andere, contrasterende kleur, werkt dan veel beter.

Let bij het kiezen van de contrasterende kleur op je eigen merkidentiteit: de kleur voor je buttons moet wel geloofwaardig zijn voor je klant.

Het komt in het algemeen niet erg logisch over als jij je specialiseert in scheerapparaten voor mannen en je merkidentiteit is masculien, maar je knoppen zijn babyroze.

Wees consequent

Pas deze tips consequent toe op alle CTA’s op je site. De kracht van consequent zijn, is juist dat je een verwachtingspatroon schept, waar je bezoeker weer heel blij van wordt.

Stel: jij bent inconsequent met de kleur van je buttons en gebruikt grofweg vijf verschillende kleuren voor functioneel gelijke buttons, dan communiceer je eigenlijk tegen je bezoeker dat al die buttons van elkaar verschillen en raakt de bezoeker in de war.

Ook kan kleur bijvoorbeeld helpen om aan de bezoeker van je site te communiceren dat er een actie verbonden is aan een element. Bijvoorbeeld: alle knoppen en linkjes zijn rood.

Verwarring

Dat betekent dat als ik ik naar een nieuwe pagina ga als ik erop klik. Op het moment dat je elementen waaraan geen actie verbonden is ook rood zijn, zaai je meteen verwarring. Niet doen dus.

Ik hoop dat je met deze tips aan de slag kunt om je eigen site gebruiksvriendelijker te maken, zodat je net even die extra boost in conversie gaat voelen.

Elke site en elke business is echter weer anders, dus misschien heb jij wel een heel specifieke uitdaging waarvoor het antwoord er hier niet tussen staat. Aarzel niet om contact met ons op te nemen!


Anna Lena van IerselAnna Lena is Interaction Designer bij PONCK. Ze combineert diepgaande kennis van UX met Visual Design. Dat levert aansprekende ontwerpen op die gebruiksvriendelijke zijn en goed converteren.