Website, onlinedienstverlening

Call to action button. CTA. Geef het beestje een naam. In deze blog lees je meer over de richtlijnen voor het gebruik van een CTA op jouw website.

Call to action's zijn de secties op de website die aanzetten tot actie. Door CTA's zo optimaal mogelijk in te zetten verhoog je niet alleen de conversie van de pagina, maar ook de algehele flow van de website.

Vaak bestaat de CTA uit een zogeheten Heading waarin de aandacht wordt getrokken met betrekking tot de actie. In de onderliggende tekst wordt toelichting gegeven op deze actie om vervolgens een knop te plaatsen waarmee de bezoeker de bovengenoemde actie kan uitvoeren.

CTA’s worden in de commerciële marken vaak gebruikt om bezoekers te motiveren een bepaald product of dienst af te nemen. In onze markt ligt die commerciële drijfveer iets lager, maar blijven de principes die hierin gebruikt worden gelijk. Hieronder een aantal belangrijke richtlijnen. 

Maak een CTA makkelijk te vinden

Bij het presenteren van een CTA is het erg belangrijk dat er rekening wordt gehouden met balans tussen de content en de knoppen. Wanneer dit goed is gedaan weet de bezoeker altijd de knop te vinden, maar wordt deze niet afgeleid bij lezen van de content. Let er bij het bouwen van de pagina dus op dat je de snel beslissende bezoeker al vrij hoog op de pagina de mogelijkheid geeft om door te klikken waarbij de CTA dus eigenlijk al direct in de geladen viewport zichtbaar is.  

Het is ook aan te raden om verder op in de pagina de CTA terug te laten komen voor de bezoekers die ervoor kiezen eerst meer informatie tot zich te nemen voordat zij een besluit nemen. Afhankelijk van de hoeveelheid content, zou er op gepaste momenten op de pagina een terugkerende (misschien variërende) CTA geplaatst kunnen worden. Denk hierbij aan een medische keuring regelen voordat een bezoeker een rijbewijs aan kan vragen. 

Gebruik de juiste teksten

Een goede knop zou opzichzelfstaand al moeten kunnen vertellen wat er gebeurt wanneer de bezoeker hierop klikt. Dit betekent dat teksten als “klik hier” of “Go” niet voldoende informeren om een bezoeker te triggerenZorg er daarom voor dat de button altijd een werkwoord/actie bevat en wees helder over wat er gaat gebeuren. Gebruik daarnaast de heading en de toelichting om de knop te ondersteunen en eventuele onduidelijkheden te verklaren. Gebruik hierbij als basisregel dat de heading en de knop samen al duidelijk moeten maken wat de actie is en de scannende bezoeker dus al genoeg context moet geven. De toelichting is bedoeld om eventuele onduidelijkheden of voorwaarden over de actie toe te lichten. 

Maak visueel onderscheid in de hiërarchie tussen de koppen

Zo nu en dan is het nodig om de bezoeker een keuze te laten maken met betrekking tot de CTA. In die gevallen krijgt de bezoeker dus twee knoppen te zien waarbij vaak de voorkeur ligt bij de meest gekozen optie (de primaire CTA). De minder belangrijke knop (de secundaire CTA) is vaak bedoeld om de twijfelende bezoeker tegemoet te komen door bijvoorbeeld te linken naar meer informatie of het inplannen van een contactmoment. In deze gevallen willen we een visueel onderscheid maken tussen een voorkeursknop en de ondersteunde knop door deze qua opmaak van elkaar af te laten wijken. Vaak wordt dit gedaan door de secundaire knop net wat minder opvallend te maken dan de primaire knop, waardoor de eerste focus wordt gelegd op de primaire knop. 

In dit voorbeeld zien we een hiërarchisch onderscheid doordat de “Get Spotify Free” knop met kleur is ingevuld ten opzichte van de “slechts” omlijnde “premium” knop. Daarnaast valt de primaire knop extra op doordat deze links is geplaatst en daardoor als eerste gezien wordt door de bezoeker.

Linkedin gaat in dit voorbeeld nog een stap verder door de secundaire knop niet eens meer weer te geven als een knop maar te vervangen door een tekst link. Op deze manier wordt het onderscheid tussen de twee knoppen nog verder aangedikt. 

Let op het onderscheid tussen tekstlinks en buttons

Naast CTAs worder op pagina’s vaak gebruik gemaakt van tekstlinks om bezoekers door te linken naar extra informatie of gerelateerde onderwerpen. De valkuil met tekstlinks is dat ze vaak pas gezien worden wanneer de bezoeker het stuk tekst leest waarin de link geplaatst is en er bij het scannen van de pagina dus vrij snel overheen gelezen wordt. Bedenk bij het maken van dit soort links dus altijd hoe belangrijk de achterliggende content voor de gebruiker kan zijn en overweeg of de link in een button geplaatst dient te worden. Op die manier voorkom je dat bezoekers alle teksten door moeten spitten en zorg je ervoor dat zelf een scannende bezoeker de belangrijke links op de pagina snel kan vinden. 

Over een call-to-action gesproken...

Hieronder vind je een formulier geplaatst waar je je gegevens kunt achterlaten. Dus, mocht je vragen hebben over het optimaliseren van je website of wil je simpelweg nog meer verdiepende uitleg. Laat dan hieronder je gegevens achter en ik neem zo snel mogelijk contact met je op voor persoonlijk advies. 

Timo van der Keijl

Timo van der Keijl
UX-designer SIM

Ja, vertel mij meer over website optimalisatie