MEER CONVERSIE REALISEREN? 5X CALL TO ACTION-BUTTON DESIGN TIPS

Een Call To Action-button (CTA) is letterlijk een ’oproep tot actie’. Met een goede Call To Action leidt u de gebruiker naar de voor jouw belangrijkste punten op de website. Het is het geheime recept om mensen naar je aanbieding te leiden. Als je CTA’s niet effectief genoeg zijn in het vangen van de aandacht van je bezoeker en ze tot klikken brengen maakt het de aanbieding nutteloos. Maar wat zijn nou goede aantrekkelijke Call To Actions? Ben jij een startup en opzoek naar inspiratie voor jouw CTA’s waarmee je jouw conversie verhoogt? Ik heb door middel van een best practise analyse de beste basis designtips voor je op een rijtje gezet.

WAT IS EEN CALL TO ACTION?

Een Call To Action is een tekst of afbeelding in de vorm van een knop dat de bezoeker uitdaagt direct een bepaalde handeling uit te voeren. Deze ‘actie’ die je jouw gebruiker wilt laten doen kan van alles zijn. Denk aan het nemen van een abonnement, het bestellen van een product, het inschrijven voor een nieuwsbrief, het bekijken van een filmpje of een product in een winkelmandje stoppen. Wanneer je dus op de CTA klikt linkt deze de gebruiker rechtstreeks naar een ‘bestemming pagina’ of ‘landing page’. Een goede Call To Action is bepalend voor de effectiviteit van de website en is een belangrijk onderdeel van conversie optimalisatie. Call To Action-buttons zijn er in alle vormen, maten en kleuren.

PRIMAIRE EN SECUNDAIRE CALL TO ACTIONS

Je kan CTA’s onderverdelen in primaire en secundaire Call To Actions. Primaire Call To Actions zijn knoppen met de belangrijkste acties zoals een ‘offerte aanvragen’, een ‘formulier verzenden’, iets ‘toevoegen aan het winkelmandje’ of het ‘nemen van een abonnement’. Secundaire actieknoppen hoeven iets minder op te vallen, denk aan: ‘voeg toe aan wishlisht’ of ‘vergelijk’.

OPVALLENDE KNOPPEN

Spotify maakt gebruik van grote groene of paarse knoppen met een afwijkende achtergrondkleur waardoor deze knop goed opvalt. Het is een goed voorbeeld van waarom ‘simpel’ vaak de overhand heeft boven ‘flitsend’. De vetgedrukte witte, meestal in hoofdletters, tekst domineert onze focus. Waarom hun ontwerp werkt? Is omdat ze de tekst tot een minimum beperken en hun achtergrond subtiel houden, Hun CTA’s zijn zichtbaar voor beide soorten luisteraars ‘premium’ en ‘gratis’ waardoor hun kans op nieuwe aanmeldingen wordt gemaximaliseerd.

Dat de kleur opvalt is dus belangrijk. Mensen zijn van nature visueel ingesteld. Kleur is het eerste wat je ogen registreren. Je CTA moet dus het meest opvallende element op je website zijn. Het beste is om een kleur te kiezen die in het kleurenwiel lijnrecht tegenover de basiskleur van je pagina staat. Je mag dus je actieknop niet dezelfde kleur geven als de basiskleur van je pagina. Een Call To Action die opgaat in het decor van je pagina zorgt voor minder kliks.

KLEUR, ACHTERGROND EN AFBEELDINGEN

Donkere achtergrond? Witte tekst. Witte achtergrond? Donkere tekst. Simple as that! Door voor dit design te kiezen valt Bol.com op met de teksten. Het belangrijkste staat dik gedrukt. Daarnaast kiest Bol.com ervoor om bij de acties afbeeldingen te plaatsen, dit trekt nou eenmaal de aandacht van de bezoeker. Mensen willen namelijk het product al ervaren en niet al te lang te hoeven na denken. Waar mogelijk moet de richting in de afbeelding wijzen naar de geplaatste button. Je ziet dat er door Bol.com rekening is gehouden met de richting op de afbeelding.

KNOPPEN

Ghost buttons zijn een don’t! Maak dus niet zoals de rechter afbeelding: ‘een woord met een lijntje eromheen’. Unbounce deed de test op zijn website en vergeleek deze twee versies met elkaar: de orginele versie met een dikke vette actieknop en een variant met een ghost button. Uit de click heatmaps blijkt dat in de ghost button-versie 600% meer kliks zijn op elementen die niet aanklikbaar zijn. Dit komt omdat het niet duidelijk is wat de echte actieknop is. Ook blijkt dat mensen er veel langer over doen om te klikken op een ghost button dan op een normale knop. Het betekent ook niet dat je zoals in de jaren ’90 weer bevels en schaduwen moet gebruiken. Maar een dikke, vette, duidelijke actieknop zorgt voor meer verkoop.

VISUAL CUES

Een Visual Cue is letterlijk een visuele aanwijzing die de gebruiker vraagt om aandacht. Bijvoorbeeld: een opvallende dikke pijl, die trekt meer aandacht naar een Call To Action-button. Veel designers vinden de pijl niet heel mooi, maar als je de test blijkt dat het wel werkt. Het is dus van belang dag je een Cue maakt die bij het uiterlijk past maar wel opvalt.

SECUNDAIRE CALL TO ACTION

Bij Zalando is het meteen duidelijk wat de primaire actieknop is. Het is belangrijk dat je bij deze knop geen aandacht afsnoept van de primaire Call To Action. Maak hem kort en krachtig en in dezelfde kleur als de achtergrond.

CONCLUSIE

Voor de primaire CTA’s is het belangrijk dat je opvallende actieknoppen maakt dat je kiest aan de hand van het kleurenwiel die rechtover de basiskleur van je pagina staat. Zorg er dan voor dat de tekst in de button vetgedrukt en wit zijn. En houdt je achtergrond subtiel. Wanneer je een tekst hebt als ‘tot 50% korting’ en je wilt dat die opvalt maar er hoort nog een kleine toevoeging bij, zorg er dan voor dat het belangrijkste, dus ‘tot 50% korting’, dik gedrukt is. Zet er een afbeelding bij, hierdoor ervaart men het product en hoeft hij niet te lang na te denken, en laat waar mogelijk de richting in de afbeelding wijzen naar de geplaatste button. Maak geen gebruik van ghostbuttons. Zet visual cues op de website bij de buttons dat bij het uiterlijk past maar wel opvalt. Voor de secundaire CTA’s is het belangrijk dat je deze niet te opvallend maakt, en dat de primaire opvalt. Ik hoop je hiermee voldoende inspiratie op te hebben gedaan voor de basis stappen van goede Call To Actions op jouw webiste.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *