Call-to-action buttons: is groen het nieuwe oranje? [infographic]

fragment

Seth Godin noemt ze bananen. Call-to-action buttons zijn er in alle soorten, maten en kleuren. Tijd voor een smaaktest: welke bananen schotelen de webmasterchefs ons zoal voor? Om maar gelijk met de deur in huis te vallen: groen is niet het nieuwe oranje.

De Amerikaanse marketinggoeroe Seth Godin is auteur van The Big Red Fez. Daarin legt hij uit hoe je websites beter maakt. Godin introduceert de banaan als metafoor:

“Force yourself to design each and every page with one and only one primary objective. That’s the banana. Make it big. Make it blue (or red). Make it obvious.”

Godin vergelijkt de mens dus met een aap. Een aap die altijd op zoek is naar een banaan. Ook websitebezoekers hebben trek in iets lekkers. Aartjan van Erkel legt het in zijn boek Verleiden op internet zo uit:

”De banaan op de webpagina is een simpel, opvallend visueel element, dat erom schreeuwt om te worden aangeklikt.”

Goede call-to-action buttons vallen op en trekken de aandacht van bezoekers. Er zijn ook minder geslaagde voorbeelden. Reden genoeg om de proef eens op de som te nemen. Onlangs heb ik 100 call-to-action buttons onder de loep genomen van websites die zich richten op de Nederlandse markt. Natuurlijk is de ene call-to-action de andere niet. Het boeken van een reis heeft bijvoorbeeld een andere dynamiek dan het aanmelden voor een nieuwsbrief. Toch geeft de infographic een aardig beeld van de state of the art.

Kleur: Oranje Boven

Stop: rood roept negatieve associaties op

Rood roept negatieve associaties op: stop

Ooit is bedacht dat een link blauw moet zijn. Voor een call-to-action button bestaat een dergelijke conventie niet. De belangrijkste regel is dat de actieknop moet contrasteren. Een heldere kleur die afwijkt van de rest van de pagina valt het meeste op. Rood, oranje, blauw en groen zijn geschikte kleuren.

In Nederland is oranje veruit favoriet (31%) op ruime afstand gevolgd door rood. Groen (15%) is dus niet het nieuwe oranje. De meestgebruikte kleuren hebben zowel voor- als nadelen. Oranje is een goede conversiekleur en geel een kleur die de aandacht trekt. Rood is het meest controversieel. Het roept negatieve associaties op: stop, nee, verbod, agressie en gevaar.

Van de Nederlandse websites gebruikt maar liefst 20% een rode call-to-action button. Vaak past deze bij de huisstijl. Het goede nieuws is dat rood prima kan werken. Op de website van Performable leverde een rode actieknop 21% meer conversie op dan een groene.

De rode actieknop won glasnrijk van de groene (bron: Hubspot)

A/B test: de rode actieknop kwam als winnaar uit de bus (bron: Hubspot)

Breedte: size matters

Een grote button trekt de aandacht. E.ON heeft dat goed begrepen: hun actieknop is bijna 400 pixels breed. Om deze blauwe banaan kan niemand heen. Size matters, maar een grote button kan al het andere overschreeuwen. Een te kleine actieknop trekt juist weer niet genoeg aandacht. De button moet dus groot genoeg zijn om op te vallen zonder overheersend te zijn. In Nederland zweert driekwart van de websites bij een tussenmaat. De breedte varieert van 100 tot 200 pixels.

Size matters: de actieknop van E.ON

Size matters: de actieknop van E.ON

Vorm: afgeronde hoeken

De call-to-action heeft in de regel de vorm van een button. Dat levert betere resultaten op dan tekstlinks of banners. De actieknop van Burgers’ Zoo heeft wel wat weg van een banner. Tricky, want websitebezoekers hebben weinig oog voor (advertentie)banners.

De actieknop van Burgers'Zoo lijkt op een banner

De actieknop van Burgers’ Zoo lijkt op een banner

