50 winkelwagen knoppen 'koop NU!'

Het lijkt zo onbenullig, het knopje waarmee de klanten van je e-commerce website hun artikel in hun virtuele winkelwagen leggen. Niets is minder waar. De kleur, de vorm, de grootte, de tekst – allemaal eigenschappen die een effect hebben op de conversie. Kijk, er zullen weinig klanten zijn die samen met een kop koffie de winkelwagenknop erbij pakken om eens rustig te gaan filosoferen wat voor betekenis er achter zou kunnen zitten. Maar onbewust geeft het ontwerp van de knop toch bepaalde hints en gevoelens die ervoor zorgen dat je met een felrode winkelwagenknop met daarop ‘Koop NU!’ minder verkoopt dan met een mintgroene ‘in winkelwagen’.

Volkskrant Wehkamp Winparts
Zizz Zonnebrilkopen Vehicle-care
Ultragadgets Typhone Topbloemen
Thuisbezorgd The gadgetcompany Sjambra
Autobandenmarkt Selexyz Regenmode
Redcoon Otto Officesupplies
Multivlaai Misco Megagadgets
Mediagigant Laska Kijkshop
Kamera-express Health4all Gsmhut
Goedkoopstewinkel Free Record Shop EMP Motorparts
Dvdigital Droomboeket Digitalstreet
Cd-wow Cdplus Budgetverf
Bol Bobshop Bike
Bigdennis Bestel-verf Bestelklokken
Bestel Belnu BCC
Barbequeshop Baby-walz Argeweb
123Webshop 123tijdschrift

Bovendien vertelt de knop ook iets over jouw bedrijf. Zo schetst het gebruik van de standaard winkelwagenknop van osCommerce een heel ander beeld en vertrouwen bij de klant, dan een gepersonaliseerde winkelwagenknop. Op die manier wordt de winkelwagenknop – net als de rest van de vormgeving van de site – een belangrijk onderdeel van de branding en brand positioning. Door middel van een unieke kleur, vorm en tekst stel je klanten in staat om een specifieke band te ontwikkelen met jouw merk.

En welke is nu de beste? Een goede winkelwagenknop is:

  • Groen, geel, oranje of blauw

Deze kleuren stralen betrouwbaarheid, balans en welvaart uit. Een rode knop is misschien extra opvallend, maar de rode kleur wordt over het algemeen geassocieerd met negatieve eigenschappen zoals gevaar.

  • Duidelijk zichtbaar en opvallend

In de zoektocht naar de bovenstaande knoppen kwam ik webwinkels tegen waarbij de winkelwagenknop nagenoeg onvindbaar was! Dat is uiteraard niet de bedoeling: Op een pagina waar je een product kan bestellen, moet de winkelwagenknop luid en duidelijk aanwezig zijn.

  • Winkelwagen icoon

Hoewel mensen op een website doorgaans bij het scannen in eerste instantie aangetrokken worden door tekstuele inhoud, kan een herkenbaar icoon van een winkelwagen helpen. Bijvoorbeeld in een situatie waarin iemand niet geheel thuis is in de taal van de website en daardoor niet direct het woord ‘winkelwagen’ opvalt. Bovendien kan deze kleine toevoeging de knop meer laten opvallen en op een subtiele manier vergroten.

  • Uitnodigende tekst

‘In winkelwagen’ klinkt een stuk minder forcerend en definitief dan ‘Bestel NU!’. Je wil klanten uitnodigen meerdere artikelen te kopen, niet opjagen.

  • Modern vormgegeven

De tijd van de standaard grijze windows-knop is wel voorbij. Kleurrijke knoppen en een creatieve vorm zijn vandaag de dag het minimum.

  • Uniek

Je bent tenslotte beter dan alle andere, en dat onderscheid wil je zichtbaar maken.

Oftewel: Het doel van de winkelwagenknop is de klant volledig stimuleren om iets te kopen bij jou. Dit betekent dat de bovenstaande regels een goede vuistregel zijn, maar in sommige gevallen is het juist beter om ervan af te wijken. Een goed voorbeeld hiervan is de knop van The Gagdetcompany met de tekst “dump in m’n kar”. Samen met het betrouwbare blauw vormt dit een unieke knop die de klant onthoudt en die past bij de inhoud van de site. Een online apotheekshop daarentegen, waar mensen persoonlijke spullen kopen, zou er niet mee weg kunnen komen. Al met al, welke vind jij het best?

Voor bronnen zie onder andere: Getelastic (107 winkelwagenknoppen), Grokdotcom, Wikipedia, Virtualhosting blog

Geschreven door: CEO fonq.nl

