Blog

Een goede call-to-action button

Hoe zorg je ervoor dat bezoekers van jouw website op de gewenste buttons klikken? Waar moet je rekening mee houden met het ontwerpen van een goede call-to-action button? Wij hebben voor jou de 7 belangrijkste elementen op een rij gezet. Kijk er gerust eens doorheen.

1. Kleur & contrast

Het belangrijkste voor de kleur van je call to action button is dat de kleur een opvallende kleur moet zijn die in contrast ligt met de achtergrond en de rest van de website. Hoewel er wordt gezegd dat oranje en groen zich het beste lenen voor een call to action button, maakt het eigenlijk niet heel veel uit welke kleur je kiest als het maar sterk opvalt en de aandacht trekt in het verdere ontwerp van de website.

2. Vorm

Je kunt het beste gaan voor een button met afgeronde hoeken. Waarom?

Ronde hoeken wijzen naar binnen, hierdoor kijkt men automatisch naar het midden van de button.
Uit onderzoek is gebleken dat het minder moeite vergt om ronde hoeken te bekijken en het meer moeite kost om scherpe randen te bekijken.
Daarnaast hebben scherpe hoeken een waarschuwende werking. We zien dit sneller als iets negatiefs.

En ten alle tijde: “Keep it simple”. Maak van de button niet een heel geavanceerd iets. Mensen verwachten dat een button simpel is en opvalt.

3. Plaats

Naast kleur en vorm heeft de button ook een goede plaats op de website nodig zodat de button goed opvalt. Voldoende witruimte is hierbij belangrijk. Dat wil zeggen dat er genoeg ruimte is om de knop en dat de knop dus niet te dicht op bijv. een tekstveld staat.

4. Taalgebruik

Gebruik simpele en directe taal en houd de boodschap zo kort mogelijk. Zeg dus wat je wil, niet meer en niet minder.
Zorg ervoor dat de tekst in de knop ook opvalt. Het lettertype moet dus groot genoeg zijn maar ook de kleur van de tekst moet weer in contrast zijn met de kleur van de button.
Gebruik werkwoorden zoals: reserveer, ontvang, geef, gebruik, probeer zodat mensen overgehaald worden echt iets te doen. Ook woorden als ‘Free’ en ‘Gratis’ doen het goed bij CTA-buttons.
Gebruik een bepaalde tijdsbepaling. Een bepaalde vorm van urgentie helpt mensen sneller te handelen/klikken. Bijvoorbeeld: Reserveer nu, download alleen vandaag.

5. Grootte

De grootte van de button is zeker belangrijk. Het is echter niet zo dat hoe groter de button is hoe beter. Wanneer je de button te groot maakt kan het zijn dat men het juist maar raar vindt en er juist niet op klikt. Het helpt als omliggende elementen niet (veel) groter zijn dan de button zodat de button wel goed opvalt.

6. Make it look clickable

Je wil graag dat men op jouw button klikt, zorg er dan ook voor dat de button er als een echte button uitziet waar je op kan klikken. Hieronder een paar toepassingen die hierbij helpen.

Rechthoekige vorm (met afgeronde hoeken).
Genoeg witruimte rondom de button.
Gebruik een contrasterende kleur.
Zorg voor de juiste feedback. D.m.v. een rand, een subtiele schaduw of een 3D-effect laat je zien dat een knop echt ‘in te drukken’ is. Wanneer je op de button klikt zorg er dan ook voor dat er d.m.v. een kleine animatie of kleurverandering wordt laten zien dat de knop ook ingedrukt wordt. Zo wordt naar de gebruiker toe bevestigd dat de button is ingedrukt.

7. Maak de knop de eerst volgende actie

Een bezoeker van je website gaat mentaal door een bepaald proces. De CTA-button moet het einde zijn van dat proces. De bezoeker moet aan het einde van bijv. een stuk tekst weten: “Ah, nu moet ik op de button klikken.” Zorg er dus voor dat de actie die je kan doen d.m.v. de CTA-button gerelateerd is aan de tekst/inhoud die er voor staat.