• UI & UX

Få klick: 8 tips för effektiv CTA-design

  • Felix Rose-Collins
  • 6 min read
Få klick: 8 tips för effektiv CTA-design

Intro

Att nå fram till första sidan i Googles sökresultat och få din målgrupps uppmärksamhet är en verklig utmaning, eftersom folk sällan klickar på ett resultat på sidan två. Att optimera din webbplats för SEO är ett måste för att nå detta mål.

Men det betyder inte att en plats bland de tio främsta inte nödvändigtvis ger dig en bra konverteringsgrad. Det är sant att du kan förvänta dig en ökning av trafiken på webbplatsen, men det finns en annan faktor som är avgörande för konverteringar - en effektiv uppmaning till handling.

En CTA:s viktigaste uppgift är att leda besökarna till nästa steg och uppmuntra dem att vidta åtgärder - prenumerera på ett nyhetsbrev, ladda ner en e-bok, köpa en produkt eller tjänst eller anmäla sig till en testperiod.

En dåligt utformad CTA är dock lika bra som ingen, eftersom den inte kommer att generera klick och underlätta konverteringar.

I den här artikeln tar vi upp de bästa tipsen för att utforma oemotståndliga CTA:er som dina kunder inte kan låta bli att klicka på. Läs vidare för att lära dig mer!

1. Använd en klibbig CTA i sidofältet

CTA:er handlar om att fånga besökarnas uppmärksamhet och få dem att klicka.

Vissa webbsidor, t.ex. hemsidor eller blogginlägg, har mycket innehåll och det är lätt att CTA:erna smälter in bland alla andra element och blir praktiskt taget osynliga.

Möt Ranktracker

Allt-i-ett-plattformen för effektiv SEO

Bakom varje framgångsrikt företag finns en stark SEO-kampanj. Men med otaliga optimeringsverktyg och tekniker att välja mellan kan det vara svårt att veta var man ska börja. Nåväl, frukta inte längre, för jag har precis det som kan hjälpa dig. Jag presenterar Ranktracker, en allt-i-ett-plattform för effektiv SEO.

Vi har äntligen öppnat registreringen av Ranktracker helt gratis!

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Ange en klibbig CTA i sidofältet.

Denna flytande knapp är fäst vid sidan av en webbsida och förblir synlig när användaren rullar upp och ner på sidan utan att vara för påträngande eller distraherande. Du behöver inte oroa dig för om en potentiell kund kommer att glömma ditt fantastiska erbjudande medan de läser en artikel eller kollar in kundrecensioner.

ATH Sport ger 10 % rabatt på den första beställningen och marknadsför detta incitament på sin hemsida och på hela webbplatsen genom att införa en klibbig CTA i sidofältet med texten "Spara 10 %". På så sätt påminns besökarna på ett subtilt sätt om att vidta åtgärder och utnyttja rabatten.

Use a sticky sidebar CTA (Källa: ATH Sport)

2. Utnyttja negativa utrymmen

Ett av de största misstagen du kan göra med din CTA är att begrava den mitt i ett stort textblock. Det är ett säkert sätt för besökarna att missa den och gå därifrån utan att konvertera.

Var inte rädd för att utnyttja det negativa utrymmet, det vill säga det område i en design som inte är upptaget av text eller andra element. Genom att omge din CTA med vitt utrymme kan du skapa ett visuellt avbrott som hjälper till att dra tittarens uppmärksamhet till knappen.

Ju färre distraktioner runt CTA:n, desto mer klickbar blir den.

Möt Ranktracker

Allt-i-ett-plattformen för effektiv SEO

Bakom varje framgångsrikt företag finns en stark SEO-kampanj. Men med otaliga optimeringsverktyg och tekniker att välja mellan kan det vara svårt att veta var man ska börja. Nåväl, frukta inte längre, för jag har precis det som kan hjälpa dig. Jag presenterar Ranktracker, en allt-i-ett-plattform för effektiv SEO.

Vi har äntligen öppnat registreringen av Ranktracker helt gratis!

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Flamingo ger CTA-meddelandet på hemsidan tillräckligt med utrymme och separerar det från de andra elementen, vilket gör att besökarnas uppmärksamhet riktas mot huvudmålet - att lägga till deras spårning av ledigheter i Slack. Trots mycket vitt utrymme ser designen inte tom eller oavslutad ut, så att hitta rätt balans är nyckeln.

Leverage negative space (Källa: Flamingo)

