Kleur vs contrast: wat zorgt voor meer conversie?

Onderzoeken met conclusies als “Gebruik rood in plaats van blauw en verhoog je conversies met 25%” hebben we inmiddels wel gezien. Het draait niet zo zeer om de kleur, maar om het contrast. Het toepassen van de juiste kleuren is een zorgvuldig proces waarbij rekening gehouden moet worden met de doelgroep, de vormgeving en het kleurgebruik van de gehele website. De keuze die je hierin neemt is per website verschillend, omdat het moet aansluiten bij de uitstraling van de website.”Gebruik rood in plaats van blauw” gaat dus niet voor iedere website op. Er is echter een universeel principe dat WEL voor iedereen geldt: contrast.

Leuk, een onderzoekje.

Graag leg ik dit uit aan de hand van een voorbeeld. Vaak wordt er aangegeven gebruik deze kleur in plaats van andere kleuren en je conversie wordt verhoogd. Onderzoek wijst dit ook uit. In het voorbeeld hieronder genereert de rode knop 21% meer conversie dan de groene knop.

Way to go red!

Maar… kijk eens goed naar het kleurgebruik van het eerste design. Dat is gebaseerd op de kleur groen. De basiskleur van de verschillende knoppen en iconen zijn groen. Daarbij is de groene button donkerder en minder verzadigd qua kleur dan de rode button. De groene button mengt zich daarbij ook met de omgeving. Door dit alles is er geen uitgesproken contrast zichtbaar.

De rode button daarintegen is lichter en meer verzadigd qua kleur. Daarbij vult het de groene elementen aan en ontstaat er een sterk contrast. Door dit contrast komt de button meer naar voren en trekt dit meer de aandacht aan dan de groene button.

Voorbeeld: Kleurgebruik bij Horizon Motor Reizen

Dit principe passen we zelf vaak toe, bijvoorbeeld bij Horizon Motor Reizen, waar de “call to action” button voor uitstekende resultaten heeft gezorgd. Daar wordt gebruik gemaakt van een oranje button. Deze kleur is aanvullend op de blauwe hoofdkleur en zorgt voor een sterk contrast met de rest van het webdesign.

Nog niet overtuigd? Nog een onderzoekje!

Nog niet overtuigd? In het voorbeeld hieronder kregen ondervraagden de volgende taak mee: “klik op het element dat je aandacht trekt.” 

Door middel van een “heatmap” zijn de klikken inzichtelijk gemaakt. Hieronder zijn dezelfde afbeeldingen zichtbaar waarbij de “heatmap” is toegevoegd.

Bij de blauwe “call to action” button wordt er over de gehele pagina geklikt en wint de button waar je op geklikt moet worden, namelijk de “sign up” button, maar nipt. Een groot verschil met de oranje “call to action” button, waarbij 75% direct op de oranje button klikt. Ondanks dat het onderzoek niet ‘waterdicht’ is, kan geconcludeerd worden dat contrast wederom zorgt voor meer conversie.

Contrast is overal

Waarschijnlijk lees je dit blogartikel met een zwart lettertypen en een witte achtergrond. Contrast.

Als je om je heen kijkt zie je waarschijnlijk sommige dingen sneller dan andere. Hoe komt dit? Het antwoord kun je waarschijnlijk nu zelf invullen: …….. Bingo, we got ourselves a winner: contrast! Je gaat door voor de magnetron! Nee, maar alle gekheid op een stokje, door op een goede manier gebruik te maken van contrast genereer je meer conversie, punt. Houdt hierbij wel rekening met de doelgroep, de vormgeving, het kleurgebruik van de gehele website en vooral dat de kleuren elkaar aanvullen.

Hulp nodig bij het ontwerpen van je eigen website of wil je advies om zelf meer conversies te genereren?

Neem dan gerust contact met ons op, wij dragen graag ons steentje bij om meer resultaten voor jou of je business te generen.