Webshops
Door Michel Tel in Webshops

Handige Tips om Call to Actions van Webshops te verbeteren…

VN:F [1.9.22_1171]
Beoordeling: 8.8/10 (15 beoordelingen)

call-to-action-webshopBinnen een webwinkel draait alles om het vasthouden van de aandacht van bezoekers. We leven in een attention economy en we worden dagelijks overspoelt met nieuwe informatie. Het is belangrijk dat je de aandacht van bezoekers probeert vast te houden. Doe je dit niet dan is de kans groot dat bezoekers worden afgeleid en vervolgens wegklikken. Bezoekers zijn afgeleid, openen hun e-mail, gaan naar YouTube of bezoeken een prijsvergelijker zoals Beslist.nl om prijs van jouw producten te vergelijken.

Binnen no-time wordt een bezoeker, tijdens de zoektocht naar een product, afgeleid. In het ergste geval gaat de bezoeker naar de concurrent en loop je omzet mis.

Voorkom dat bezoekers vroegtijdig wegklikken. Houd de aandacht van bezoekers vast. Hoe? Gebruik call to actions om voortdurend de interesse te wekken.

What the f#ck is een call to action?

Een call to action wordt vaak afgekort als CTA. Een call to action is een afbeelding of tekst die een bezoeker probeert aan te zetten tot een actie. Op basis van het AIDA-model is de call to action het element dat zorgt voor de laatste stap (belangrijke klik). Dit kan bijvoorbeeld het registeren voor een nieuwsbrief zijn, het aanvragen van een catalogus of het aanvragen van een productdemo.

Call to action

De webshop Koffero.nl gebruikt opvallende call to actions op de productdetailpagina. De call to action lijkt op een button, heeft voldoende contrast en valt gelijk op als je de pagina bezoekt. 

Een CTA leidt een bezoeker vervolgens naar een landingspagina waar bezoekers wordt gevraagd om gegevens achter te laten in ruil voor waardevolle informatie of een product. Een succesvolle call to action zorgt voor meer conversies en geeft je waardevolle klanteninformatie (leadgeneratie).

Het doel van een call to action is om meer bezoekers naar een vervolgpagina te sturen. Een landingspagina. Binnen een webshop vind je vaak veel call to actions. Met deze call to actions probeert een webshop de aandacht vast te houden en de bezoekers uiteindelijk te verleiden om een product te kopen in de webshop.

Wat is een succesvolle call to action?

Dé beste call to action bestaat helaas niet! Er zijn wel enkel kenmerken waar een succesvolle call to action aan voldoet Als je een call to action gaat ontwerpen voor je webshop hou dan in ieder gevalrekening met de volgende punten:

  • geef de call to action een onderscheidende kleur met een hoog contrast
  • geef de call to action een afwijkende vorm
  • geef de call to action een opvallende grote
  • zorg voor voldoende (wit)ruimte om de call to action
  • geef de call to action een visuele actie

Binnen de internet marketing wereld is de Belcher button vaak genoemd als de méést succesvolle call to action aller tijden. Op basis van vele A/B testen blijkt dat deze call to action 35 tot 320% meer conversie oplevert dan andere call to actions. Verschillende internet marketeers noemen deze in-winkelwagen-knop de meest succesvolle call to action.

Onderscheidende kleur en hoog contrast

Zorg ervoor dat de call to action voldoende opvalt binnen je webshop. Geef de call to action een onderscheidende kleur en gebruik een rustige achtergrondkleur of patroon. Uit mijn ervaring blijkt dat het niet zo is dat een groene call to action leidt tot een hogere conversie dan een blauwe call to action.

CTA onderscheidend

De webshop van KLM gebruikt opvallende call to actions. De call to actions onderscheiden zich van de andere onderdelen binnen de pagina.  

Het contrast van de call to action ten opzichte van de andere onderdelen binnen de pagina is belangrijker dan de uiteindelijke kleur.

Niet opvallende CTA

De belangrijkste call to action op de winkelwagenpagina van Lupux valt niet voldoende op. Het is beter dat de CTA een andere kleur krijgt bijvoorbeeld groen.  

Een afwijkende vorm en grote

Geef een call to action een afwijkende vorm ten opzichte van de andere onderdelen binnen de pagina’s. Zorg voor afgeronde hoeken en laat de call to action ook daadwerkelijk lijken op een button waar een bezoeker op kan klikken. Gebruik bijvoorbeeld (slag)schaduw om de call to action diepte te geven.

Call to action webshop

