Knoppen zijn gemaakt om op te klikken. Een klik kan de gebruiker een stap dichterbij brengen richting zijn doel, maar een klik kan ook een conversie betekenen. Daarom is het belangrijk dat een knop aantrekkelijk oogt en uitnodigt om op gedrukt te worden. Maar hoe maak je nou écht een goede knop? In een paar simpele stappen wordt in deze blog uitgelegd hoe je knoppen maakt die onweerstaanbaar zijn om op te klikken.
Deze blog is ontstaan uit een situatie die goed laat zien hoe het juist niet moet. Onlangs ben ik verhuisd. Tijdens de verhuizing heb ik één van mijn planten te lang buiten laten staan waardoor de plant het niet heeft overleefd. Er moest dus een nieuwe komen. Heel veel is online te bestellen, zo ook planten. Na eindelijk de geschikte plant gevonden te hebben was ik slechts één klik verwijdert van een succesvolle aankoop. Maar ineens dook een moment van twijfel en verwarring op. Laten we eens goed inzoomen op het element dat mede bepalend is voor het slagen van mijn doel.
Bekijk de afbeelding van deze Citroenboom. De button is duidelijk flets te noemen. Het contrast van de tekst met de achtergrond is te laag en de achtergrondkleur is op zichzelf te licht om een conversie te versieren. Doordat de kleur van de knop erg flets is, geeft het de indruk dat de knop niet actief is. Situaties waarbij dat kan voorkomen is bijvoorbeeld als er geen juist aantal is geselecteerd of als het product niet meer beschikbaar is. Beide gevallen waren in deze situatie niet van toepassing. Maar nu is natuurlijk de vraag hoe in dit geval de button geoptimaliseerd kan worden.
Kleur
Steeds meer neemt mobiel een belangrijke plaats in als we kijken naar het conversiepercentage op websites. Juist om die reden is het belangrijk om een knop te creëren die ook op de mobiel fijn werkt en uiterst effectief is.
Als we kijken naar de kleur van de button is het in eerste instantie zaak dat hij goed opvalt maar natuurlijk ook goed blend met de rest van de huisstijl van de website. Maar wat is dan de juiste kleur? Daar is niet direct antwoord op te geven. Factoren als cultuur, geslacht en de context kunnen hierin een belangrijke rol spelen.
Iedere kleur roept bij mensen een bepaalde emotie op en spelen een rol bij het uitlokken van bepaalde acties of het weren van bepaalde gevoelens. Kleuren hebben daardoor direct invloed op de beslissingen van de gebruiker, dit stelt je als UX’er in staat om de gebruiker door de website te leiden. De kleuren die we veel zien bij CTA’s zijn in veel van de gevallen groen, blauw, geel en oranje. Maar als UX’er die zich beweegt in de wereld van CRO adviseer ik om specifiek voor jouw groep gebruikers het zelf te testen.
De grootte van je CTA
Een CTA moet natuurlijk goed te zien zijn en groot genoeg om op te klikken. Maar hoe weten we of de knop goed is? Vanuit de mobile first gedachten moet een knop minstens een vingertop groot zijn. Een vingertop is ongeveer 10mm. De toets op je toetsenbord is 15mm en een penny is 18mm. Het advies luidt om tussen de 15mm en 18mm te blijven. Als we 17mm aanhouden dan wordt de button ongeveer 48 pixel wat een prima grootte is voor een duidelijke CTA. Aangezien we in het medialandschap te maken hebben met verschillende apparaten met verschillende schermgrootte kan het per apparaat wel eens afwijken wat de maat van de button exact is. Houd bij afwijkende afmetingen rekening met witruimte tussen andere component op de site. Een button die bedolven wordt onder meerdere elementen valt niet snel op en de kans dat je op andere elementen drukt is groter.
Interactie en animatie
Dit vindt vaak na een click plaats en dan kan het doel/conversie al zijn behaald. Vooral bij mobiel omdat je daar geen hover hebt en de gebruiker toch de bevestiging wil geven dat er interactie heeft plaatsgevonden. Het maken van meer aantrekkelijke buttons die reageren op input van de gebruikers zorgen wel dat interactie wordt beloont en maak de UX beter met een grotere kans op clicks/conversie in het algemeen. Er zijn verschillende ‘states’ (Nederlands: situaties). Voor iedere situatie moet een uitwerking ontworpen worden.
De default button is de ‘standaard’ weergave. In die situatie heeft de button de standaard stijl die de designer beoogd had voor de button. Het hover-effect treedt op als met de cursor over de button wordt gegaan. Hierdoor is het voor de gebruiker direct duidelijk dat erop geklikt kan worden. Een button die transparant is, geeft aan dat het in een specifieke setting niet op geklikt kan worden. De button is er wel maar niet actief. Een button in een active state geeft de bevestiging dat er interactie is geweest. De loading state is niet altijd vanzelfsprekend maar wel zeer wenselijk voor situaties waarbij de laadtijd langer duurt dan gebruikelijk is. Het geeft de gebruiker namelijk de bevestiging dat het druk is en/of het proces bezig is.
Iconen
Iconen zijn steeds belangrijker in gebruikersinterfaces. Iconen geven visueel objecten en acties weer. Iconen kunnen worden ingezet om schermruimte te besparen en gebruikers te begeleiden waar ze naartoe moeten. Maar welk icoon gebruik je dan precies voor een goede CTA? Dat ligt puur aan de actie die achter de button schuilt. Als we het hebben over een toevoegen-aan-winkelwagen-knop is een plusje of een winkelwagen icoon geschikt. Je zou zelfs kunnen overwegen om de tekst ‘winkelwagen’ achterwege te laten aangezien een winkelwagen icoon genoeg uitlegt over de actie van de CTA. Maar test het vooral op de groep gebruikers waarmee je te maken hebt op de betreffende website!
In het menu wordt gebruik gemaakt van iconen om schermruimte te besparen.
De pijltjes bij de keuzehulp geeft duidelijk een actie aan.
Conclusie
Terug naar mijn Citroenboom met de bovengenoemde tips in ons achterhoofd. Om in de huisstijl te blijven, kunnen we een bordeaux rode kleur nemen die goed opvalt tegen de achtergrond. Vervolgens nemen wordt de kleur groen die ook gebruikt wordt om de geslaagde actie te accentueren. Icons kunnen in dit geval gebruikt worden om de boodschap te ondersteunen.
Default state
Active state
Nu je weet hoe je een goede CTA kan creëren is het belangrijk dat je ook weet op welke plekken je deze plaatst. Wil je nog meer tips? Lees hier meer over waar je CTA’s precies moet plaatsen. ‘Beste plek voor een CTA’
