Call to Action Knoppen Richtlijnen, beste praktijken en voorbeelden

Oproep tot actieknoppen op websites worden vaak verwaarloosd. Ontwerpers begrijpen soms niet precies wat een goede call-to-action-knop maakt die aantrekkelijk is en aansluit bij het algehele ontwerp. Maar call-to-action-knoppen zijn te belangrijk om te kunnen worden ontworpen zonder enig idee van wat hen effectief maakt. Het belangrijkste punt van een call-to-action-knop is immers om bezoekers naar toe te lokken do iets.

Het is belangrijk om op zijn minst een basiskennis te hebben van hoe kleur, schaal, taal en andere factoren de conversieratio van een call-to-action-knop beïnvloeden. De concepten hier zijn niet ingewikkeld, maar ze vergen wel een beetje voorzichtigheid en planning om de meest effectieve call-to-action-knoppen te creëren die mogelijk zijn binnen een bepaald ontwerp. Lees verder voor meer informatie over elk van deze punten en meer.

Het doel van de "Oproep tot actie" -knoppen

Oproep tot actieknoppen kunnen verschillende functies dienen. Ten slotte, “oproep tot actie” is echt een beetje vaag. Het betekent alleen dat het hoofddoel is om een bezoeker naar uw site te krijgen doe iets. Dat iets een product aan hun winkelwagentje zou kunnen toevoegen, iets zou kunnen downloaden, informatie zou kunnen vragen, of zo ongeveer alles.

Omdat call-to-action-knoppen zulke gevarieerde doelen hebben, moet er veel aandacht worden besteed aan wat de knop beoogt te bereiken. Het type site, de doelmarkt en de gewenste actie kunnen allemaal een rol spelen bij het ontwerpen van een call-to-action-knop.

Typen "Call to Action" -knoppen

Er zijn een paar verschillende soorten call-to-action-knoppen. Hoewel elk type is bedoeld om bezoekers een bepaalde actie te laten uitvoeren, kan die actie aanzienlijk variëren. Hieronder staan de meest voorkomende typen call-to-action-knoppen, gebaseerd op de actie die ze u willen laten uitvoeren.

1. Toevoegen aan winkelwagen Knoppen

E-commercesites gebruiken over het algemeen een aantal call-to-action knoppen, maar de meest gebruikte is de “Voeg toe aan winkelmandje” knop. Deze knoppen verschijnen meestal op afzonderlijke productpagina's. Hun doel is om klanten te verleiden om een item te kopen. Veelvoorkomende ontwerpelementen in knoppen voor toevoegen aan winkelwagentje bevatten eenvoudige bewoordingen (zoals “Voeg toe aan winkelmandje” of “Aan tas toevoegen” of “Koop nu“) en het gebruik van pictogrammen (meestal een tas of kar).

2. Download knoppen

Downloadknoppen lijken op het toevoegen aan winkelwagentjes omdat ze proberen een bezoeker te verleiden een object in te nemen. In het geval van downloadknoppen kiezen veel ontwerpers ervoor om meer informatie op te nemen dan andere soorten knoppen (zoals versiegegevens of downloadgrootte).

3. Proefknoppen

Sommige sites proberen hun bezoekers te verleiden om hun aanbod te proberen, meestal in de vorm van een gratis proefversie. Dit kan een gratis download of een gratis account zijn, afhankelijk van de specifieke site. Sommige sites gebruiken de “minder is meer” filosofie en de taal op hun knoppen tot een minimum te beperken, terwijl anderen graag meer informatie willen over wat de proef inhoudt.

4. Meer informatie Knoppen

Meer informatie Knoppen worden meestal gebruikt aan het einde van een blok met teaser-informatie (vaak op de startpagina). Deze knoppen zijn meestal eenvoudig, maar vaak te groot om de aandacht van bezoekers te trekken.

5. Aanmeldingsknoppen

Inlogknoppen verschijnen het vaakst in twee verschillende versies. Het eerste type is meestal direct gekoppeld aan een aanmeldingsformulier. Het tweede type wordt meestal op een vergelijkbare manier gebruikt “Voeg toe aan winkelmandje” knoppen, als een manier voor gebruikers om een service of account aan te schaffen of aan te melden, voordat ze daadwerkelijk een aanmeldingsformulier bereiken.

Er zijn andere typen call-to-action-knoppen, maar deze zijn de meest voorkomende. Richtlijnen die van toepassing zijn op bovenstaande, zijn waarschijnlijk ook van toepassing op elk ander type call-to-action-knop die u misschien ontwerpt.

De ruimte effectief gebruiken