De call to action op de productpagina van Voetbalshop.nl heeft een afwijkende vorm en is groot. Kortom, de call to action valt gelijk op. Ook worden bezoekers geprikkeld met het woordje ‘Nu’. 

Geef een call to action voldoende ruimte

Wil je dat bezoekers op een call to action klikken? Zorg dan voor voldoende witruimte om de call to action, zodat de CTA opvalt en zich onderscheid.. Geef de call to action een marge en zorg dat bezoekers niet worden afgeleid door andere aanbiedingen of spetterende een afbeelding van een vrouwelijke medewerkster 😉

Maar pas op, maak de witruimte niet té groot(!) Anders heb je kans dat de bezoeker de relatie tussen de call to action en de content verliest.

CTA webshop

De bovenstaande call to action van SBsupply heeft voldoende witruimte en krijgt veel aandacht, omdat de button groot is gemaakt en een hoog contrast heeft. 

Daarnaast is het advies om van de meest belangrijke call to action de grootste button op de pagina te maken. Hoe groter de call to action, hoe meer aandacht deze krijgt. Een grote call to action schreeuwt om aandacht!

Tip: Geef de call to action ook een mouse-over status. Zorg voor interaction als een bezoeker met zijn muis over de CTA gaat.

Voeg actie toe aan de call to action

Om er zeker van te zijn dat een bezoeker van je webshop de call to action ook daadwerkelijk herkent, is het belangrijk dat de call to action lijkt op een button. Geef de CTA een verloop, ronde hoeken, schaduwelementen, zorg voor een mouse-over status en plaats bijvoorbeeld een pijltje op de call to action. Een pijltje op de call to action suggereert een actie.

Call to action met actie

Aan de call to action van Hallmark is een pijl toegevoegd die zorgt voor meer actie. Ook een actieve schrijfwijze en een uitroepteken geven de call to action meer actie. 

Tip: Zorg ervoor dat de pijl op de call to action naar rechts wijst. Een pijl die naar rechts wijst, geeft een gevoel van voortgang (volgende!).

De tekst op een call to action

De tekst op de call to action vertelt de bezoekers wat de actie is. Wat ga ik doen als ik op deze button klik? Wat staat me te wachten als ik hier klik? Probeer deze vraag gelijk te beantwoorden. Gebruik geen ‘klik hier’, want dit vertelt niks over de uiteindelijke actie. Het is beter om actiegerichte woorden te gebruiken zoals ‘bestel nu’, ‘voeg toe aan favorieten’ of ‘plaats in winkelwagen’. De tekst op de call to action creeërt een verwachtingspatroon.

Probeer de bezoeker ook te verleiden om op de CTA te klikken. Gebruik woorden, zoals, ‘gratis’, ‘100%’, ‘alleen vandaag’ of ‘direct online’. Je kunt de verleiding versterken door schaarste te creëren. Bijvoorbeeld ‘op = op’ of  ‘alleen vandaag geldig’.

Goede voorbeelden van teksten op een call to action:

  • Bestel direct online
  • 100% gratis registreren
  • Voeg toe aan winkelwagentje
  • Gratis online bestellen
  • Geef een uniek cadeau
  • Deel via Facebook

Actiegerichte woorden gebruiken

Als je gebruik maakt van call to actions met actiegerichte woorden dan is de kans groter dat bezoekers van je webshop doorklikken. Je vraagt de bezoeker om een actie te nemen. Het geeft bezoekers het gevoel dat ze nú moeten klikken.

Actiegerichte CTA

In de webshop van Berg Toys vergroot het woord ‘plaats’ het gevoel van actie. 

Gebruik actiegerichte woorden, zoals ‘bestel’, ‘aanvragen’ of ‘toevoegen’. Je kunt het gevoel van actie vergroten door bijvoorbeeld een icoon of een pijl toe te voegen aan de call to action.

Tip: Optimaliseer je call to actions ook voor zoekmachines. Plaats belangrijke zoektermen in het ALT of TITLE attribuut.

Zorg voor aanvullende informatie

Een belangrijk onderdeel bij het creëren van schaarste binnen je webshop is het plaatsen van een onderschrift bij een call to action. Dit is een regel tekst die je plaats onder of naast de een opvallende CTA. In het onderschrift benadruk je het belang om op de call to action te klikken.

Met een onderschrift creëer je schaarste door bijvoorbeeld aan te geven hoeveel exemplaren van een product nog op voorraad zijn of vertel dat een actieprijs alléén vandaag geldig is. Geef een bezoeker het nu-of-nooit-gevoel.