Afgeronde hoeken hebben de voorkeur. Ronde hoeken wijzen naar binnen, dit trekt de aandacht naar de call-to-action toe. Bovendien oogt rond wat prettiger dan harde, puntige hoeken. In Nederland zijn afgeronde hoeken veruit favoriet (58%). Rechthoekige actieknoppen zijn in de minderhed.

Opmaak: huisstijl is heilig

De meeste Nederlandse websites (58%) werken met een call-to-action button die aansluit bij de huisstijl.  Zo kiezen ABN AMRO, Albert Heijn, C1000, Essent, Nationale Nederlanden, Rabobank, Selexyz, Sunweb en Univé duidelijk voor een actieknop in de huiskleuren.

Sprookjesachtige actieknop van de Efteling

Sprookjesachtige actieknop van de Efteling

Bij KiKa zijn alle buttons op dezelfde manier vormgegeven. Bescheiden en mooi consistent, maar de banaan springt er niet echt uit. Het Longfonds doet het beter. De knop valt erg op en bevat een animatie-effect. Ook Efteling en Miss Etam doen het goed. Beide werken met fraaie buttons die qua kleur en vormgeving bij de huisstijl passen. Nice!

De huisstijlpolitie heeft dus een stevige vinger in de pap. Toch valt er veel voor te zeggen om een afwijkende kleur te kiezen. Bongo doet dat met zijn beleveniscadeaus. Het opvallende blauw zorgt ervoor dat de bestelknop de aandacht trekt.

Naast huisstijl hebben de Nederlandse buttonontwerpers een uitgesproken voorkeur voor kleurverloop (69%). Omlijning en schaduweffecten passen ze zelden toe.

Call-to-action: tekst en visueel

De tekst van een call-to-action luistert nauw. Het moet eenduidig en simpel zijn. Bezoekers moeten direct snappen wat ze gaan doen of wat hen te wachten staat als ze op de button klikken. De call-to-action van Nationale Nederlanden is aan de lange kant: ‘bereken premie en sluit direct af’. Wel weet je meteen wat de bedoeling is. Duidelijkheid voor alles. Ook de werkwoordsvorm doet ertoe. Het beschrijvende ‘Bestellen’ klinkt minder dwingend dan het directieve ‘Bestel nu’. De actieve vorm heeft de voorkeur, maar de toepassing is soms lastig. ‘Leg in winkelmandje’ bekt minder lekker dan het Engelse ‘Add to cart’.

Een visuele call-to-action kan de tekst ondersteunen. Ook in dit geval moet het symbool duidelijk en herkenbaar zijn. Bijvoorbeeld een winkelwagen bij een bestelproces of een neerwaartse pijl op een download-button. In Nederland is de visuele call-to-action populair (64%). Vooral de winkelwagen en het winkelmandje zijn veelgebruikte symbolen. H&M kiest voor een herkenbare boodschappentas als alternatief.

H&M gebruikt een shopping bag in plaats van ene winkelwagen

H&M gebruikt een shopping bag in plaats van een winkelwagen

Pijltjes en plustekens komen ook vaak voor als visueel element. Blijdorp heeft een button in de vorm van een pijl. Bovendien geven ze twee euro korting weg als klap op de (vuur)pijl. Ook webwarenhuis Fonq hanteert een extra klikargument: gratis thuisbezorgd. Prima!

Fonq zweert bij Cialdini

Fonq reduceert onzekerheid

Extra klikargument: Blijdorp geeft korting weg

Blijdorp geeft korting weg: extra klikargument

Best practice: grootste gemene deler

Uit de test komt een oranje actieknop met afgeronde hoeken als best practice naar voren. Een visuele call-to-action roept op tot actie. Ter vergelijking: de Amerikaanse webwinkel Amazon kiest voor een gele, afgeronde knop met een blauwe omlijning. Reken maar dat deze button converteert als een dolle, want bij Amazon weten ze heel goed waar ze mee bezig zijn.

Best practice vs. Amazon

Best practice vs. Amazon

Als grootste gemene deler zegt de best practice niets over de effectiviteit. Uiteindelijk gaat het toch om het resultaat. De grote vraag is wat nu echt het succes van een actieknop bepaalt en welke factoren de doorslag geven. Daar ben ik erg benieuwd naar. Wie durft zijn conversiedata met ons te delen?

