5 Ontwerptechnieken voor betere CTA-knoppen
Wanneer we de meeste websites bezoeken, hebben we vaak een doel voor ogen. Om dat doel te bereiken, zijn er meestal een aantal stappen die we moeten nemen en de eerste stap begint met klikken op een CTA-knop (call to action). Denk aan de laatste keer dat u zich aanmeldde voor een service of een app downloadde, waarschijnlijk bevatte het proces een interactie met een call-to-action-knop.
CTA-knoppen zijn de knoppen die u op uw website gebruikt om gebruikers naar uw doelconversie te leiden. Het hele punt van een CTA is om bezoekers van uw site naar een gewenste manier van handelen te leiden. Enkele veel voorkomende voorbeelden van CTA's zijn:
- "Start een proef"
- "Download de app / boek / gids"
- "Meld je aan voor updates"
- "Krijg een consultatie"
Vandaag bespreken we 5 praktische tips voor het ontwerpen van CTA-knoppen in combinatie met de beste voorbeelden uit de praktijk, zodat u de meeste klikken op uw bestemmingspagina krijgt.
1. Knop Visueel Opvallend
Uw knopkleur is belangrijk. Als u in dit artikel slechts een enkel advies wilt opnemen, moet dit dit zijn: "Overweeg uw CTA-knopkleur". Met behulp van kleur kun je bepaalde knoppen meer laten opvallen dan andere door ze meer visuele aandacht te geven.
Gebruik contrasterende kleuren
Contrasterende kleuren werken het beste voor CTA-knoppen. Met contrasterende kleuren is het mogelijk opvallende knoppen te maken die eruit springen. U moet een contrasterende kleur selecteren in het kleurenschema van de webpagina, terwijl u nog steeds past in het algemene ontwerp. Overweeg het onderstaande Firefox-voorbeeld. De groene kleur van de CTA-knop op de Firefox-pagina springt van de pagina af en krijgt meteen aandacht van de gebruiker.
De Firefox CTA-knop is heldergroen en valt goed op een donkerblauwe achtergrond
Een andere opvallende CTA-knop is te vinden op de Hipmunk-startpagina. Een fel oranje knop vangt de aandacht van de gebruiker en definieert de volgende mogelijke actie.
Negatieve ruimte
Niet alleen is de kleur belangrijk voor een CTA, maar ook de hoeveelheid ruimte eromheen. Whitespace (of negatieve spatie) creëert essentiële ademruimte en scheidt uw CTA-knoppen van andere elementen in uw gebruikersinterface. De oude Dropbox-startpagina was een goed voorbeeld van het gebruik van negatieve ruimte om hun primaire CTA-pop te maken. De blauwe "Meld je gratis" CTA valt op tegen de lichtblauw van de achtergrond.
2. Actiegerichte tekst
Het schrijven van tekst voor uw call-to-action knop die uw bezoekers dwingt om de juiste actie te ondernemen, is geen gemakkelijke taak. Gelukkig zijn er een paar dingen die je hierbij kunnen helpen:
Begin met een werkwoord
U moet vage en saaie woorden zoals "Enter voor meer informatie" voor uw CTA-knoppen vermijden en ze vervangen door meer actiegerichte woorden zoals "Start uw gratis proefperiode" of "Krijg nu korting." Evernote heeft een van de meest voorkomende, maar nog steeds actiegerichte teksten voor hun CTA-knop.
Begin met een werkwoord zoals "Start", "Get" of "Join"
Een interessanter voorbeeld is te vinden op de startpagina van Treehouse. De CTA op Treehouse-website zegt niet alleen "Start een gratis proefversie"; het zegt "Claim Your Free Trial." Het verschil in bewoording lijkt misschien subtiel, maar "Claim Your Free Trial" klinkt veel persoonlijker.
Gebruik korte en eenvoudige tekst voor knoppen
Geef exact aan wat de bezoeker krijgt als hij op de CTA klikt. In het ideale geval wilt u dat de knoptekst tussen de twee en vijf woorden blijft.
Waardepropositie toevoegen
Waarschijnlijk heb je gemerkt dat veel knoppen de woorden "gratis" in hun exemplaar hebben en dat is geen toeval, maar het gebruik van dergelijke woorden in knopkopie benadrukt de waardepropositie van je aanbod. Probeer dus bij het schrijven van je CTA een manier te vinden om één (of alle) 3 overtuigende woorden te integreren:
- Gratis
- Bonus
- ogenblikkelijk
Laat me je een voorbeeld geven: een grote angst die gebruikers hebben voordat ze zich ergens voor inschrijven, is dat het vervelend is om hun abonnement op te zeggen als ze de service niet leuk vinden. Netflix neemt die angst weg met behulp van de belofte "Altijd annuleren" direct naast de CTA "Join voor een maand".
Creëer een gevoel van urgentie
Het creëren van een gevoel van urgentie in uw CTA-knoppen kan een aantal indrukwekkende klikfrequenties opleveren. U kunt bijvoorbeeld knoptekst gebruiken zoals 'Aanmelden en 25% korting krijgen op alleen vandaag!'. Als iemand de tijd neemt om een beslissing te nemen, wil hij zijn aanbod graag claimen.
Handige tekst
Soms wilt u wellicht een extra regel met informatie toevoegen aan uw knoptekst. Deze praktijk komt vaak voor met gratis proefknoppen. Een gratis testknop kan bijvoorbeeld zeggen "30 dagen proefversie, geen creditcard" in kleinere tekst onder de CTA-knop met de tekst "Start uw gratis proefperiode". Deze extra tekst zou het besluitvormingsproces moeten vereenvoudigen.
3. Maak het zichtbaar zonder te scrollen
De plaatsing van uw call-to-action-knoppen is net zo belangrijk als de kleur en het bericht. Een CTA-knop moet zich op een gemakkelijk te vinden plaats bevinden die organisch uit de stroom van de webpagina volgt. U moet proberen uw CTA-knop boven de vouw te houden, zodat gebruikers deze nooit missen. Idealiter zou uw CTA-knop een van de eerste dingen moeten zijn die een gebruiker op de pagina ziet wanneer deze wordt bereikt. De aanvullende informatie moet onder de vouw blijven, waar deze toegankelijk blijft maar niet afleidt.
4. Grote knop met afgeronde hoeken
Bedenk hoe het ontwerp betaalbaarheid communiceert. Hoe begrijpen gebruikers het element als een knop? Gebruik vorm en grootte om het element op een knop te laten lijken.
Maak het groot genoeg
De CTA moet groot genoeg zijn om van een afstand te kunnen zien, maar niet zo groot dat de aandacht wordt afgeleid van de hoofdinhoud op de pagina
Gebruikersknoppen met afgeronde hoeken
De vorm van de knop kan een grote rol spelen. Het is een bewezen feit dat afgeronde hoeken zijn gemakkelijker voor de ogen. In de test van ContentVerve deed een afgeronde groene knop het beter dan een blauwe rechthoek.
5. Minder is meer als het gaat om keuzes
Houd er rekening mee dat als u wilt dat uw klanten actie ondernemen, u hen moet helpen door alle mogelijke obstakels van hun weg te halen. Wanneer gebruikers te veel keuzes worden gegeven, raken ze vaak in de war. Het is dus beter om de potentiële klanten slechts één optie aan te bieden.
Als u nog steeds meerdere knopkeuzes wilt gebruiken, wijs dan één keuze boven andere toe om gebruikers te helpen een specifiek pad te vinden. Een goed voorbeeld is Evernote: zodra u een onderste deel van de startpagina van Evernote bereikt, is het vrij duidelijk dat een voorkeurskeuze "gratis aanmelden" is, terwijl de CTA voor gebruikers om plannen te vergelijken, zeer veel secundair is.
Conclusie
Voor een effectief CTA-ontwerp moet u meer in overweging nemen dan alleen de knop zelf. Het is ook belangrijk om na te denken over achtergrondkleur, omringende afbeeldingen, omringende tekst en vele andere elementen. Het Basecamp-team begrijpt het belang van deze elementen en heeft een perfecte lay-out ontworpen voor hun bestemmingspagina. Zelfs de microcopy die ze gebruiken onder de CTA-knop ("4.714 bedrijven hebben zich deze week aangemeld!") Vergroot het vertrouwen van potentiële klanten.
Ik hoop dat de tips in dit artikel u helpen om een betere call-to-action-knop voor uw website te maken. Het laatste moment is het belang van testen: als u besluit om een CTA opnieuw te creëren op uw site, vergeet dan niet om te testen of het werkt voor uw doelgroep.