Een onderschrift kan ook informerend zijn. Geef bijvoorbeeld aan binnen hoeveel dagen de klant de mogelijkheid heeft om een product retour te sturen of geef aan dat retourneren gratis is. Zorg voor geruststellende woorden en neem alle twijfels weg.

Hoe maak je een call to action?

Ben je handig met bijvoorbeeld Photoshop dan kun je zelf een call to action maken. Let er op dat je deze call to actions als een .png bestand opslaat om bestanden met een minimale bestandsgrote te gebruiken.

Om de snelheid van je webshop te verbeteren, is het slimmer om de call to actions te maken met behulp van CSS. Het grote voordeel van call to actions maken met CSS is dat de call to actions veel sneller geladen worden, omdat er geen afbeeldingen worden geladen vanaf de server. Met CSS3 kun je de call to action ook ronde hoeken of schaduw geven.

Je kunt een webdesigner inhuren om de call to actions voor je te ontwerpen, maar je kunt ook zelf aan de slag met een CSS button generator. Met de volgende tools maak je in enkele stappen zelf een succesvolle call to action:

  • Dabuttonfactory.com
  • Cssbuttonmaker.com
  • Cssbuttongenerator.com

Maak je wel gebruik van afbeeldingen als call to actions op je pagina zorg er dan in ieder geval voor dat je afbeeldingen worden geladen door middel van een CSS sprite. Een CSS sprite zorgt ervoor dat al je achtegrondafbeeldingen worden verzameld in één afbeelding. Deze afbeelding wordt slechts één keer geladen en vervolgens op de juiste plek gezet.

Waar plaats je een call to action?

Het is belangrijk dat elke pagina binnen een webshop een of meerdere call to actions heeft. Zorg dat de belangrijkste call to action in ieder geval boven de fold (de vouw) van de pagina staat. Bij de vouw van de pagina ga ik altijd uit van een schermresolutie van 1024 x 768 pixels.

Call to action voor webshops

Op de winkelwagenpagina van Berg Toys is bewust een call to action geplaatst boven de vouw die bezoekers verleid om verder te klikken. 

Probeer te achterhalen hoe de bezoekers van je webshop navigeren en hoe ze de pagina’s scannen. Op deze manier weet je welk delen van de pagina de meeste aandacht krijgen en welke opvallen.

Bezoekers van je webshop lezen de informatie op je pagina’s niet altijd. De meeste bezoekers van je webshop scannen de pagina volgens een F of een Z-patroon. Het is belangrijk dat je hier rekening mee houdt bij het plaatsen van de call to actions.

Heatmap scannen webpagina

De meeste bezoekers van webshops scannen een pagina volgens een F-patroon. Plaats de belangrijke call to actions op deze posities binnen de pagina’s. 

Zorg er daarnaast voor dat de call to action voldoende opvalt en plaats de call to action niet te dicht bij andere elementen van de pagina. Zorg voor voldoende functioneel wit rondom de CTA.

Call to actions stap voor stap verbeteren

Het is belangrijk dat je de call to actions van je pagina’s blijft verbeteren, zodat je stap voor stap de conversie verhoogt. Meet het effect van de call to actions, geef de call to actions een UTM code mee en stel doelen in Google Analytics in om conversie te meten. Experimenteer bijvoorbeeld met de kleur van een call to action of verander het onderschrift bij de call to action.

Kleine aanpassingen kunnen een groot effect hebben op de CTR van de call to action en de uiteindelijke conversie van de webshop.

Meet het effect van een call to action met behulp van de CTR. De Click Trough Rate (CTR) van een call to action is de verhouding tussen het aantal vertoningen van de call to action en het aantal klikken. Probeer het percentage te verhogen door kleine wijzigingen aan te brengen in de call to action.

Een goede call to action is sléchts stap 1

Sommige webshops maken de fout door veel aandacht te besteden aan de call to action, maar niet aan de vervolgstap: de landingspagina. Zorg er voor dat de langspagina exact aansluit bij het verwachtingspatroon van de bezoeker. Probeer te achterhalen wat het verwachtingspatroon is van de bezoekers en richt de landingspagina hierop in. Laat de vervolgstappen zien binnen de landingspagina en maak gebruik van de juiste zoektermen. De call to action is slechts het begin van een succesvolle webshop…

VN:F [1.9.22_1171]
Beoordeling: 8.8/10 (15 beoordelingen)
Handige Tips om Call to Actions van Webshops te verbeteren..., 8.8 out of 10 based on 15 ratings