Conclusie: context is key

De best practice wijkt duidelijk af van Amazon. Bovendien zien we een grote verscheidenheid aan kleuren, vormen en afmetingen. Kennelijk bestaat de ideale call-to-action button niet. Deze conclusie trekt ook Guido Jansen, die stelt dat vele variabelen een rol spelen. De context waarbinnen een actieknop zich manifesteert, is van doorslaggevend belang. De hele setting bepaalt hoe de banaan het best tot zijn recht komt.

Wil je weten wat in jouw situatie het beste werkt? Ga niet op je onderbuikgevoel af, maar neem de proef op de som. Testen kost tijd en geld, maar de investering betaalt zich dubbel en dwars terug. De praktijk liegt immers nooit. Kijk maar eens op ConversionSkills of WhichTestWon en laat je verrassen.

Infographic: call-to-action In onderstaande infographic vind je alle resultaten uit de call-to-action steekproef terug.

Uitgelicht: Meer verkopen met je webshop in 60 minuten

Webshop

Heb je het gevoel dat je met je webshop niet alle kansen benut? Genereer meer bezoekers, meer klanten en meer omzet door de tips in dit boek in de praktijk te brengen. Vandaag in actie komen, betekent morgen meer verkopen! Roman Markovski en Dennis Vreeke van Modern Minds zijn gespecialiseerd in het ontwikkelen van webshops en het adviseren van retailers op het gebied van cross-channel marketing.

Meer weten?

Interessant?

Lees dan ook onze andere artikelen over , , , , , , , , .

