Mis nooit meer de beste tips voor een betere site

  • Al 8.113 abonnees
  • Max. 2 keer per maand
  • Exclusieve tips en promo's

Designtips voor onweerstaanbare actieknoppen

Over het design van call to action-buttons is al veel inkt gevloeid. Maar wat is nu écht belangrijk? Er zijn 3 zaken waar je op moet letten:

  • De call-to-action moet in een opvallende, contrasterende kleur staan
  • Zorg dat je actieknop op een echte knop lijkt
  • Gebruik visual cues om de aandacht naar je call-to-action te zuigen

Bekijk nu de video

Bekijk nu de video vol tips en voorbeelden (6 minuten). Of lees verder onder de video.

Abonneer je op ons YouTube-kanaal en mis geen enkele video-tip

Psst
In onze online training usability krijg je meer dan 100 van deze tips om je site beter te maken.

1. Kies een contrasterende kleur voor je primaire call-to-action

Laten we beginnen met een mythe de wereld uit te helpen: dé beste kleur voor eender welke actieknop bestaat niet. Het is dus niet zo dat bijvoorbeeld rood het altijd beter doet dan groen. Of dat blauw het altijd beter doet dan oranje.

Artikels die dat beweren, zijn bullshit.

Het belangrijkste is om een kleur te kiezen die in het kleurenwiel lijnrecht tegenover de basiskleur van je pagina staat.

Kleurenwiel met de complimentaire kleuren
Kies voor je call to action-knop de kleur die complementair is aan de basiskleur van je pagina.

Wat je dus niet mag doen, is je actieknop dezelfde kleur geven als de basiskleur van je pagina.

Een call-to-action die opgaat in het decor van je pagina, zorgt gegarandeerd voor minder kliks.

Het bewijs: Ardennes-Etape

AB-test op de productpagina van Ardennes Etape. De variant met opvallende actieknoppen is de winnaar.
Door de actieknop een contrasterende kleur te geven, steeg het aantal boekingen voor Ardennes-Etape.

In de originele versie (links) heeft de call-to-action dezelfde kleur als de rest van de pagina.

Maar een groene pagina met een groene knop, dat werkt niet.

In de variant wijzigden we de kleur van de knop. De call-to-action trekt nu alle aandacht naar zich toe.

Het resultaat: een pak meer boekingen.

Besluit

De kleur van je actieknop moet contrasteren met de basiskleur van je webpagina. En is best een unieke kleur in je kleurenschema. Gebruik dus niet dezelfde kleur voor andere elementen.

2. Een actieknop moet opvallen qua design 

Laat een knop een knop zijn. 

Het slechtste idee dat je kan hebben, is je knop er niet te laten uitzien als een knop. 

Dat wil niet zeggen dat je zoals in de jaren '90 weer schaduwtjes en bevels moet gebruiken.

Maar een woord met een lijntje rond is geen knop. Dat is een woord met een lijntje rond. 

Gebruik dus zeker géén ghost buttons.

Bewijs 1: 600% meer kliks naast de knop bij een ghost button

Unbounce deed de test op zijn website en vergeleek 2 versies:

  • De originele versie met een dikke, vette actieknop.
  • Een variant met een ghost button.
Click heatmap van een pagina met verschillend design van actieknop; De versie met de ghost button is de verliezer.
Links de versie met een dikke, vette actieknop. Rechts de versie met de ghost button.

Het resultaat?

Verwarring alom!

Dat blijkt uit de click heatmaps. In de ghost button-versie zijn 600% méér kliks op elementen die niet aanklikbaar zijn. Omdat het niet duidelijk is wat de echte actieknop is.

Eat that.

AGconsult
600% meer kliks op zaken die niet aanklikbaar zijn. Verwarde bezoekers dus.

Bewijs 2: 20% minder kliks op de actieknop bij een web agency

"Ja, maar als web agency kan je toch wat meer veroorloven?", hoor ik sommigen al denken. "Want dat publiek is niet het doorsnee publiek."

Dat is een mening. En met meningen geraak je nergens.

Testen dus.

Versie met een opvallende knop.
Versie A met een duidelijke call to action-knop.
Variant met een ghost button
Versie B met een ghost button.

Het resultaat?

20% minder kliks op de ghost button. Terwijl je op deze pagina maar 1 ding kan doen: klikken op 'View our work'.

Eat that. 

Again.

Bewijs 3: 17% tijdverlies

