Buttonkleur

Dit is de beste buttonkleur

Het vinden van de juiste kleur (en tekst) van de belangrijkste call-to-action (CTA) op je website kan een quick win zijn voor je conversie-optimalisatie, maar welke kleuren moet je testen? Vraag een usability-expert wat de beste converterende buttonkleur is en hij zegt rood. Een designer zegt daar vervolgens op dat rood staat voor gevaar en dat je daarom groen moet kiezen als CTA-kleur. Kortom: zoveel mensen, zoveel smaken. Maar is er een magische buttonkleur die je conversie omhoog doet schieten? Ja! Alleen is het antwoord op die vraag niet in alle gevallen hetzelfde.

Case buttonkleur: VvAA

VvAA hypotheekadvies

Voor de A/B-test werd de hypotheekadviespagina van VvAA gebruikt.

VvAA heeft sinds september 2014 een nieuwe website. Opgemaakt in hele duidelijke en consistent gebruikte huisstijlkleuren: oranje, zwart en wit. Ondanks de nieuwe site bleef de conversie wat achter. Hoe konden we op een gemakkelijke en snelle manier de conversie opschroeven? Een van de eerste (en makkelijkste) elementen die je op een website kunt testen op conversieverhoging is de buttonkleur. Bij VvAA werd daarom een A/B-test ingericht om te kijken of een andere buttonkleur conversieverhogend zou werken. De hypothese achter deze A/B-test was dat een opvallendere buttonkleur meer conversie zou opleveren. Er zijn twee kleuren getest naast de huidige oranje kleur: groen en blauw. En welke kleur denk je dat uiteindelijk won?

Grafiek button kleur ab-test VvAA

Er was een overduidelijke winnaar: de blauwe button leverde behoorlijk meer conversie op. Er werd bijna 10% meer op de blauwe button geklikt dan op de oranje button. De groene button deed het op sommige plekken beter en op andere plekken minder dan de oranje.

Conclusie

Waarschijnlijk door het consistente gebruik van de kleur oranje viel het sommige websitebezoekers niet op dat er een button was waar ze op konden klikken. Door de button een andere kleur te geven, werd het duidelijker wat de aanklikbare knop was.

De beste buttonkleur

Waarom was blauw de winnaar uit de A/B-test van VvAA? En hoe kom je er achter wat de beste buttonkleur is voor jouw website? Volg deze simpele regels en vind ook jouw beste buttonkleur:

  • Gebruik een complementaire of een contrasterende buttonkleur
    Mensen zijn van nature visueel ingesteld. En kleur is het eerste wat je ogen registreren. En je call-to-action (CTA) moet het meest opvallende element op je website zijn. Gebruik daarom een complementaire of een contrasterende kleur voor je buttons. Een complementaire kleur is de kleur die aan de andere kant van het kleurenwiel te vinden is. En een contrasterende kleur is een kleur die afwijkt van de huisstijlkleur. Je ogen raken namelijk ‘verzadigd’ van de dominante huisstijlkleur. En dan springt letterlijk een andere kleur in het oog. Met andere woorden: is je website hoofdzakelijk donkerpaars, gebruik dan een gele button. Is je website KLM-blauw, gebruik dan oranje buttons.
  • Gebruik die kleur alleen maar voor de belangrijkste buttons
    Je wilt natuurlijk dat de belangrijkste CTA het meest opvallend is. Maar welke kleur gebruik je dan voor minder belangrijke buttons of tekstlinks? De kleuren die naast de complementaire kleur liggen in het kleurenwiel zouden hiervoor het meest geschikt zijn. Zoals met alle veranderingen op je site: test, test en A/B-test.

    kleurenwiel buttonkleur

    Complementaire kleuren vinden met behulp van een kleurenwiel

Voorbeeld contrasterende kleuren: Tele2

Tele2 heeft gekozen voor vrij neutrale huisstijlkleuren; grijs en zwart. Maar hun website is verre van kleurloos. Sterker nog; de homepage is overladen met kleur. Opvallend is dat alle buttons een andere kleur hebben, maar wel op een contrasterende achtergrondkleur. Hierdoor springen ze meteen in het oog en is er geen onduidelijkheid waar je moet klikken.

Tele2 voorbeeld buttonkleur

Meer conversietips voor call-to-actions

Naast het testen van de beste kleur voor je belangrijkste buttons, zou je kunnen kijken of er nog meer mogelijkheden zijn voor conversie-optimalisatie van je call-to-actions.

  • Maak het je bezoeker makkelijk en laat je button visueel er uit zien als een button
  • Test de buttontekst
  • Gebruik een variant van de buttonkleur voor je tekstlinks
  • Laat je tekstlinks opvallen, het liefste door op te maken met een streepje eronder, want iedereen is nou eenmaal gewend dat tekstlinks er zo uitzien
  • Vergroot de klikkans van je tekstlinks, bijvoorbeeld niet ‘klik hier‘ maar ‘Lees hier meer over deze aanbieding
  • Gebruik gebiedende wijs voor je buttontekst
  • Manage de verwachtingen van je bezoeker en wees duidelijk waar de button heen leidt. Anders converteren ze misschien niet op de pagina erna, omdat ze ergens terechtkomen wat ze niet hadden verwacht.

De klant is koning

Theorieën zijn allemaal leuk en aardig, en een goed begin voor het design van je site. Maar als een complementaire buttonkleur of een gebiedende wijs in je button minder goed werkt, volg dan waar jouw websitebezoekers het beste op converteren. En dus is ons advies vanuit de vakgroep Conversie-optimalisatie bij Presenter: blijf testen. Wat werkt het beste voor jouw bezoekers op jouw site?

 

Bron headerafbeelding: Tony Hisgett

Over de auteur: Femke Koning

Als contentspecialist bij Presenter combineer ik mijn passie voor taal met mijn mateloze fascinatie met alles wat met online te maken heeft. Het liefste ben ik bezig met conversie-optimalisatie, usability, beeldredactie en ecommerce.

Tags: call-to-action, conversie-optimalisatie, design, conversieoptimalisatie, buttons, conversie



0 reacties op dit artikel