5 Designtekniker för bättre CTA-knappar
När vi besöker de flesta webbplatser har vi ofta ett mål i åtanke. För att nå det målet är det vanligtvis en rad steg vi behöver ta och det första steget börjar med att klicka på en CTA (call to action) -knapp. Tänk på sista gången du anmälde dig till en tjänst eller laddade ner en app, vilket innebar att det var en interaktion med en uppmaningsknapp.
CTA-knapparna är de knappar du använder på din webbplats för att styra användarna mot din målkonvertering. Hela punkten hos en CTA är att rikta besökarna till en önskad handling. Några vanliga exempel på CTA:
- "Starta en rättegång"
- "Ladda ner appen / boken / guiden"
- "Registrera dig för uppdateringar"
- "Hör ett samråd"
Idag diskuterar vi 5 bästa metoder för att utforma CTA-knappar tillsammans med de bästa verkliga exemplen som hjälper dig att få ut så många klick som möjligt av din målsida.
1. Visuellt slående knapp
Din knappfärg är viktig. Faktum är att om du bara tar en enda bit av råd från den här artikeln bör det vara så här: "Tänk på din CTA-knappfärg". Med hjälp av färg kan du få vissa knappar att sticka ut mer än andra genom att ge dem mer visuell framträdande.
Använd kontrastfärger
Kontrastfärger fungerar bäst för CTA-knappar, med kontrastfärg är det möjligt att skapa slående knappar som sticker ut. Du bör välja en kontrasterande färg från webbsidans färgschema, samtidigt som den passar in i den övergripande designen. Tänk på Firefox-exemplet nedan. Den gröna färgen på CTA-knappen på Firefox-sidan hoppa av sidan och genast får användarens uppmärksamhet.
Firefox CTA-knappen är ljusgrön och sticker ut väl på en mörkblå bakgrund
En annan iögonfallande CTA-knapp finns på Hipmunk hemsida. En ljus orange knapp tar upp användarens uppmärksamhet och definierar nästa möjliga åtgärd.
Negativt utrymme
Färgen är inte bara viktig för en CTA, men också mängden utrymme runt den. Whitespace (eller negativt utrymme) skapar ett viktigt andningsrum och skiljer dina CTA-knappar från andra element i ditt användargränssnitt. Den gamla Dropbox-hemsidan var ett bra exempel på att använda negativt utrymme för att göra sin primära CTA-pop. Den blå "Sign up for free" CTA står ut mot bakgrundens ljusa blues.
2. Actionorienterad text
Skriva text för din knapp-till-action-knapp som kommer att tvinga dina besökare att göra rätt åtgärd är inte en lätt uppgift. Lyckligtvis finns det några saker som kan hjälpa dig att göra det:
Börja med ett verb
Du bör undvika vaga och tråkiga ord som "Ange mer information" för dina CTA-knappar och ersätt dem med mer actioninriktade ord som "Starta din kostnadsfria försök" eller "Få rabatt nu". Evernote har en av de vanligaste, men arbetar fortfarande med actionorienterade texter för deras CTA-knapp.
Börja med ett verb som "Start", "Get" eller "Join"
Ett mer intressant exempel finns på Treehouse hemsida. CTA på Treehouse hemsida säger inte bara "Starta en gratis test"; Det står "Åtgärda din gratis prov". Skillnaden i formulering kan verka subtil, men "Hävda din gratis prov" låter mycket mer personlig.
Använd kort och lätt att förstå text för knappar
Var noga med att ange exakt vad besökaren kommer att få om de klickar på CTA. Helst vill du hålla knapptext till mellan två och fem ord.
Lägg till värdeproposition
Förmodligen har du märkt att många knappar har orden som "gratis" i deras kopia och det är inte en slump med att använda sådana ord i knappen kopia betonar ditt erbjudande värde proposition. Så, när du skriver din CTA, försöker du hitta ett sätt att integrera ett (eller alla) 3 övertygande ord:
- Fri
- Bonus
- Omedelbart
Låt mig ge dig ett exempel: En stor rädsla användare har innan de förbinder sig att anmäla sig till något, är det att det kommer att vara en smärta att avbryta sin prenumeration om de inte gillar tjänsten. Netflix lindrar den rädslan genom att använda löftet "Avbryt när som helst" precis intill "Join free for a month" CTA.
Skapa en brådskande känsla
Att skapa en känsla av brådska i dina CTA-knappar kan ge några imponerande klickfrekvenser. Du kan till exempel använda knapptext som "Anmäl dig och få 25% av idag!" Begränsar tiden någon måste fatta beslutet gör att folk vill hävda sitt erbjudande medan de kan.
Användbar text
Ibland kanske du vill överväga att lägga till en extra rad information i din knapptext. Denna övning är vanligt med gratis provknappar. Till exempel kan en gratis provknapp säga "30 dagars prov, inget kreditkort" i mindre text under CTA-knappen med "Starta din gratis test" -text. Denna extra text bör underlätta beslutsprocessen.
3. Gör det synligt utan att rulla
Placeringen av dina knappar med knapptryckning är lika viktig som färgen och meddelandet. En CTA-knapp ska placeras på en lätt att hitta plats som följer organiskt från flödet av webbsidan. Du bör försöka hålla din CTA-knapp ovanför veckan så att användarna aldrig missar det. Helst bör din CTA-knapp vara bland de första sakerna en användare ser på sidan när de når den. Ytterligare information ska ligga under veckan, där den är tillgänglig men inte distraherande.
4. Stor knapp med rundade hörn
Tänk på hur designen kommunicerar bekostnad. Hur förstår användaren elementet som en knapp? Använd form och storlek så att elementet ser ut som en knapp.
Gör det stort nog
CTA bör vara tillräckligt stor för att se på avstånd, men inte så stor att det bromsar uppmärksamhet från huvudinnehållet på sidan
Användarknappar med rundade hörn
Knappform kan spela en stor roll. Det är en bevisat faktum de avrundade hörnen är enklare på ögonen. I ContentVerves test gjorde en rundad grön knapp bättre än en blå rektangel.
5. Mindre är mer när det kommer till val
Tänk på att om du vill att dina kunder ska vidta åtgärder måste du hjälpa dem genom att ta bort alla möjliga hinder från deras väg. När användarna ges för många val, tenderar de att bli förvirrade. Så det är bättre att erbjuda potentiella kunder bara ett alternativ.
Om du fortfarande vill inkludera flera knappval väljer du ett val över andra för att hjälpa trattanvändare till en specifik väg. Ett bra exempel är Evernote: så snart du når en nedre del av Evernote hemsida är det ganska tydligt att ett föredraget val är "Registrera gratis", medan CTA för användare att jämföra planer är väldigt sekundärt.
Slutsats
För att uppnå effektiv CTA-design måste du överväga mer än bara knappen själv. Det är också viktigt att tänka på bakgrundsfärg, omgivande bilder, omgivande text och många andra element. Basecamp-teamet förstår vikten av dessa element och utformade en perfekt layout för deras målsida. Till och med den mikroskopi de använder under CTA-knappen ("4 714 företag registrerade sig denna vecka!") Ökar förtroendet för potentiella kunder.
Jag hoppas att de tips som nämns i den här artikeln hjälper dig att skapa en bättre uppmaningsknapp för din webbplats. I sista stund är det viktigt att testa - om du bestämmer dig för att återskapa en CTA på din webbplats, kom ihåg att testa för att se om det fungerar för din publik.