Så skapar du en bra “call-to-action”-knapp

Knappar kan vara bland de viktigaste komponenterna som en webbplats har. Som så mycket annat gällande UX så märks bra knappar inte av men dåliga sådana kan förstöra en för övrigt bra webbplats. Det blir extra viktigt att tänka på knapparna när du dessutom vill att användarna skall använda de för att genomföra en viktig handling. När man skapar en handlingsknapp eller “call-to-action”-knapp så finns det vissa saker man kan ha i bakhuvudet när man designar de för att uppnå maximal effekt:

1. Välj orden nogrannt
   Knapparna skall hjälpa besökarna att genomföra en handling. Det blir extra viktigt att tänka på vad för copy knapparna har då du och dina besökare förmodligen använder er av olika ord. Undersök vilket vokabulär dina besökare använder sig av och använd dig av dessa trigger ord. Genom att du använder dig av besökarnas ord så minskas handlingsfriktionen då en förståelse för vad som förväntas uppnås snabbare.

   Amazon.com & Amazon.co.uk har förstått vikten av att anpassa språket

    

2. Positionering
   Ofta uppnår du en högre nytta genom att positionera knappen nära det innehåll som den relaterar till.  Nedan finns ett exempel från Virgin Money som har en effektiv “call-to-action” knapp placerad i samband med innehållet. Man har dessutom lagt tonvikt på att banta bort irrelevant information vilket ökar knappens närvaro på sidan.
   
   På bilden nedanför har Virgin Money valt att lägga “call-to-action” knappen  i höger kolumn vilket visserligen funkar då sidan fortfarande är relativt ren i sin design och besökarna lär lägga märket till knappen.
   
   Men sätt dig i användarnas sits. Om du är på följande sida och skall beställa ett nytt bankkort är sannolikheten stor att du skrollar ner för att ta del av hela prislistan. Vad händer? Jo, “call-to-action” knappen försvinner ur bild och Virgin tappar kunder på att inte låta knappen flyta med neråt eller placera en till knapp längre ner under innehållet.
   
   Självklart går det att skrolla upp och hitta knappen igen men försvinnandet av den skapar en handlingsfriktion och därmed en förlust av potentiella kunder.
3. Välj rätt färg
   Som ni redan vet är användandet av färger väldigt väldigt viktigt då färger påverkar användarna mer än vad vi tror. En “call-to-action” knapp bör synas ordentligt, det är trots allt denna knapp som skall få använadarna att genomföra en handling. Lyser den inte så finns det en risk för att användarna kommer att missa den. Genom att reservera speciella (och kanske till och med från resten av sidan) avvikande färger så får du användarna att lägga märke till vad som är viktigt.

   LinkedIn använder sig av en gul färg för att signalera viktiga "call-to-action" knappar

   Akta dig dock för att använda en färg som smälter in alltför mycket på sidan. Genom att reservera en speciell färg åt viktiga knappar så förenklar man för användarna att veta vad de skall trycka på. Genom att använda sig av likadana färger ger en motsatt effekt.

   Blått är inte alltid bra

4. STORLEKEN
   Vad folk än säger så har storleken betydelse. Det finns till och med ett matematiskt bevis som bevisar att tiden det tar att upptäcka ett objekt är direkt härlett till objektets storlek, se Fitt’s lag. Knappens storlek kommunicerar även knappens betydelse och hjälper således besökarna att prioritera rätt.

   Firefox förstår vikten av storlek och skalar bort det mesta på sidan och låter knappen ta plats

Sammanfattningsvis kan man säga att en bra design hjälper användarna att hitta och prioritera rätt. Detta gäller den övergripande designen såväl som för “call-to-action”-knapparna. Har du funktionalitet på sidan som du lägger extra stor prio på så se till att sänka handlingsfriktionen! Låt den ta plats, kommunicera betydelsen med färger, lägg den på rätt ställe och se till att skräddarsy copyn så ska du nog se att konverteringen kommer att börja ticka upp.

Så skapar du en bra “call-to-action”-knapp is a post from: Adam Hassan | Tankar om digitala angelägenheter