Uit een serie first click-testen, opgezet door onze vrienden van CXL Institute, blijkt dat mensen er veel langer over doen om te klikken op een ghost button dan op een normale knop.

Omdat zo'n ghost button te weinig opvalt.

Het onderzoek gebeurt steeds op pagina's met maar 1 actieknop.

Design tips voor actieknoppen: deze test maakt duidelijk dat een ghost button geen goed idee is.
Links de ghost button-versie. Rechts dezelfde pagina maar nu met een normale actieknop.

Het resultaat?

Op de versie met de ghost button doen mensen er 1,3 seconde langer over om op de knop te klikken. In de ghost button-versie doen ze er 9 seconden over. En maar 7,7 seconden in de versie met de dikke vette actieknop.

Ik ga het nog 1 keer zeggen: Eat that!

Besluit

Gebruik nooit ghost buttons. Een dikke, vette actieknop zorgt voor een dikke, vete verkoop.

3. Gebruik visual cues om de aandacht naar je call-to-action-button te zuigen

Een dikke, vette actieknop in een opvallende kleur dus.

Wat kan je nog meer doen?

Je knop nog meer laten opvallen door er een visual cue bij te zetten.

Dat kan een subtiel pijltje zijn in je knop. 

Maar wat het beste werkt, is een opvallende pijl die wijst naar je knop.

Met een pijl trek je meer aandacht naar je call to action-knop.
Met een pijl trek je meer aandacht naar je call to action-knop.

Veel designers gruwelen daarvan. 

Maar doe zelf eens de test. Ga vanavond op een drukke plek staan en kijk in 1 bepaalde richting. Er zullen waarschijnlijk weinig mensen met je meekijken. 

Wijs nu ook eens in die richting. Wedden dat er een pak mensen in die richting gaan kijken.

Voorbeeld van een visual cue op de AGConsult website.
Voorbeeld van een visual cue bij een willekeurige website. Omdat het werkt. Of dacht je echt dat wij dat mooi vinden?

Moet dan echt elke knop een dikke, vette actieknop zijn?

Neen. 

Deze 3 designtips gelden voor de primaire call to action-buttons op je website of je app. De knoppen met de belangrijkste actie. Een offerte aanvragen, iets toevoegen aan het winkelmandje, een formulier verzenden, …

Secundaire actieknoppen laat je best minder hard opvallen. 

Daarom is het ook een secundaire actieknop. Het gaat om minder belangrijke acties, zoals 'Voeg toe aan wishlist' of 'Vergelijk'.

Die secundaire call to action-buttons moet je ook visueel secundair uitwerken.

Dat doe je bijvoorbeeld door een lichtere of geen kleur te gebruiken. Het mag zelfs een ghost button zijn. Of gewoon een link. 

Bij Zalando is het meteen duidelijk wat de primaire actieknop is.
Bij Zalando is het meteen duidelijk wat de primaire actieknop is.

Zorg er vooral voor dat je secundaire knop geen aandacht afsnoept van je primaire call-to-action.

Een secundaire call-to-action hoeft zelfs geen knop te zijn. Bol.com bijvoorbeeld zet gewoon een extra zinnetje als lopende tekst naast de actieknop:

Bol.com gebruikt geen knop voor zijn secundaire call to action.
Bol.com gebruikt geen knop voor zijn secundaire call to action.

Het zinnetje ‘Zet op verlanglijstje’ neemt geen aandacht weg van de hoofdrolspeler ‘In winkelwagentje’.

Zijn er nog meer designtips voor call to action-buttons?

Nope. 

Dat is het.

Afgeronde of vierkante hoeken?

Maakt niet uit. Omdat het geen verschil maakt. Kies op dat vlak wat past bij je merk.

Maar verlies geen uren tijd door over zo'n zaken te discussiëren. Het draagt niets bij tot je omzet.

Maar er is wel veel meer dan het design

Mis het volgende artikel niet!

  1. Volg ons op Twitter voor interessante links en extra tips.
  2. Like onze Facebookpagina
  3. Schrijf je in op onze maandelijkse tips

Leer teksten (her)schrijven voor het web

Op 1 dag leer je van de makers van deze blog hoe je je webteksten kan optimaliseren.

  • Leer teksten optimaliseren voor het web
  • Met korte schrijfoefeningen
  • Al 615 mensen volgden deze cursus
  • Volgende editie: 26 maart 2019, Gent