U wilt dat uw call-to-action-knoppen opvallen in de omliggende inhoud en echt de aandacht van uw sitebezoekers trekken. Daartoe moet u gebruik maken van de negatieve ruimte rond die knoppen. Neem lege ruimte op tussen uw inhoud en uw call-to-action-knop. Hoewel dit minder belangrijk (en minder vaak) is op sommige knoppen, zoals knoppen voor toevoegen aan winkelwagentje, met anderen, zoals die voor meer informatie, werkt u beter met meer ruimte.

Het is belangrijk om de hoeveelheid negatieve ruimte die je rond de knoppen hebt in evenwicht te brengen met de grootte van de knoppen zelf. Het gaat over proportie. U wilt dat uw knop, de ruimte eromheen en de omliggende inhoud er allemaal zo uitzien, zelfs met verschillen in grootte. Misschien moet je een beetje met de dingen ruziën om ze er goed uit te laten zien.

Enkele richtlijnen:

Zorg dat er voldoende ruimte rond je knop is zodat deze niet rommelig wordt
Overweeg principes zoals de regel van derden of de gulden snede bij het bepalen van hoeveel ruimte u wilt opnemen
Negatieve ruimte geeft uw call-to-action-knopruimte om u te onderscheiden van uw andere inhoud en onderscheidt deze

Grootte en kleur

Hoe groot uw call-to-action-knoppen zijn, is erg belangrijk. Een knop die te groot is, zal alles eromheen overmeesteren. Een knop die te klein is, raakt verloren in de shuffle van alle andere inhoud op een pagina. U wilt dat uw knop groot genoeg is om op te vallen zonder het ontwerp te overbelasten.

Kleur kan met groot effect worden gebruikt om de grootte van je knoppen in balans te houden. Kies voor grotere knoppen een kleur die minder prominent is in uw ontwerp (maar nog steeds opvalt de achtergrond). Voor een kleinere knop, kunt u een helderdere, contrasterende kleur kiezen om de knop echt te laten knallen. Zorg er in beide gevallen voor dat de kleur die u gebruikt de knop van elkaar scheidt zonder te botsen met het algemene ontwerp van de site.

Enkele richtlijnen:

Uw call to action-knoppen moeten idealiter de grootste knoppen op een bepaalde pagina zijn
Gebruik contrasterende kleuren om kleinere knoppen meer te laten opvallen
Gebruik minder verschillende kleuren om te grote knoppen beter te laten passen
Je roept de actieknoppen op om de aandacht te trekken zonder je ontwerp te overbelasten

Taal

De exacte bewoording die u op uw call-to-action-knoppen wilt gebruiken, kan een groot effect hebben op de conversie. Vergelijken “Koop nu” met “Voeg toe aan winkelmandje“. De ene is veel urgenter dan de andere. Of wat dacht je van “Probeer het gratis” met “Gratis proefversie“? De ene is veel punchier dan de andere en valt op.

De taal die u gebruikt op uw call to action-knoppen moet zo rechttoe rechtaan en eenvoudig mogelijk zijn. U wilt dat bezoekers in één oogopslag weten wat ze precies krijgen als ze op een knop klikken. Als ze het in twijfel trekken, betekent dit dat ze zijn onderbroken, wat kan leiden tot lagere conversiepercentages.

Vergeet ook je lettergroottes niet. De tekst op uw call-to-action-knop moet groot en vet zijn, passend bij de grootte en kleur van de knop zelf. Zorg ervoor dat er voldoende contrast is en dat de tekst gemakkelijk te lezen is.

Enkele richtlijnen:

Gebruik eenvoudige, directe taal
Gebruik een groot, vet lettertype op de knop voor de hoofdtekst
Zorg ervoor dat de taal duidelijk om een specifieke actie vraagt

Creëer urgentie

U wilt dat bezoekers op uw site de gewenste acties uitvoeren met zo min mogelijk aandacht. Hoewel u uw bezoekers niet wilt misleiden, hoe meer mogelijkheden u hen geeft om te stoppen en na te denken over wat ze doen, hoe meer mogelijkheden u hen geeft om te zeggen “Nee”.

U wilt dat uw knoppen de indruk geven dat ze meteen moeten handelen. U wilt hen aanmoedigen om onmiddellijk een beslissing te nemen, op het juiste moment. Hoewel dit niet werkt voor elke call-to-action-knop (met name die voor het kopen van items met een hoog ticket), voor goedkope of gratis acties, is het wenselijk dat bezoekers met weinig voorzichtigheid klikken.

Enkele richtlijnen:

Moedig uw bezoekers aan onmiddellijk actie te ondernemen
Geef uw bezoekers geen reden om te pauzeren
Hoewel urgentie belangrijk is, misleid uw bezoekers dan op geen enkele manier

Geef extra informatie

