Call-to-action: de knop die bepaalt of er iets gebeurt
Op de gemiddelde website staat overal dezelfde knop. Meer informatie. Lees verder. Klik hier. Drie woorden die niets beloven. De bezoeker weet niet wat er gebeurt na die klik, dus klikt hij niet. Zo blijft een pagina met bezoek alsnog leeg qua aanvragen.
Dat is zonde, want een knoptekst aanpassen kost je vijf minuten. Het is de goedkoopste ingreep in dit hele vak.
Bij Fietspoint Ruiter zag ik dit terug. Ik verzorgde het webdesign, de webteksten en de vindbaarheid. Op de servicepagina stond een knop met de tekst meer informatie. Klanten belden vervolgens om te vragen wat ze moesten doen.
We hebben die knop veranderd in reparatie inplannen. Daaronder kwam een zin over binnen twee werkdagen klaar. De telefoontjes met de vraag hoe het werkt namen af. Mensen gingen zelf door naar het formulier.
Een knop met een duidelijke belofte doet meer dan een mooie kleur.
Wat is een call-to-action?
Een call-to-action is de plek waar je om actie vraagt. Meestal is dat een knop. Het kan ook een link of een heel blok zijn. De afkorting is CTA. In het Nederlands heet het een oproep tot actie.
Het gaat niet om de vorm. Het gaat om de belofte die eronder ligt.
De regel die ik altijd aanhoud
Een goede knoptekst beschrijft wat de bezoeker krijgt, niet wat hij moet doen. Vergelijk deze twee.
Versturen. Zegt niets over de uitkomst.
Stuur mijn aanvraag. Zegt wat er gebeurt.
Meer informatie. Vaag en vrijblijvend.
Bekijk de prijzen. Concreet en meetbaar.
Schrijf hem vanuit de bezoeker. Ik wil, in plaats van u moet. Dat verandert de toon meteen.
Houd het kort
Twee tot vier woorden werkt het best. Langer past niet op een telefoon. Zet extra uitleg in een regel onder de knop, niet erin.
Hoeveel knoppen zet je op een pagina?
Per scherm hoort er een primaire actie te zijn. Dat is de knop die je echt wilt laten indrukken. Daarnaast mag een tweede, rustiger optie staan.
Denk aan offerte aanvragen als hoofdknop, en bel me terug als bijrol. Geef die tweede knop een lichtere vorm. Anders concurreren ze met elkaar en kiest de bezoeker geen van beide.
Herhalen mag wel
Dezelfde knop mag vaker terugkomen op een lange pagina. Bovenaan, halverwege en onderaan. Zolang het dezelfde actie is, helpt dat juist.
Waar zet je hem neer?
Er hoort er altijd een above the fold te staan. Daarnaast na elk blok waarin je iets hebt bewezen. Na de uitleg van je dienst, na de reviews, na de prijzen.
Op een landingspagina uit een advertentie is de intentie hoger. Daar mag je het formulier invullen direct in beeld zetten. Op een gewone dienstenpagina werkt een knop naar het formulier beter.
Over die kleur
Er wordt veel onzin geschreven over knopkleuren. Groen converteert niet beter dan rood. Wat telt is contrast met de rest van je pagina.
Gebruik een kleur die verder nergens terugkomt. Zo wordt die kleur in het hoofd van je bezoeker de klikkleur. Zorg wel dat de tekst leesbaar blijft, dat hoort bij accessibility.
Vier fouten die ik vaak zie
Een knop die eruitziet als gewone tekst.
Vijf knoppen naast elkaar met dezelfde nadruk.
Een knop die op mobiel te klein is om te raken.
Een knop zonder duidelijke focusrand voor toetsenbordgebruikers.
Meten in plaats van vergaderen
Welke tekst wint, weet je pas na een meting. Kijk eerst naar je klikgedrag op de bestaande pagina. Zet daarna twee varianten naast elkaar met A/B-testen.
Meet altijd door tot de conversie, niet tot de klik. Meer klikken op een vage knop levert namelijk niets op. Zo kun je stap voor stap je conversie verhogen zonder te gokken. In WordPress regel je zo’n test met een plugin of een klein script.
Meer vragen over Call-to-action
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een call-to-action?
Welke tekst zet je op een knop?
Hoeveel call-to-actions zet je op een pagina?
Waar plaats je een call-to-action op je pagina?
Werkt de kleur van een knop echt?
Hoe test je welke call-to-action beter werkt?
Wat is een call-to-action precies?
Beschrijf wat de bezoeker krijgt, niet wat hij moet doen. Dat is de hele regel.
Versturen zegt niets. Stuur mijn aanvraag zegt wel iets. Meer informatie is vaag. Bekijk de prijzen is concreet. Het verschil kost je vijf minuten werk.
Schrijf vanuit de bezoeker, dus met ik in plaats van u. Ik wil een offerte leest heel anders dan vraag hier een offerte aan. Die kleine verschuiving haalt de druk eraf.
Houd het bij twee tot vier woorden. Langer past niet op een telefoonscherm. Wil je meer kwijt, zet dat dan in een regel onder de knop. Bijvoorbeeld: je hoort binnen een werkdag van me.
Vermijd woorden die tot iets verplichten. Aanmelden en registreren voelen zwaarder dan starten of bekijken. Bekijk ook mijn uitleg over landingspagina.
Test je tekst hardop. Zou je dit zo tegen een klant zeggen aan de balie? Klinkt het als een formulier, dan schrijf je het opnieuw.
Welke tekst zet je het beste op een knop?
Een call-to-action is de plek waar je om een volgende stap vraagt. Meestal is dat een knop. Het kan ook een link zijn, of een heel blok met tekst en knop samen.
De afkorting is CTA. In het Nederlands zeggen we oproep tot actie. Dat klinkt formeler dan het is.
Het gaat niet om de vorm, maar om de belofte. Een knop met de tekst meer informatie belooft niets. Een knop met bekijk de prijzen belooft iets concreets. De bezoeker weet dan wat er na de klik gebeurt.
Elke pagina hoort er minstens een te hebben. Zonder call-to-action is een pagina een doodlopende weg. De bezoeker leest, knikt en gaat weg.
De knop is dus geen decoratie. Het is het scharnierpunt tussen lezen en doen. Meer daarover lees je bij conversie.
Loop je eigen site eens langs met deze bril op. Staat er op elke belangrijke pagina een duidelijke vervolgstap? Bij de meeste sites is het antwoord nee.
Hoeveel call-to-actions zet je op een pagina?
Per scherm een hoofdknop. Dat is de knop die je echt wilt laten indrukken.
Daarnaast mag er een tweede, rustiger optie staan. Denk aan offerte aanvragen als hoofdactie en bel me terug als alternatief. Geef die tweede een lichtere vorm, bijvoorbeeld alleen een rand.
Staan er twee even zware knoppen naast elkaar, dan kiest de bezoeker vaak geen van beide. Keuzestress leidt tot afhaken. Dat zie je terug in je bounce rate.
Dezelfde knop herhalen mag juist wel. Op een lange pagina zet ik hem bovenaan, halverwege en onderaan. Zolang het steeds dezelfde actie is, helpt die herhaling.
Wat niet werkt, is vijf verschillende acties door elkaar. Offerte, nieuwsbrief, brochure, bellen en whatsapp op een scherm. Kies er een en zet de rest lager op de pagina.
Kijk ook naar je menu en je zijkolom. Daar staan vaak nog eens drie concurrerende acties. Die tellen gewoon mee in de keuzestress van je bezoeker.
Waar plaats je een call-to-action op je pagina?
Er hoort er altijd een in het eerste scherm te staan. Meer daarover lees je bij above the fold.
Daarna plaats ik er een na elk blok waarin ik iets heb bewezen. Na de uitleg van de dienst, na de reviews, na de prijzen. Op die momenten is de bezoeker het meest overtuigd.
Het formulier zelf zet ik meestal onderaan. Bovenin komt een knop die daarheen springt. Een formulier bovenaan vraagt namelijk om inspanning voordat je iets hebt bewezen.
Er is een uitzondering. Bij verkeer uit een advertentie is de intentie al hoog. Dan mag het formulier direct in beeld, mits het kort is.
Op mobiel let ik extra op de duimzone. Een knop onderaan het scherm is makkelijker te raken dan een knop bovenaan.
Scroll je eigen pagina eens op een telefoon. Zie je nergens een knop terwijl je aan het lezen bent? Dan staan ze te ver uit elkaar.
Werkt de kleur van een knop echt?
Niet zoals de blogartikelen beweren. Groen converteert niet beter dan rood. Er bestaat geen magische knopkleur.
Wat wel telt is contrast. Je knop moet opvallen tegen alles eromheen. Staat je hele pagina vol blauwe elementen, dan verdwijnt een blauwe knop in de massa.
Ik kies daarom een kleur die verder nergens op de site terugkomt. Zo wordt die kleur in het hoofd van je bezoeker de klikkleur. Dat werkt beter dan welke kleurtheorie ook.
Let wel op de leesbaarheid. Lichtgele tekst op wit is onleesbaar voor veel mensen. Houd het contrast op minimaal 4,5 staat tot 1, zoals bij accessibility beschreven staat.
Wil je zeker weten wat werkt? Test de tekst eerst en de kleur pas daarna. Tekst levert vrijwel altijd het grootste verschil op.
Houd het aantal knopkleuren beperkt tot een. Twee accentkleuren op een pagina halen de betekenis uit allebei. Dan weet niemand meer wat de hoofdactie is.
Weet je niet zeker of jouw knoppen doen wat ze moeten doen? Stuur me de link van je belangrijkste pagina via het formulier hieronder. Ik loop je knopteksten langs en stuur je concrete alternatieven terug. Dat kost je niets en je kunt het meteen zelf doorvoeren. Zet je plaats erbij, dan weet ik met wie ik te maken heb.
