Van kleur naar kliks. Ontdek de perfecte kleur voor je knoppen

Het belang van knoppen en kleuren

Knoppen op jouw website: dáár vindt de actie plaats. Een klik staat gelijk aan een besteld product, een ingevuld contactformulier, een download en nog veel meer.

De kleur van de knoppen heeft invloed heeft op het aantal kliks. Maar welke kleur? Dat hangt écht af van de situatie.

Snap je het nog? ???

We geven je een les in kleur-psychologie . Een soort Holifestival, maar dan zonder vies te worden!

Kleur versus knop

De effectiviteit van kleurgebruik in website-knoppen is vaak onderzocht. Je hebt misschien wel eens gelezen dat één specifieke kleur zorgt voor meer kliks op de knoppen. Dat klopt niet.

Er is géén specifieke kleur die ervoor zorgt dat er vaker op een knop wordt geklikt.

Wél weten we omgekeerd dat de kleur lichtgrijs niet goed werkt voor conversie.

The Button Color A/B Test

Onderzoek waaruit blijkt dat er niet zoiets bestaat als één perfecte conversiekleur is de “Button Color A/B-test”, uitgevoerd op de website van een marketingsoftware-bedrijf. De test wees uit dat er 21% meer geklikt werd op een rode knop dan op een groene knop.

De huisstijl van de website was ook groen. De rode knoppen vielen dus beter op omdat ze een afwijkende kleur hadden. Die afwijkende kleur, zorgde waarschijnlijk voor extra kliks.

De huisstijl van de website was ook groen. De rode knoppen vielen dus beter op omdat ze een afwijkende kleur hadden. Die afwijkende kleur, zorgde waarschijnlijk voor extra kliks.

Contrast associatie en persoonlijkheid

Uit bovenstaand voorbeeld blijkt dus dat niet alleen de kleur van de knop, maar ook andere factoren voor meer kliks kunnen zorgen. Belangrijk zijn:

1. Het contrast met de andere kleuren op de website
2. De merkpersoonlijkheid van een bedrijf
3. Kleurenassociaties van een bepaalde kleur

1. Het kleurcontrast 

Héél belangrijk: contrast! We hebben het hier over 2 soorten contrast:

• Het contrast tussen de knop en de tekst op de knop
  Zorg ervoor dat de tekst op de knop goed leesbaar is. Dus niet: een lichtoranje tekst op een witte knop. Maar wel: een zwarte tekst op een witte knop.
  
• Het contrast tussen de knop en de rest van de website
  Zorg ervoor dat de knop de aandacht trekt op de website. Kies voor een kleur met een hoog contrast ten opzichte van de andere kleur(en).
  Er zijn twee kleurencombinaties die altijd goed werken:

Complementaire kleuren

Complementaire kleuren zijn kleuren die recht tegenover elkaar staan in de kleurencirkel, zoals rood en groen of blauw en geel. Kijk maar eens naar onze eigen website. Huisstijlkleur: donkerblauw. Kleur van de conversie-knoppen: fel rood.

Triadische kleuren

Wil je nog een extra kleur toevoegen? Gebruik dan triadische kleuren. Dit zijn drie kleuren die tegenover elkaar staan in de kleurencirkel. Als een driehoek dus. Denk hierbij bijvoorbeeld aan de kleuren groen, rood en blauw. Coolblue gebruikt triadische kleuren. Hun huisstijl bestaat uit de kleuren blauw en oranje. De kleur van de knoppen? Groen!

.

2. De merkpersoonlijkheid

Het samenstellen van de ideale kleurencombinatie is stap één. Belangrijk is dat je rekening houdt met de merkpersoonlijkheid. Waar staat jouw merk voor, wat wil je uitstralen.

3. Associaties

Iedere websitebezoeker heeft bepaalde associaties bij kleuren. Maar je hebt hier ook zelf invloed op.

• Gebruik dezelfde kleur voor ‘actie-knoppen’!
  Gebruik je, net zoals Heineken, een donkerblauwe kleur voor de knoppen? Dan associëren je websitebezoekers deze kleur met een actie, zoals ‘kopen’ of ‘bestellen’. Gebruik daarom consistent voor al je ‘actie’-knoppen, dezelfde kleur.

• Houd rekening met bestaande associaties!
  Rood wordt vaak geassocieerd met stoppen. Het kan daarom verwarrend zijn als je een knop met de tekst ‘Lees verder’, een rode kleur geeft. Al is dit sterk afhankelijk van de context. Houd daar rekening mee.

Aan de slag

Er is dus geen specifieke kleur die voor flink meer kliks op je knoppen zorgt. Welke kleur voor de knoppen werken, is op elke site anders.

Kies dus voor een kleur die opvalt op jouw website en óók aansluit bij de merkpersoonlijkheid. Ga vervolgens aan de slag met A-B-testen.

Afbeeldingsbron: Usertesting.com.