6 richtlijnen voor perfecte knoppen

Een goede knop of "button" kan instant meer geld in het laadje brengen.

De juiste keuzes maken kan je meer verkopen opleveren, meer nieuwsbrieflezers doen bereiken, meer info verschaffen (enquêtes).

Kortom: een goede knop maakt meestal het verschil tussen het wel of niet actie ondernemen van je bezoeker.

1. Formaat of grootte

Het spreekt misschien voor zich dat de grootte van de knop de "belangrijkheid" aangeeft, maar als we verschillende webshops bekijken is dit blijkbaar nog niet voor iedereen duidelijk...

Waarom wordt die "Toevoegen" knop zo klein gemaakt en zo ver naar onder geduwd?

Ik ben eerder geneigd om op Algemene voorwaarden te klikken, maar eerlijk: wat boeit dat ook als je iets wil kopen.

Stel je voor dat je de Algemene Voorwaarden eerst in je handen gedrukt krijgt voor je naar de kassa kan gaan in de Media Markt...

2. Kleur

Kleur is een tweede belangrijke factor.

De Big-Orange-Button (BOB) is enige tijd heel populair geweest en kwam in vele A/B tests als winnaar naar boven, maar een belangrijke noot: een knop moet contrasteren op de rest van je website, deze moet eruit springen.

Als de hoofdkleur van je website oranje is, zal de BOB minder goed doen dan als de hoofdkleur van je website blauw is.

Testen <> Psychologie

Laten we even een onderzoek doornemen waarbij evenveel mensen een rode, als een groene call-to-action knop te zien kregen.

Groen staat voor: goed, gaan, geen probleem, vrij, ...
Rood staat voor: pas op, wees alert, ...

Als we de menselijke psychologie moeten volgen, zouden de meesten kiezen voor de groene knop. De tests wezen echter de andere richting uit: de rode knop boekte 21% meer kliks!

3. Positie

Het lijkt me eveneens voor-de-hand-liggend dat de positie van een button ook veel bepaalt.

• 95% van de bezoekers ziet alles boven de vouw (hou rekening met schermresoluties voor waar de vouw ligt)
• 60% van de bezoekers ziet het aller-onderste van de webpagina
• 35% ziet alles wat ertussen ligt.

De grootste kans om de bezoeker een actie te laten ondernemen is dus uiteraard deze boven de vouw te plaatsen, of net helemaal onder.

Ingeval je bijvoorbeeld een lange productpagina hebt in een webshop, kan je deze zowel helemaal bovenaan als helemaal onderaan plaatsen...

4. Call-to-action tekst

Een goede call-to-actions heeft misschien wel het meeste belang van allemaal om de aandacht te trekken. En aandacht trekken is immers nog steeds het belangrijkste element in het eeuwenoude marketingprincipe AIDA (Attention - Interest - Desire - Action).

Als je wat te bieden hebt...

Heb je iets te bieden? Wijs de bezoeker steeds op wat zijn voordeel is.

Stel dat je een mailinglist wil aanleggen voor je webshop en als stimulans 5% korting geeft op de volgende bestelling, dan heb je twee mogelijkheden:

• Schrijf je nu in op onze nieuwsbrief
• Ja, ik wil 5% korting!

Of

• Geef me je e-mailadres ook al weet je dat je voortaan elke week dingen toegestuurd krijgt die je niet zullen boeien.
• Je krijgt 5% korting van mij, om enkel maar je e-mailadres achter te laten

Het doel is hetzelfde, de connotatie is enkel anders. Als je de bezoekers eerst op zijn voordeel wijst, zal hij meteen meer aangetrokken worden.

Huis, tuin en keukenbuttons

Er zijn natuurlijk ook knoppen die reeds zodanig zijn ingeburgerd bij de internetgebruiker dat je er niet veel aan zal veranderen.

Bijvoorbeeld de "in winkelwagen" knop, mensen weten wat er gebeurt als men erop klikt.

Hiermee zou ik pas aan het "testen" gaan als al de rest van je website tip top is, want hiermee zal er echt niet veel winst/verlies geboekt worden in mijn ogen.

Moest je er wel aan toe zijn kan je ook proberen met:

• Koop nu / Kopen
• Bestel nu / Bestellen

5. Actie - ReActie

Dit is iets wat ik persoonlijk zeer belangrijk vind.

Een knop moet ook niet enkel aangeven dat erop geklikt kan worden, het moet ook uitnodigen om te klikken. Standaard knoppen, die gemaakt worden met een <input type="text"

Als je over een knop heen gaat om te klikken moet deze ook zeggen: "flink dat je al met de cursor over me heen gaat, maar maak nu dat je klikt!"

Dit bekom je door:

• Achtergrond- en/of tekstkleur licht laten veranderen
• Cursor naar een wijzend vingertje laten veranderen i.p.v. standaard pijltje

6. Selectie maken

Voor dit laatste gaan we terug naar het eerste voorbeeld, van de Acer processor.

Er staan 3 knoppen:

• Algemene voorwaarde als blikvanger
• Reviews
• Toevoegen aan winkelwagen

Als deze webshop van "Reviews" een "normale" link zou maken, Algemene voorwaarden gedumpt zou worden in de footer en "Toevoegen" meer naar voor zou komen, zouden er volgens mij al veel meer:

• reviews gelezen worden
• producten in het winkelmandje belanden

Het is heel simpel: als je drie knoppen met dezelfde fysische (niet inhoudelijke) kenmerken naast elkaar plaatst zal er op geen enkele geklikt worden: keuzeproblemen.

Breng je 1 knop heel duidelijk naar voren zal de kans meteen 30% groter zijn dat erop geklikt wordt.

Wat hebben we vandaag geleerd?

Punt 1: Wijs je bezoeker steeds op hùn voordeel

Punt 2: Nodig uit om te klikken

Punt 3: Laat duidelijk zien wat je wil dat je bezoeker doet

Punt 4: Blijven testen