Reacties

  1. Erg interessant artikel, Arjen.

    Testen is in mijn ogen altijd cruciaal. Maar ook is belangrijk hoe je test. Eerst twee pagina’s tegenover elkaar, dan de juiste kiezen. Daarna pas elementen op de beste pagina aanpassen.

    Complex proces, dat leuk in elkaar zit!

  2. Chiel Bakker |

    Ik heb laatst met een collega gesproken die bezig was van een Nederlandse bank (weet niet meer welke) om voor hen een goede Call-to-action knop te ontwikkelen. Daar bleek dat doordeweeks blauw de meeste conversie opleverde en in het weekend rood.

    1. Wat grappig dat doordeweeks de resultaten zo anders waren dan in het weekend! Waarschijnlijk komt dat door grote verschillen in wie in het weekend en wie doordeweeks zijn bankzaken regelt.

      1. Maurice Beerthuyzen |

        En dat maakt de materie ook juist zo interessant. Er zijn zoveel variabelen die gedrag van de bezoeker veroorzaken; de kunst is om daar door veel te testen steeds meer van te begrijpen

      2. Inderdaad grappig. Misschien regeren doordeweeks de risicomijders en zijn in het weekend de thrill-seekers aan zet? Het illustreert eens te meer de bottom-line: de ideale actieknop bestaat niet. Hidde en Maurice hebben gelijk: You Should Test That!

  3. Maurice Beerthuyzen | |

    @Arjen, leuke opsomming. Je mag er echter geen conclusies aan verbinden. Wat mijn collega Guido terecht opmerkte: eea is volledig context afhankelijk ( afhankelijk van week/weekend, tijdstip etc etc). Er zijn zelfs websites die in het weekend een andere knop gebruiken dan door de weeks, of aan Mac gebruikers een andere vorm aanbieden dan aan Windowsgebruikers.

    Het kan in dit geval best zijn dat jij hier knoppen hebt beoordeeld, die op een ander tijdstip of voor een andere gebruiker er heel anders uitzien :-)

  4. Het blijft me verbazen dat het uiterlijk van zo’n knop echt invloed heeft op de conversie. Je zou verwachten dat als iemand wil bestellen en de knop niet duidelijk zichtbaar is, het invloed heeft (hoe moet ik bestellen – hmm… laat maar), maar verder…?

  5. Leuk artikel en zeker nuttige observaties.
    Conclusies trekken op basis van het onderzoek is misschien wat ver gezocht.
    Actie knoppen zijn en blijven een uitdaging en maken het vak leuk.
    Veel facetten spelen een rol – aanvullend te noemen ; de gehele look en feel van de pagina / blend de knop op een juiste manier in, is de plaats en kleur logisch ten opzichte van andere design elementen, hoe vol is je pagina, etc.
    Conclusie die we allemaal delen: testen, testen, testen…

  6. Rood staat voor gevaar en doet een beroep om extra alert te zijn en rode (of oranje) knop heeft daarmee misschien meer attentiewaarde. Je wilt niet op de rode knop drukken maar je doet het toch…

    Hoewel alles afhangt van wie er achter de knoppen zit ga ik toch maar de grijze knoppen een ander kleurtje geven. :)

  7. Wat is nou de goede plek van de CTA button? Er wordt altijd gezegd ‘boven de vouw’. Ik twijfel daar wel eens aan. Soms is de lezer boven de vouw nog midden in een tekst bezig, en dan is het heel raar/onhandig om toch die CTA boven de vouw te plaatsen. Je zou dan juist zeggen onderaan de tekst, omdat hij dan alles gezien/gelezen heeft, en als hij wil converteren, deze button dan beter aansluit als zijn eerstvolgende stap. Of kun je dan toch beter met 2 CTA buttons werken? Of gewoon maar testen? Waarschijnlijk de laatste, maar ik lees altijd dat de CTA button boven de vouw MOET. Iemand??

    1. Met de enorme variëteit aan devices en resoluties is De Vouw tegenwoordig een rekbaar begrip. Dat maakt het er niet eenvoudiger op. Dus ja, testen is de beste oplossing. De enige die echt kan vertellen wat het beste werkt, is toch de klant.

      1. Het is belangrijk om alleen die relevante informatie en interactieve tools te bieden die passend zijn voor de customer journey. Omdat er anders te veel ruis is. Er zijn niet alleen verschillende scherm-groottes die middels responsive design allemaal anders reageren op de paginainhoud en plaatsing van de ‘buy now’-knop. Wat veel websites fout doen, is dat ze de meteen de deal willen sluiten en de buy-now boven de fold laten staan. Terwijl er vanuit de verschillende scherm-groottes, maar ook de customer journey juist veel meer afwegingen kunnen zijn om je bezoeker goed te servicen. Denk bijv. aan een handige ‘save for later’ als de bezoeker nu nog even niet wil kopen, en er op een ander device/tijdstip mee verder wil gaan. Dan heb je de lead in iedergeval ‘vast gehouden’. (Op een mobiel scherm komen buttons heel anders te staan dan op tablet/desktop). Of wanneer de bezoeker na de product-toelichting, reviews/recensies, etc. onderaan belandt, dan zouden de belangrijkste buttons juist nog een keer terug moeten komen. Juist daar heeft de bezoeker alle informatie tot zich genomen en kan hij overtuigd worden tot een next-step. Dat wordt 9 van de 10x vergeten vanwege de focus op de vouw. Door je te verplaatsen in het gedrag, de locatie, en de customer lifecycle (orientatie, beslissing, aankoop, etc) van de bezoekesr; krijg je een grote strategische, interactieve meerwaarde. Succes met testen! – en ik help graag verder. :)

  8. Je zou ook kunnen stellen dat de beste plek voor CTA button is wanneer de bezoeker tot actie wilt overgaan. Dit hoeft dus niet boven de fold te zijn, maar kan ook verder naar beneden. Het gaat om de algemene flow van je website/lp. Je zet je CTA button op de specifieke plek wanneer de bezoeker voldoende is geinformeerd/overtuigd en door wilt in het proces.

    1. Boven of onder ‘the fold’? Deze @outbrain blogpost bevat een heatmap met harde inzichten op basis van 1 miljoen visitors, via 10 platforms over een periode van 24 uur: http://www.outbrain.com/blog/2013/04/user-engagement-follows-good-content-not-ads.html

Plaats een reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn met een * aangegeven.

Verschijnt je reactie niet, dan is deze mogelijk in de spam terechtgekomen. Mail ons dan even!