5 do’s en don’ts voor call-to-action buttons (CTA’s)

Een call-to-action of CTA is wat het woord al zegt: een oproep om iets te doen. Denk aan een oproep in een online tekst of advertentie om verder te lezen, maar ook aan een oproep om iets te kopen. Vaak heeft een CTA de vorm van een button, maar dit hoeft niet. Het gaat ieder geval om een link die tot een conversie leidt. WP Brothers geeft je tips voor goed design van je call-to-action button én voor goede tekst.
call to action button

Do’s

Denk aan de klant

Zorg ervoor dat de tekst van de call-to-action button aansluit bij de positie van de klant in de customer journey. Iemand die zich nog aan het oriënteren is op jouw product, heeft waarschijnlijk behoefte aan meer informatie. Iemand die juist al besloten heeft om te kopen, wil zo snel mogelijk bij het gewenste product uitkomen. 

Bedenk daarom wat bezoekers op welke pagina’s zoeken. Iemand die je blog bezoekt, is op zoek naar informatie en zit waarschijnlijk nog in de oriënterende fase. Iemand die rechtstreeks naar je webshop gaat, heeft andere intenties. Kies voor elke locatie van je website dus voor andere CTA’s.

Je kunt hier ook nog een stap verder gaan met Smart CTA’s. De call-to-action wordt dan gepersonaliseerd op basis van de websitebezoekers. Staat iemand in je CRM als MQL, dan krijgt hij een andere CTA dan een SQL. Smart CTA’s kun je onder andere maken met HubSpot. Lees hier meer over smart content.

Design van je call-to-action button

Zeker voor een belangrijke CTA is een opvallende knop belangrijk. Zorg voor een kleur die contrasteert met de rest van website zodat de call-to-action button er goed uitspringt. Maak de knop niet te klein en niet te vlak. Effecten zoals randen of schaduw geven je bezoeker veel meer het idee dat hij op de CTA button kan klikken. En dat is nu juist de bedoeling! Denk ook na of je knop wel voldoet aan de WCAG-richtlijnen en of hij door iedereen gebruikt kan worden.

Weeg je woorden

Begin met activerende woorden, zoals ‘klik’, ‘download’ of ‘koop’. Deze woorden moeten duidelijk maken dat de bezoeker van je website iets krijgt als hij op de knop drukt. Zorg dus ook dat je iets aanbiedt en niet iets vraagt. Een call-to-action met woorden als ‘Verzend’ of ‘submit’ heeft vaak een beduidend lagere CTR. 

Maak verder met weinig woorden duidelijk wat je kan kopen of downloaden. Denk bijvoorbeeld aan een combinatie van een bezittelijke voornaamwoord (‘jouw’) en het keyword, zoals ‘Download nu jouw whitepaper’. Met het toevoegen van woorden als ‘nu’ en ‘direct’ creëer je een gevoel van urgentie bij de bezoeker. Maar pas op dat de tekst niet te cliché of te lang wordt.

Kies een prominente plek voor je CTA

Plaats je call-to-action button op een plek die opvalt en meteen in het oog springt, zoals redelijk bovenaan een pagina. Zorg dat er genoeg witruimte om de CTA zit, zodat hij er nog beter uitspringt. Optimaliseer dit voor elk apparaat. Nu meer en meer conversies via mobile devices plaatsvinden, is het des te belangrijker dat ook daar iedereen je CTA buttons meteen ziet. 

Houd met de plaatsing van je call-to-action-button ook rekening met het feit dat er van rechts naar links en van boven naar beneden gelezen wordt. Buttons die rechtsonder de relevante content staan, werken daardoor het beste. Mensen gaan immers niet voor een aanbod waar ze nog niks over weten.

Voer A/B-testen uit

Ga niet alleen af op je intuïtie, maar voor ook A/B-testen uit. Zo kom je erachter welke design en welke plek voor jouw publiek het beste werk. Experimenteer ook met verschillende bewoordingen en verschillend aanbod. Is er bijvoorbeeld meer interesse in een whitepaper of in een webinar? Lees ook ons blog over A/B-testen om ideeën op te doen.

Don’ts

Call-to-action button in schutkleur

Kies niet voor een kleur die niet opvalt tegenover je achtergrond of tegenover de rest van het kleurenschema van je website. Een lichtgrijze CTA op een witte achtergrond is waarschijnlijk geen goede keuze en dat hoef je niet eens met een A/B-test vast te stellen. 

Geen vaag gedoe

Ga niet voor een vage omschrijving van wat er gebeurt als de bezoeker van je website op de CTA klikt. Geef ook niet iets anders dan je belooft. Een gratis whitepaper is een gratis whitepaper! Niet een truc om aan contactgegevens te komen en niets terug te geven. Bij een whitepaper verwacht de bezoeker ook wat meer dan 2 A4’tjes. 

Vraag niet te veel

Wees reëel in wat je kan vragen als tegenprestatie. Als je teveel vraagt, heb je grote kans dat je klanten alsnog afhaken. Een e-mailadres vragen in ruil voor een whitepaper is normaal, maar meer contactgegevens kan al teveel zijn. 

Niet overdrijven met call-to-action buttons

Overdrijf niet met het aantal call-to-actions. Als je er teveel aanbiedt, weet je bezoeker niet meer waar hij of zij op moet klikken. Zorg voor één primaire en een secundaire CTA. Hiermee speel je in op twee verschillende punten van de customer journey. Denk aan een aanbod voor meer info voor wie nog in de oriënterende fase zit en een koop-CTA voor de SQL’s.

Vergeet niet de resultaten te tracken

Uiteraard wil je weten hoe goed je call-to-action button het doet. Hoeveel mensen klikken erop? En hoeveel mensen die op de ‘Shop nu’- knop klikken, rekenen ook daadwerkelijk af? Je weet het alleen als je ervoor zorgt dat je de resultaten trackt. Dat kan bijvoorbeeld makkelijk met de CTA’s van HubSpot. Voordeel is dat je deze call-to-actions niet alleen in het CMS van HubSpot zelf kan gebruiken, maar dat je ze ook kan integreren in een ander CMS, zoals WordPress.

Meer weten?

Wil je op de hoogte blijven van ontwikkelingen op het gebied van websites en webshops, schrijf je dan in voor de nieuwsbrief. Of verdiep je verder in webdesign met onze blogs over sketch, paper prototyping en wireframes!

Heb je advies nodig over efficiënte CTA’s? Neem gerust contact op met WP Brothers. Onze marketeers helpen je graag verder. We werken vanuit Utrecht en Rotterdam.

Whitepaper digitoegankelijkheid

Zo voldoe je aan de WCAG-richtlijnen

  • Dit veld is verborgen bij het bekijken van het formulier
  • Dit veld is verborgen bij het bekijken van het formulier
  • Dit veld is verborgen bij het bekijken van het formulier
  • Dit veld is verborgen bij het bekijken van het formulier