5 tips voor beter presterende call-to-action buttons op je website

[moovio.nl]

Call-to-action buttons, het kleine grafische wonder dat ervoor zorgt dat je bezoekers actief worden. Ze nemen contact met je op, plaatsen een bestelling, schrijven zich in voor de nieuwsbrief, etc. Het is dus het belangrijkste designelement van je site!

 

Hoe maak je nu een knop waar je bezoeker graag op klikt? In deze post geef ik 5 tips hoe je de perfecte call-to-action button ontwerpt.

 

1. Kleur

De kleur moet eruit springen. Daarom is de knop meestal het felst gekleurde element op de pagina, met een sterk contrasterende kleur.

 

2. Let op de plaatsing

Plaats de button waar je bezoekers deze verwachten. Boven "de vouw", naast een product of rechts bovenin de paginakop. Zorg ervoor dat de knop makkelijk te vinden is op een voorspelbare plek.

 

3. Geef je knop de ruimte

Je button moet niet ondergesneeuwd raken door andere elementen op de pagina. Geef de knop genoeg marge zodat je hem kunt onderscheiden en geef de tekst genoeg ruimte (padding) om het makkelijk leesbaar te maken.

 

4. Wat ze ook zeggen... Formaat is wél belangrijk

Om het overduidelijk te maken dat dit je meest belangrijke knop is en dat je wilt dat iedere bezoeker er op klikt, maak je de button groter dan welke andere navigatie dan ook op de site. Zorg ervoor dat de bezoeker zoveel mogelijk "klik-oppervlakte" heeft, zodat hij hem zeker niet kan missen.

 

5. Taalgebruik

Het taalgebruik op de button is erg belangrijk. Hou het kort en bondig en begin altijd met een actief werkwoord, bijvoorbeeld: schrijf, download, leg, bestel, registreer, etc.

 

Denk na over de taal die je klant spreekt en verval niet in jargon op de knop. Enkele voorbeelden:

"plaats een order" of "bestel nu"

"Prijsopgave aanvragen" of "Offerte aanvragen"

"maak een account aan" of "Sla uw gegevens op"

 

Denk na over of de termen passen bij je doelgroep of product: een koelkast in je mandje leggen is niet écht in verhouding...

Geef je bezoekers ook een extra reden om te klikken, "gratis" is een vooruitzicht dat weinig bezoekers kunnen weerstaan: download het GRATIS e-book.

 

 

 

[T_Ottens]

Dat zijn zeker goede tips!

 

Samenhang met het product is ook belangrijk. Is er geen samenhang met het product, dan kan de grote opvallende button de bezoekers afschrikken en krijg je de tegenovergestelde reactie.

[member123]

http://twinklemagazine.nl/praktijk/2009/06/Design-tips_voor_actiebuttons/ met ook een doorklik naar meer info over de kleur.

 

Kleur komt er op neer dat Oranje meestal goed is tenzij dit ook de hoofd kleur van de site is.

 

Kleur van de call to action moet bij voorkeur een kleur zijn die niet op je site voorkomt verder. Rood is slecht want geeft gevaar aan. Groen is ook niet goed want dat stimuleerd niet tot actie.

 

Moeten op de genoemde website nog meer stukjes hierover staan (heb in het tijdschrift al vaker stukjes over gelezen.)

[dannyverhoeven]

Goede tips! Om een betere zal je dit wel moeten testen tegenover de button die je nu al op je website hebt geplaatst. Dit kan bijvoorbeeld met Google Website Optimizer

[moovio.nl]

Hieronder een paar voorbeeldjes van sites waar ik verbeterpunten in zie, ter illustratie van de 5 punten:

 

BelCompany

De rode bestelknop zit op de standaardresolutie(768 pixels hoog) onder de vouw. Omdat de de vormgeving is gelijk aan de statische kop-balk, heeft de knop weinig onderscheidend vermogen. Door tekst op de button ("BESTEL") aan te passen kan er een actie van de bezoeker wordt gevraagd. In dit geval zou dat kunnen zijn: "Bestel deze telefoon nu!" met een onderschrift "Met de GRATIS cd This is it van Michael Jackson"

 

 

 

 

 

Jiba

Iedere stap op de site van Jiba zou een duidelijke knop kunnen krijgen: stap 1: "Bekijk onze scherpe prijzen", stap 2: "Boek deze reis!". Nu is de eerste stap moeilijk te vinden (onder de vouw als tekstlink) en is de "boek"-button in de rechterkantlijn weggestopt.

 

 

 

 

 

V&D

Bij V&D ziet de knop er net zo uit als andere stijlelementen en valt daardoor niet genoeg op. Het voorbeeld dat ik gaf bij punt 5 is ook bij V&D van toepassing: een LCD-tv leg ik niet zo makkelijk in m'n mandje. De term "toevoegen" is niet het taalgebruik van de potentiële klant.

 

 

 

 

 

Halfords

Op de bestelpagina bij Halfords lijkt de button sterk op het logo en valt daardoor voor sommige bezoekers al snel buiten het blikveld. De grote "Actie" banner leidt de aandacht nog meer af van het doel van de pagina: op de bestelknop klikken. Ook hier zou er gewerkt kunnen worden met een meer energieke call-to-action op de button.

 

[Henri Kroeze]

Deze site kwam ik pas tegen. Erg verhelderend!

 

[veramolenaar]

goeie tips! Ik ben fan!

[Ruben_]

Dit artikel gaat een stukje breder dan enkel de call to action, maar is zeker de moeite waard: Smashing Magazine Design To Sell: 8 Useful Tips To Help Your Website Convert

[seotube]

Zeer mooie tips. Hier heb ik wat aan. :)

[Alwin vd V]

Zeer mooie tips. Hier heb ik wat aan. :)

 

Daar sluit ik me bij aan. Een vak apart wat mij betreft: conversieoptimalistie.

 

Tnx!