30 Reacties

  • Jorrit zegt:

    Hey Patrick,

    Leuk stukje. Dat is inderdaad ook de reden van onze groene knop op ondermeer http://www.gadgethouse.nl terwijl een ander kleurtje beter bij de huisstijl zou passen.

    Ga vooral door met deze leuke artikeltjes.

    Groet,

    Jorrit Steinz

    28 May 2008 12:55
  • […] navolging van het artikel over 50 winkelwagenknoppen, heb ik eens een aantal klantenservicepagina’s erbij gepakt. Eigenlijk zijn de winkelwagenknop en […]

    09 Jun 2008 08:51
  • […] 50 winkelwagen knoppen ‘koop NU!’ Een vermakelijk artikel over zoiets simpels als een winkelwagenknop. Maar schijn bedriegt, is het wel zo simpel? Patrick Kerssemakers legt duidelijk uit welke vormen, kleuren en teksten handig en effectief kunnen zijn. Houdt vooral in je achterhoofd dat de punten die behandeld worden niet alleen voor die knop gelden maar nog veel breder toegepast kunnen worden. […]

    11 Jun 2008 09:08
  • […] Kerssemakers legt op Just ecommerce uit welke vormen, kleuren en teksten van een winkelwagentje op je site, handig en effectief kunnen […]

    11 Jun 2008 15:36
  • Ulco zegt:

    “Dump in m’n kar” vind ik wel een hele mooie 🙂 Niet alleen omdat hij creatief is maar ik heb zo’n vermoeden dat daarom de aandacht er ook goed op gevestigd wordt.

    Van de lijst vind ik die van bestelklokken.nl de beste, maar of die ook voldoende aandacht trekt? Door een beetje te experimenteren met roulerende bestelknoppen is er voor mij in ieder geval uitgekomen dat dit de beste is (bij mijn shop, that is):

    11 Jun 2008 19:33
  • dave zegt:

    Leuk artikel..schreef er vorig jaar ook al iets over en zolang je niet gaat testen is het moeilijk om hier een ‘best of’ eruit te gaan halen.

    Maar kan me niet aansluiten met het idee dat een rode knop niet verkoopt. Kijk maar eens naar target.com. en het is er eentje die veel wordt geïmiteerd 😮 Het ding past gewoon in het design en een groene of blauwe knop zou daar absoluut niet passen.

    Wat ik vooral wil is dat hij ongelofelijk hard opvalt en dat het zowat het eerste is (naast de foto vh product) wat opvalt als je een pagina bekijkt maar dan wel eentje die past in het design. Als je hoofdkleuren wit en een ietsie pietsie groen zijn zou ik er inderdaad geen rode knop gaan induwen … en hij moet vooral boven the fold staan.

    Verder een leuke blog en was onbekend..nu dus niet meer maar wat staat je rss feed knopje laag op je pagina 😮

    dave

    11 Jun 2008 23:12
  • Sint zegt:

    Leuk artikel! Ik denk dat je er inderdaad voor moet zorgen dat je knop aan het merendeel van deze criteria voldoet. Over de kleur kun je nog twisten, dit zal ook afhangen van de kleuren die je in je lay-out al gebruikt.

    De knop bij Target.com is inderdaad wel rood, waardoor hij minder opvalt in de overwegend rode layout. Ik ben het met Dave eens dat de positie wel heel erg goed is gekozen, maar als hij ook nog eens geel was geweest zou hij nog beter opvallen.

    12 Jun 2008 07:35
  • dave zegt:

    Als ze daar een gele knop zouden dumpen zou dat waarschijnlijk serieus gaan vloeken bij de layout van hun site maar hij zou idd wel harder gaan opvallen 😮

    Die hebben ze trouwens onlangs veranderd van vorm want die zag er vroeger iets anders uit..Maar verder vind ik niet dat hij ‘niet opvalt’. Er zijn nog rode elementen aanwezig maar je moet eens zien wat ze in het rood zetten : hun logo, shoppingcart link, zoekfunctie,10% korting bij aanschaf van een creditcard, free shipping, prijs en de koopknop…allemaal zaken die conversie gericht zijn dacht ik.

    Over positie gesproken, ik vraag me altijd af waarom de knoppen nooit aan de linkerkant zijn te vinden ? Als je veel van die eyetracking studies bekijkt ,dan hebben ze het altijd over de bekende driehoek…zou dit anders liggen bij productpagina’s…blijkbaar wel.

    Dave

    12 Jun 2008 09:14
  • Leuke kermisrit was dit artikel. Een beetje vermoeid door 50 keuzes maar ga toch voor de blauwe button: bestel met het icoontje ervoor van een pijl wat de actie aangeeeft dat je door moet gaan.

    Wat mij betreft is die button de winnaar van je kermis met de meest duidelijke call to action.

    12 Jun 2008 20:22
  • Marten zegt:

    Grappig om te zien dat veel webwinkels nog steeds van die geheel onduidelijke en bijna onzichtbare Bestel knoppen gebruiken.

    Wat zou een verbeterde knop hun aan direct resultaat opleveren?

    13 Jun 2008 08:54
  • dave zegt:

    Ik ken een geval waar ze enkel de kleur veranderden en 20% extra in de pocket…kassa !

    Dave

    13 Jun 2008 15:17
  • pe7er zegt:

    Leuke analyse en leuk artikel!

    Ik ben een groot voorstander van open source software maar zie helaas veel webwinkels op basis van open source waarbij de standaard knoppen niet zijn vervangen door unieke knoppen die binnen het concept van de site passen.

    In zo’n geval zijn osCommerce, Zen Cart en Virtuemart (e-commerce pakket voor Joomla CMS) webwinkels gemakkelijk als zondanig te herkennen.

    Veel webwinkels in Nederland bieden hun producten internationaal aan. Op meertalige sites is het dan natuurlijk belangrijk dat eventuele teksten op dergelijke knoppen ook meertalig aangeboden worden.

    Bedankt voor de bronnen onderaan het artikel! Interessant leesvoer om verder in het onderwerp te duiken…

    09 Jul 2008 12:49
  • […] navolging van het artikel over 50 winkelwagenknoppen, heb ik eens een aantal klantenservicepagina’s erbij gepakt. Eigenlijk zijn de winkelwagenknop en […]

    01 Jun 2010 13:39
  • marcel zegt:

    leuke knoppen ga ze zeker gebruiken!

    02 Mar 2011 21:03
  • Ik wist niet dat fonq ook een blog had, erg leuk! Ik zocht speciaal naar een stukje over winkelwagens, want ik had al zo’n idee dat de kleur een verschil kon maken. Eerst was de winkelwagen bij mij rood, zelf vind ik dat wel het mooiste en het opvallendste, maar het bijkt inderdaad dat mensen dat onbewust zien als ‘negatief’.

    13 Jun 2012 14:56
  • Ideaal!

    Bezoek verf-voordeel.nl voor alle merken verf voor de laagste prijs!

    22 Jan 2014 14:42
  • Frank zegt:

    Leuk artikel!

    Hier gebruiken ze een combinatie van tekst en winkelwagen icoon.
    http://www.auto-eshop.be/

    10 Jun 2014 15:58
  • Ik zal blauwe knoop knopen zilveren verkoopsucces draaien, nuttige informatie

    02 Jul 2015 10:47
  • kar knoop cirkel of het meest gebruikt

    03 Aug 2015 16:43
  • Zeer mooie 50 knoop kar, zal worden gebruikt om toe te voegen aan de website

    12 Dec 2015 07:29
  • the beautiful icons can be used

    17 Dec 2015 04:00
  • Wij hebben inderdaad ook veel getest met diverse knoppen. Bij ons werkte de paarse knop het beste. Maar het verschilt nogal met de tekst die erop staat.

    Ook dit moet goed getest worden, is het nu volgende of bestellen. Bij volgende gaat er meer door naar de checkout, maar dat wil niet altijd zeggen dat ze meer bestellen.

    05 Mar 2016 14:29
  • Sanne zegt:

    Leuk om te lezen en de verschillende bestelknoppen te zien. Uit onderzoek blijkt dat een groene bestelbutton het beste werkt. Zoals ze ook bijvoorbeeld op http://www.drogistplein.nl toepassen

    04 Jul 2016 16:20
  • dau tu sieu loi nhuan

    01 Oct 2016 19:01
  • Kijk, er zullen weinig klanten zijn die samen met een kop koffie de winkelwagenknop erbij pakken om eens rustig te gaan filosoferen wat voor betekenis er achter zou kunnen zitten

    01 Oct 2016 19:18
  • sunrise zegt:

    Grappig om te zien dat veel webwinkels nog steeds van die geheel onduidelijke en bijna onzichtbare Bestel knoppen gebruiken.

    14 Dec 2016 07:32
  • Goed artikel Patrick! Zitten een paar buttons bij die haast komisch zijn om naar te kijken haha!

    21 Dec 2016 14:57
  • Tjerk zegt:

    Wij gebruiken een ‘Ga verder’-knop zodat het voor klanten duidelijk is dat hij nog niet gelijk in het betaal-circuit zit.

    20 Feb 2017 12:08
  • its great

    26 Feb 2017 02:16
  • logo is great

    18 Dec 2017 07:54

Plaats uw reactie