Gebruik waar nodig de call-to-action-knoppen om bezoekers extra informatie te geven over wat ze te zien krijgen als ze op de knop klikken. Dit wordt meestal gezien met proefknoppen of downloadknoppen. Veelvoorkomende voorbeelden van extra informatie zijn de duur van een gratis proefperiode of de downloadgrootte van een bestand. Versiegegevens worden ook vaak gezien.

Let er bij het opnemen van extra informatie op dat u de focus op de daadwerkelijke call-to-action moet houden. Zorg ervoor dat de tekst voor de taal die bezoekers uitnodigt om te acteren het meest prominent aanwezig is, waarbij andere informatie veel minder zichtbaar is.

Enkele richtlijnen:

Neem alleen extra informatie op als dit bijdraagt aan de gebruikerservaring
Extra informatie is alleen geschikt voor sommige typen call-to-action-knoppen, met name download- of probeerknoppen
Zorg ervoor dat de belangrijkste call-to-action nog steeds de meest prominente tekst op uw knop is

Prioriteren

Het is belangrijk om de call-to-action-knoppen op uw pagina te prioriteren als er meer dan één is. Dit kan op verschillende manieren worden gedaan, maar de meest voorkomende zijn door het gebruik van kleur en grootte.

Gebruik kleur om de belangrijkste knop op een pagina te markeren, of om de minder belangrijke minder prominent te laten lijken. Of gebruik de grootte om de belangrijkste knop op te laten vallen (door deze groter te maken) en de minder belangrijke te de-benadrukken.

Pictogrammen en afbeeldingen

Het opnemen van visuele aanwijzingen in uw call-to-action-knoppen kan ook helpen de conversieratio's te verhogen. Een pictogram van een winkelwagentje op een “Voeg toe aan winkelmandje” knop, bijvoorbeeld, of een pijl op een downloadknop zijn beide goede voorbeelden. Denk ook aan unieke pictogrammen om te gebruiken, maar zorg ervoor dat het pictogram bijdraagt aan de gebruikerservaring door te verduidelijken waarvoor de knop is bedoeld en geen verwarring toevoegt.

Enkele richtlijnen:

Zorg ervoor dat de pictogrammen die u gebruikt, de betekenis van uw knop verduidelijken, in plaats van deze te verwarren
Eenvoudig herkenbare pictogrammen kunnen onmiddellijk betekenis aan uw bezoekers geven
Wees niet bang om minder vaak gebruikte pictogrammen te gebruiken, zolang de betekenis ervan nog duidelijk is

Voorbeelden

Hier zijn een paar voorbeelden van geweldige call-to-action-knoppen. Hoewel ze niet allemaal perfect voldoen aan de bovenstaande richtlijnen, voldoen ze aan voldoende criteria om als groot te worden beschouwd.

Livestream - Het differentiëren van de knoppen "Nu kopen" (voor betaalde opties) en "Aanmelden" (voor gratis opties) is een goede strategie.

Windows 7 - De grote, groene "Get Windows7" -knop is eenvoudig voor bezoekers te herkennen.

Fileshare HQ - De felgroene knop valt hier echt op tegen de witte achtergrond.

Logboek - Het gebruik van verschillende kleuren voor de knoppen "Download" en "Kopen" zorgt voor een onderscheid en geeft voorrang aan de knop "Kopen".

TasteBook - Deze knop maakt veel gebruik van een pictogram en gebruikt grotere, vette tekst om op te vallen.

GoodBarry - Nog een felgroene call-to-action knop.

Lifetree Creative - Als u hetzelfde lettertype van de body-kopie naar de call-to-action-knop gebruikt, krijgt u een gevoel van samenhang.

The Resumator - Een knalrode call-to-action knop met vetgedrukte letters staat op tegen de blauwe achtergrond.

Notepod - Een goed voorbeeld van het opnemen van extra informatie in een call-to-action-knop.

Inkd - Een goed voorbeeld van prioriteit toekennen aan knoppen met grootte.

Elegante thema's - Een ander uitstekend voorbeeld van het gebruik van kleur om op te vallen zonder te botsen met de omliggende ontwerpelementen.

Zendesk - Een ander geweldig voorbeeld van het laten opvallen van een knop met behulp van kleur.

Storenvy - Een ronde knop is onverwacht en valt op, vooral als deze wordt omringd door een witte rand.

Bara'Mail - Soms werkt een knop die erin past beter in uw algehele siteontwerp, vooral wanneer de actie minder urgent is.

Meer middelen

Oproep tot actieknoppen: voorbeelden en praktische tips - Van Smashing Magazine
Goede call-to-action knoppen - van UX Booth
Oproep tot actieknoppen: doet de grootte ertoe? - Van Get Elastic
10 Technieken voor een effectief middel “Oproep tot actie” - Van Boagworld
5 Tips voor het creëren van een effectieve call to action-knop - vanuit SitePoint