3. Skapa en känsla av brådska

Brådska och knapphet är kraftfulla konverteringsfaktorer, och därför bör du inkludera dessa psykologiska principer i din CTA-text.

Ta exempel från Amazon och deras smarta "Endast 1/2/3 kvar i lager" som får även obeslutsamma kunder att beställa produkten på en gång innan någon annan tar den.

Människor uppfattar produkter som är sällsynta eller på väg att bli slutsålda som mer värdefulla, vilket i sin tur utlöser rädslan för att missa något (FOMO). Du kan utnyttja detta fenomen genom att skapa CTA-texter som handlar om begränsad produkttillgänglighet.

För att understryka hur brådskande det är kan du använda tidsord som Nu, Omedelbart eller Idag.

CTA:n på Bed Bath & Beyond's hemsida är ett bra exempel på hur man kombinerar både brådska och knapphet. Kunderna uppmanas att "handla nu" eftersom erbjudandet gäller till och med den 8 januari, men denna möjlighet minimeras ytterligare genom att man lägger till "Så länge lagret räcker". Det faktum att själva CTA:n ligger i en stor röd banner som är placerad ovanför viken gör den ännu mer slående och övertygande.

Create a sense of urgency - Bed Bath & Beyond (Källa: Bed Bath & Beyond)

januaris hemsida finns en CTA med en något annorlunda syn på brådska. Den noggrant utformade formuleringen "Gå med på väntelistan" skapar en surr om appen och skapar efterfrågan genom att antyda att det finns andra potentiella kunder som otåligt väntar på lanseringen. Denna enkla men spännande CTA fungerar eftersom den ger en lite exklusiv känsla - det är som att komma med på en lista i en VIP-klubb.

Create a sense of urgency - January (Källa: januari)

4. Inkludera kraftfulla ord

Som namnet antyder har kraftord förmågan att väcka känslor hos dina potentiella kunder. 95 % av köpbesluten är omedvetna, vilket innebär att känslor spelar en viktig roll i processen.

Om du inkluderar kraftfulla ord som

  • Gratis
  • Fantastisk
  • Ny
  • Effektivt
  • Enkelt
  • Omedelbart
  • Garanterad
  • Ingen risk
  • Certifierad
  • Skyddad
  • Testad
  • Verifierad
  • Extra

kommer att träffa rätt hos din publik och få dem att agera.

Som du kan se syftar vissa av dessa ord till att övertyga kunderna om att det är säkert att klicka på knappen och göra ett köp eller prenumerera på ett nyhetsbrev. Andra fokuserar på att lyfta fram ditt erbjudandes värdeerbjudande.

Evernotes hemsida lovar Evernote att användarna ska kunna organisera sitt liv med appen, medan CTA lockar dem att registrera sig gratis. Och vem skulle kunna tacka nej till ett sådant lockande erbjudande?

Include power words - Evernote (Källa: Evernote)

På samma sätt uppmanar BaseLangs CTA på hemsidan användarna att börja med sina spanska lektioner för "bara 1 dollar", vilket är det näst bästa sättet att erbjuda gratis service. Varumärkets övergripande budskap är kraftfullt med hjälp av andra kraftfulla ord som "obegränsad" eller "allt du kan äta", som båda kommunicerar värdet av erbjudandet att potentiella kunder kan prova i en vecka och betala en symbolisk avgift på 1 dollar.

Include power words - BaseLang (Källa: BaseLang)

5. Gör din CTA populär

Du har säkert hört talas om 15-sekundersregeln, enligt vilken du bara har en kvarts minut på dig att fånga besökarnas uppmärksamhet. Detta ger dig inte särskilt mycket utrymme för att manövrera, vilket innebär att du måste agera snabbt och se till att CTA:n är bland det första som folk lägger märke till när de landar på din webbsida.

Ett av de bästa sätten att uppnå detta mål är att sätta lite färg. Det finns olika åsikter om vilken färg som ökar konverteringen, men juryn är fortfarande inte klar över detta. Det är dock säkert att dra slutsatsen att det inte handlar så mycket om huruvida du väljer rött, grönt, blått eller gult utan om att skapa kontrast.

Du kan till exempel använda så kallade komplementärfärger som ligger på motsatta sidor av färghjulet. Om din webbsida är mestadels blå, kommer en orange CTA att skapa en stark kontrast.

