Van kleur naar kliks. Ontdek de perfecte kleur voor je knoppen
Knoppen op je website zijn belangrijk. Ze zorgen voor een download, aankoop of ingevuld contactformulier. Hoe meer kliks, hoe beter dus. Hoe kies je een kleur die zorgt voor meer kliks? Lees verder.
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!
(Re)actie van onze hersenen
We hebben allemaal specifieke associaties bij specifieke kleuren.
- Een sportwagen, bij de kleur rood
- Waterijsjes, bij de kleur lichtgroen
- Tropische zee, bij turquoise
Er bestaan zelfs associatie-kleurenlijsten. Bekijk degene hieronder eens.
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.
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.
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:
- Het contrast met de andere kleuren op de website
- De merkpersoonlijkheid van een bedrijf
- 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: fel groen. Kleur van de conversie-knoppen: fel oranje.
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!
Hoe vind je kleurencombinaties?
Er zijn handige websites die automatisch de juiste kleurencombinaties voor je samenstellen.
- Adobe Color: Kies de kleur(en), selecteer complementair of drietal en Adobe maakt de juiste combinatie.
- Coolors.co: Kies de kleur(en), klik op de spatiebalk en kies zelf welke combinaties je mooi vindt.
2. De merkpersoonlijkheid
Het samenstellen van de ideale kleurencombinatie is stap 1. Belangrijk is dat je rekening houdt met de merkpersoonlijkheid. Waar staat jouw merk voor, wat wil je uitstralen? We leggen het uit met een voorbeeld.
Heineken
De website van Heineken. Huisstijl-kleuren: lichtblauw en grijs.
De donkerblauwe ‘koop-nu’ knop valt niet erg op. Een felroze knop zou beter opvallen:
Maar zeg nou zelf. Past deze kleur bij de merkpersoonlijkheid van Heineken? Heineken is een merk voor volwassenen. Roze, een kleur die onder meer wordt geassocieerd met zoetigheid, past niet bij het merk Heineken. Hoe opvallend de kleur ook is.
Een betere optie zou in dit geval de kleur rood zijn. Dit is de complementaire kleur van (licht)blauw én komt terug in het logo van Heineken.
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.