Er zijn niet zoveel gegevens beschikbaar over het effect van kleur op een website. Daarom kiezen marketeers vaak voor trendy kleuren of op basis van gevoel. Een webwinkelier voor kantoormeubelen wilde achterhalen wat het effect van het ontwerp van specifieke buttons of design elementen, zoals het winkelwagentje, op het aankoopgedrag is. Hij deed verschillende testen, die in dit artikel van MarketingSherpa besproken worden. De effecten waren opzienbarend. Eén test leverde maar liefst 44,11 procent meer conversie op.
Na een blik op zijn siteanalytics rapport vermoedde Michael Klazema, Director Web Marketing & Customer Relationship Management, DYMO, dat de algemeen geldende theorieën over het gebruik van kleur weleens niet konden gelden voor zijn website. Alle winkelwagen-buttons waren lichtblauw en ongeveer even groot. 'Ik vroeg me af of een andere kleur, vorm of tekst de conversie zou verbeteren.'
Omdat zijn klanten vaak naar speciale accessoires zoeken (specifieke merken, inkt voor labelprinters etc.) richtte Klazema zich bij de design-optimalisatie ook op een groter aantal cross-sell lagen dan gebruikelijk. Voor veel producten was er op zijn minst één cross-sellpagina tussen het punt waar de klant een item aanklikt en dat waar hij daadwerkelijk start met de aankoop.
Afgelopen herfst kocht Klazema nieuwe software, waarna hij en zijn team startte met testen.
Op basis van de analyticsdata waren vijf tests opgesteld.
- De kleur van buttons op productpagina's
- De kleur en tekst van buttons op cross-sellpagina's
- De grootte van de 'voeg-toe-aan-winkelwagen' -button
- Het effect van het weglaten van een cross-sellpagina in het checkout-proces.
De site werd opgesplitst, waardoor 90 procent van het verkeer deelnam aan de test, en 10 procent de bestaande site zag.
Test 1: Koop nu
Voorheen waren alle buttons in pasteltinten van primaire kleuren, maar Klazema wilde weten wat het effect van fellere kleuren, zoals rood en groen, was.
De 'Koop nu'-knop verscheen na een klik op een individuele productpagina. Getest werd:
De 'Koop nu'-knop verscheen na een klik op een individuele productpagina. Getest werd:
- Lichtblauw, de huidige kleur
- Donkerblauw, omdat dit past bij de kleuren van de layout van Dymo's alternatieve testpagina's
- Rood, omdat het bekend staat als call-to-action element
'Rood was volgens ons de meest contrasterende, in het oog springende kleur op de pagina, waarvan we wel dachten dat het kon werken. Op dit punt in het koopproces maakten we ons geen zorgen over culturele connotaties, zoals het feit dat rood ook "stop" symboliseert.'
Test 2: 'Voeg-toe-aan-winkelwagen'
Test 2: 'Voeg-toe-aan-winkelwagen'
Als klanten eenmaal op de 'koop nu'-knop hebben geklikt, komen ze op een cross-sellpagina met een lichtblauwe knop met de woorden 'Add to Cart'. Opnieuw testte Klazema en zijn team hier de huidige kleur (lichtblauw), en rood en groen.
Vanaf dit punt, als klanten op de winkelwagen-knop geklikt hebben, komen ze op een pagina waar ze het aantal producten dat ze willen kopen kunnen aanklikken, voordat ze verdergaan naar de checkout-pagina.
Hier werd getest:
- lichtblauw
- groen
Test 3: Buttongrootte
Klazema vroeg zich ook af of het formaat van de 'Proceed to Checkout'-knop, die je ziet op de laatste pagina voordat je moet betalen, groot genoeg was. Dus na een aantal proeflayouts werd getest:
- een van 145 x 14 pixels
- een die 25 procent groter is
Test 4: 'Add to Cart' vs 'Proceed to Cart'
Vervolgens werd getest met de tekst 'Add to Cart'(Voeg toe) en 'Proceed to Cart' (Ga verder) op de buttons op de cross-sellpagina, voor checkout.
Test 5: Weglaten van een cross-sellstap
Tot slot werd getest met een stap minder in het cross-selltraject, om te zien of de conversieratio toeneemt. 'We wisten dat onze winkelervaring een beetje anders was, misschien niet zo snel in vergelijking met anderen vanwege de cross-sellpagina's. We waren benieuwd of er iets zou veranderen met het weglaten van enkele van deze stappen.'
In deze test kregen klanten na het klikken op de 'Add to Cart'-button direct de 'selecteer aantal'- pagina te zien, voordat ze verder gingen naar de checkout-pagina.
Resultaten
Het is goed dat Klazema en zijn team deze tests deden, want de uitkomsten waren een grote verrassing. Met de 'Koop nu'-knop op de productpagina bleek rood het donkerblauw en lichtblauw te verslaan met 4,03 procent. Goed genoeg om het team te overtuigen van kleur te veranderen.
In sommige gevallen gaf het testsysteem simpelweg een 'winnaar' aan, zonder de percentages te geven, omdat het met grote marge gewonnen had.
- Zo was groen duidelijk effectiever dan lichtblauw op de 'select aantal'-pagina
- De bestaande lichtblauwe versie van de winkelwagenknop op de cross-sellpagina was beter dan de rode of de groene.
- Opvallend is dat met een grotere 'proceed to checkout'-knop de conversie met maar liefst 44,11 procent toenam, ten opzichte van de bestaande 'add to card'-knop.
- De bestaande lichtblauwe versie van de winkelwagenknop op de cross-sellpagina was beter dan de rode of de groene.
- Opvallend is dat met een grotere 'proceed to checkout'-knop de conversie met maar liefst 44,11 procent toenam, ten opzichte van de bestaande 'add to card'-knop.
Uit de tests op de cross-sellpagina's blijkt dat de woorden 'proceed to cart' het 21,8 procent beter doen dan 'Add to cart', waardoor dit op de gehele site werd aangepast.
'Het was interessant te zien dat sommige kleuren een positief effect hebben in bepaalde fases van het proces, en een negatief effect hebben op andere plaatsen. Groen werkt goed voor de winkelwagenknop, maar niet voor dezelfde functie op een andere plek. Mensen zijn gedurende het proces in verschillende ''states of mind''. In plaats van een consistente look & feel op de site, is onze belangrijkste conclusie dat we continu moeten testen om er zeker van te zijn dat we geen verkeerde vooronderstellingen hebben.'
'Het was interessant te zien dat sommige kleuren een positief effect hebben in bepaalde fases van het proces, en een negatief effect hebben op andere plaatsen. Groen werkt goed voor de winkelwagenknop, maar niet voor dezelfde functie op een andere plek. Mensen zijn gedurende het proces in verschillende ''states of mind''. In plaats van een consistente look & feel op de site, is onze belangrijkste conclusie dat we continu moeten testen om er zeker van te zijn dat we geen verkeerde vooronderstellingen hebben.'
Op de cross-sellpagina bleek dat met het weghalen van een pagina de conversie met 15 procent daalde. Dat betekent dat snelheid in het koopproces niet zo belangrijk is als veel mensen beweren.
Handige links naar aanleiding van deze tests:
Creative samples from DYMO's color test:
http://www.marketingsherpa.com/cs/dymo/study.html
OTTO Digital - online media optimization agency that helped during the testing:
http://ottodigital.com/
Offermatica Corporation -- provided software that aided the testing:
http://offermatica.com/
WebTrends Inc. - DYMO's analytics provider:
http://www.webtrends.com
DYMO:
http://www.dymo.com
Ook het feit dat buttons verschillende kleuren hebben bevorderd het proces. Het eeuwige rood of blauw maakt mensen buttonnumb en worden er dan blind voor. Goed onderzoek! Maar een second opinion zou geen kwaad kunnen voordat alle marketeers en vormgevers zich van de zelfde beg storten!
Gideon, je bent vast een vormgever. Vaststaande waardes (een aantal hiervan waren naar mijn idee allang bekend) bestaan. Afwijken van de standaard maakt een prospect klant al snel zoekend (tenzij het echt heel goed gedaan is), waardoor je hem kwijt kunt raken. Schiphol blinkt ook niet uit door zijn originele bewegwijzering, maar het is wel compleet duidelijk waar je bent en heen moet.
Het is "cart", niet "card". Tenzij je wil dat klanten iets in een "kaart" stoppen ipv een mandje of wagentje...
Is aangepast, dank je wel.
Ik vind dat Gideon gelijk heeft. Door andere kleuren dan gebruikelijk wordt de klant geprikkeld. iedereen wordt al zo moe van de gebruikelijke systemen. Eyecatchers hebben we nodig. Als je voor mij wilt komen werken, Gideon, graag. Ik heb nog wel wat aardige opdrachten. Ik ben te bereiken op vdbidww@live.nl
Weet iemand of de knopgrootte uitmaakte? Is groter inderdaad beter?