Menlo Caochings hemsida är vit och grå, så den starka röda färgen som de valde för CTA-meddelandet gör att det syns direkt. Designen drar också nytta av det negativa utrymmet, som dessutom framhäver CTA-knappen och får den att sticka ut mot den neutrala bakgrunden.

Make your CTA pop (Källa: Menlo Coaching)

6. Var inte vag

Förvänta dig inte att dina besökare ska dra slutsatser om vad som händer härnäst - berätta det för dem.

CTA-knappar som säger "Klicka här" eller "Skicka" kommer bara att förvirra människor, och det är det värsta du kan göra.

Tricket är att tydligt kommunicera till dina besökare hur de kan dra nytta av att vidta åtgärder och informera dem om nästa steg.

Dropbox använder sig av detta "vad får jag ut av det" på sin hemsida genom att berätta för sina potentiella kunder att de genom att klicka på CTA-knappen kommer att kunna hitta den bästa planen för dem själva. Det är uppenbart att de på nästa sida kommer att hitta detaljer om planen, funktioner och jämförelser som hjälper dem att fatta ett beslut.

Don’t be vague (Källa: Dropbox)

7. Lägg till sociala bevis

När det gäller att konvertera potentiella kunder finns det inget som fungerar bättre än sociala bevis. 87 % av köpbesluten börjar med onlineforskning, och kunderna läser i genomsnitt tio recensioner innan de lägger en order.

Men eftersom du inte vill att dina potentiella kunder ska lämna din webbplats när de söker efter kundrecensioner och vittnesmål är det bäst att visa dem sociala bevis direkt innan du ger dem CTA.

På så sätt bygger du upp ett förtroende och undanröjer eventuella tvivel som de kan ha om köpet.

Det är precis vad Buffer gör på sin hemsida. Deras CTA:er är kopplade till lyckliga kunders citat som visar hur användningen av plattformen gör deras liv enklare. För att lägga till ytterligare ett lager av trovärdighet inkluderade varumärket kundernas namn och foton. Denna enkla taktik räcker långt eftersom den sätter ett ansikte till namnet och gör det sociala beviset mer autentiskt.

Add social proof (Källa: Buffer)

8. Håll saker och ting enkla

Alla de tips som vi har diskuterat hittills kan ge dig intrycket att dina CTA:er måste vara överdrivna för att fungera.

Men sanningen är att enkelhet ofta är underskattad.

Möt Ranktracker

Allt-i-ett-plattformen för effektiv SEO

Bakom varje framgångsrikt företag finns en stark SEO-kampanj. Men med otaliga optimeringsverktyg och tekniker att välja mellan kan det vara svårt att veta var man ska börja. Nåväl, frukta inte längre, för jag har precis det som kan hjälpa dig. Jag presenterar Ranktracker, en allt-i-ett-plattform för effektiv SEO.

Vi har äntligen öppnat registreringen av Ranktracker helt gratis!

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

I många fall får du bra resultat genom att hålla din CTA enkel, både när det gäller design och omvandlingsprocessen.

Jiras CTA på hemsidan kontrollerar alla rutor med sin CTA "Fortsätt med Google". Djävulen ligger i detaljerna, och även om det till synes inte händer så mycket här, ligger effektiviteten i denna CTA i det faktum att den gör saker och ting superenkelt för dem som bestämmer sig för att registrera sig.

Istället för en komplicerad registreringsprocess sparar Jira användarna tid genom att låta dem få tillgång till plattformen via sitt Google-konto. Det tar bara ett par klick, och det finns inga irriterande formulär som är orsaken till många övergivna registreringar och kundvagnar. Dessutom innehåller kopian det magiska ordet Free, som kan övertyga de tveksamma att klicka och fortsätta.

Keep things simple (Källa: Jira)

Avslutning

Call to action kan vara det minsta designelementet på din webbsida, men dess betydelse är enorm. Utan det vet potentiella kunder inte vad du förväntar dig att de ska göra och vad deras nästa steg ska vara. Så fundera noga på utformningen av dina CTA:er och ta inte lätt på dem. Dessa taktiker hjälper dig att se till att klickarna kommer att strömma in.

Felix Rose-Collins

Felix Rose-Collins

Co-founder

is the Co-founder of Ranktracker, With over 10 years SEO Experience. He's in charge of all content on the SEO Guide & Blog, you will also find him managing the support chat on the Ranktracker App.

Börja använda Ranktracker... gratis!

Ta reda på vad som hindrar din webbplats från att rankas.

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Different views of Ranktracker app