Hoe design je de perfecte koopknop voor je webshop?

1. Kleur, contrast, hiërarchie

De basis van een goed werkende knop zit in een doordacht gebruik van kleur, contrast en hiërarchie.

Contrast

Contrast is belangrijk om de koopknop duidelijk te maken en te zorgen dat die eruit springt. Kies daarom voor een volle knop in plaats van de populaire ghost-button.Een holle knop is wel een goed idee voor ondersteunende acties zoals bijvoorbeeld een ‘wishlist’. Vraag je daarnaast ook af:

• Is de primaire koopknop verschillend genoeg van andere call to actions?
• Contrasteert de kleur genoeg met de kleur van andere links en knoppen?

Kleur

Een koopknop vraagt om actie. Net daarom is de kleur belangrijk. Enkele tips:

• Vermijd negatieve kleuren voor call to actions.
   - Vb. Coolblue gebruikt een groene knop voor de betaling, en niet hun oranje merkkleur. Groen voelen we als een positieve, bevestigende kleur, terwijl oranje kan wijzen op gevaar of twijfel. Daarnaast vermijdt Coolblue hiermee ook een overdadig gebruik van oranje, dat irritatie zou kunnen opwekken.
• Gebruik een primaire kleur en een warme tint, met als ondersteunende kleur een koude tint. Daarmee creëer je een goed contrast en een opvallende kleur.
• Hou rekening met de WCAG2.0-richtlijnen voor toegankelijkheid. WCAG staat voor web content accessibility guidelines. Op deze site vind je een goed startpunt.

Hiërarchie

Om een goede hiërarchie op te bouwen, is het belangrijk te zorgen voor een logisch en constistent kleurgebruik. Evalueer je buttons door te werken met een interface inventory van je online aanwezigheid. Dat kan dan bijvoorbeeld dit opleveren:

Bron: Deze interessante blogpost van Brad Frost

Dit is overigens een voorbeeld van hoe het niet moet. Er zijn te veel verschillende stijlen en kleuren en geen consistent design om hiërarchie te brengen.

2. Grootte & witruimte

Wat de grootte van de knop betreft, is de richtlijn eenvoudig: maak je knop zo groot mogelijk. Je knop moet minimum 9 mm groot zijn en 2mm ver van de dichtstbijzijnde knop of link staan. Zeker voor het touchscreen van bijvoorbeeld iPad of Smartphone is dat heel belangrijk. Onze vingertoppen zijn gemiddeld tussen de 10 en 14 mm groot en kunnen op die manier vlot ‘klikken’ zonder dat je per ongeluk andere knoppen aanklikt. We gebruiken hier bewust een uitdrukking in mm omdat de grootte van een pixel verschilt van toestel tot toestel, zeker bij retinaschermen.

Plaatsing

De plaatsing van de knop is uiterst belangrijk, naast kleur en opmaak. Enkele tips:

• Maak dat de knop zo dicht mogelijk bij de totale prijs staat. Pas daarbij ook de prijs aan naar het aantal stuks. Zo is het duidelijk voor de klant wat hij zal kopen en heeft hij meer vertrouwen.
• Vermeld voorwaarden zoals bijvoorbeeld levertermijn bij de prijs. Dat werkt geruststellend. Onze collega’s van AGConsult beschrijven dat in meer detail.
  
• Zet de knop in de leesrichting van de pagina. Staat alles links? Dan hoort de knop ook links. Heeft de pagina meer een zigzagpatroon? Lees de tekst dan zelf en let op waar je ogen landen na het lezen van de laatste regel. Zo ken je meteen de leesrichting.
  

4. Iconen en copywriting

Uiteraard is het van belang wat de knop precies zegt. Zinvolle tips voor de copywriting op je knop:

• Gebruik een gebiedende wijs om je bezoeker te activeren: vb. ‘Koop nu’ of ‘voeg toe’.
• Maak dat de tekst zegt wat de knop doet: zeg bijvoorbeeld ‘voeg toe aan winkelmandje’ als je met een winkelmandje werkt. Ga je direct naar de betaling, dan gebruik je ‘koop nu’.
• Gebruik een rond getal voor de prijs, dus € 10 en niet € 9,99. Consumenten vinden dat duidelijker en eerlijker.
• Gebruik iconen enkel als ze ook echt die actie weergeven. Dus: een winkelmandje enkel als het gaat om het winkelmandje, niet om een item toe te voegen. Wees sowieso spaarzaam met iconen, vaak veroorzaken ze net meer verwarring dan duidelijkheid te scheppen.

5. Micro-interactions

Micro-interactions zijn kleine animaties waarmee je je klant feedback kan geven als hij op een knop geklikt heeft. Een micro-interactie heeft twee functies:

Feedback voor je klant als iets lukt of niet lukt: bijvoorbeeld een +1-animatie als iets wordt toegevoegd.
Een kans om je merk wat meer kleur en stem te geven. Een micro-interactie kan speels of zakelijk zijn, snel of elegant... Hiermee maak je dus dat het plezieriger shoppen wordt op je website, en die positieve perceptie komt je merk ten goede.

Tot slot nog dit: uit user tests blijkt dat zo’n 10% van de testpersonen (meestal 50-plussers) dubbelklikt op een knop. Dat kan voor frustratie zorgen bij een aankoopknop, omdat de bezoeker bijvoorbeeld telkens twee items toevoegt. De oplossing is simpel: voeg na elke klik een korte time-out toe met een micro-interaction. Zo voorkom je 2 keer snel klikken en geef je positieve feedback.