Så skapar du en bra call to action (CTA) – med konkreta exempel

En call to action (CTA) är en uppmaning till handling – oftast en knapp eller länk som får besökaren att göra något bestämt, som att kontakta dig, boka eller köpa. En besökare som inte vet vart hen ska klicka lämnar sidan. Rätt CTA, med hög kontrast och konkret text, är skillnaden mellan ett avhopp och ett ifyllt formulär.

Vi kommer här gå igenom vad en call to action är, varför den är viktig och dela våra bästa tips för att fler av dina besökare ska bli affärer.

Sunbird är en webbyrå i Malmö som bygger hemsidor som säljer. Det här är lärdomarna vi tar med oss in i varje bygge.

• En tydlig CTA ökar sannolikheten att besökaren tar kontakt, eftersom menyn redan filtrerats bort av ögat.
• Hög kontrast är avgörande – besökare skummar sidor och ser bara det som sticker ut visuellt.
• Knappens text ska vara beskrivande och konkret – undvik vaga fraser som ”Läs mer”.
• Incitament sänker tröskeln för den som inte känner sig redo att agera ännu.
• Placeringen styrs av köpintentionen – högt upp vid enkla beslut, längre ner när värdet först måste etableras.
• Testa olika formuleringar, färger och format för att hitta vad som fungerar bäst för just din målgrupp.

Call to action (CTA) är en uppmaning till besökaren att agera. Den brukar – men måste inte – vara en knapp eller textlänk.

CTA står för call to action, vilket på svenska betyder uppmaning till handling.

Länken brukar leda till ett formulär där användaren exempelvis kontaktar dig eller skapar ett konto.

• Testa gratis
• Kontakta oss
• Få en offert
• Lägg i varukorgen
• Ställ en fråga
• Prenumerera

En CTA måste inte vara en knapp, men en utformad CTA-knapp presterar i regel bättre än en ren textlänk.

Anledningen är enkel: knappen syns, den signalerar att den går att klicka på och den drar blicken till sig när besökaren skummar sidan. En textlänk mitt i brödtexten är lätt att missa. Vill du att fler ska agera, ge din viktigaste uppmaning en knapp – inte en länk som göms i en mening.

En CTA är viktig eftersom den omvandlar passiva besökare till förfrågningar och köp – utan en tydlig uppmaning lämnar du det åt slumpen om besökaren gör något överhuvudtaget.

Användaren surfar i regel runt på din hemsida för att hitta rätt leverantör.

Om du hjälper dem, förklarar varför du är bra, sänker tröskeln och skapar incitament brukar försäljningen öka.

Har du skrivit ett blogginlägg (som detta) utan att uppmana användaren att ta kontakt, minskar sannolikheten att de gör det. Du lämnar det helt enkelt till användaren att själv klicka i menyraden. Men den har de sett hela tiden, vilket gör att ögat börjat filtrera bort den – och knappen är dessutom ofta generisk.

Vi lever som vi lär: vill du ha fler besökare som konverterar, hör av dig till Nils för en kostnadsfri analys av din SEO och Google Ads. Hade vi inte föreslagit det – hade du kanske inte tänkt på det?

Nedan är mina bästa tips för hur du ska utforma dina call-to-actions för att öka din försäljning.

Användare tenderar att skumma igenom hemsidor. Det innebär att det i stort är den visuella hierarkin som avgör hur många som kommer se knappen.

Det kanske är uppenbart för alla som läser detta. Men att titta på och att se något är inte samma sak.

Genom att använda hög kontrast gör du det lättare för ögat att fastna och uppfatta din uppmaning.

Ska en användare klicka på en knapp vill de förstå vad den gör och vad de kan vinna genom att klicka.

Förklara i texten syftet med klicket. Undvik vaga beskrivningar såsom ”Läs mer” om det inte på annat sätt framgår tydligt.

”Få en offert” eller ”Börja kostnadsfritt” kan fungera bra.

En enkel formel för knapptext i tre steg:

1. Börja med ett verb i aktiv form.
2. Gör tydligt vad som händer efter klicket.
3. Visa värdet eller tillståndet besökaren hamnar i.

Knappen ska helst spegla läget besökaren är i efter klicket. Istället för ”Fyll i formulär”, skriv ”Skapa mitt konto”. Istället för ”Ladda ner”, skriv ”Hämta guiden”. Håll texten kort – oftast räcker 2–4 ord.

Fler val gör det svårare att välja. Lägger du ”Köp nu”, ”Läs mer”, ”Kontakta oss” och ”Ladda ner broschyr” bredvid varandra som lika viktiga knappar hamnar besökaren i valparalys och gör ingenting alls.

Bestäm vad du helst vill att besökaren gör och lyft fram den knappen. Låt sekundära val vara nedtonade – en textlänk eller en linjerad knapp räcker.

Många användare surfar mest runt utan att känna sig tillräckligt redo att agera.

Om du skapar incitament att agera brukar fler också göra det.

Ett exempel kan vara: ”Kontakta oss nu och få en kostnadsfri analys.”

Att uppmana besökaren att agera är ett knep som brukar öka försäljningen.

Genom att föreslå att de ska höra av sig ökar sannolikheten att de gör det.

De bästa erbjudandena är korta och lätta att förstå.

Undvik att skriva allt som är bra med erbjudandet. Fler bra anledningar är inte alltid bättre.

Tänk på att alla potentiella kunder kan mindre om dig och vad du gör än du själv. Bara för att du förstår det betyder inte att andra gör det.

Gamla tumregeln att CTA:n alltid ska ligga ovanför vikningen (above the fold) stämmer inte i alla lägen. Placeringen styrs av hur redo besökaren är att fatta beslut.

Vid låg tröskel och hög köpintention fungerar det bra att lägga knappen högt upp. Handlar det däremot om en större investering eller en tjänst med lång beslutscykel, som ofta inom B2B, presterar knappen bättre längre ner på sidan, efter att du etablerat värdet. Kräver du ett beslut innan besökaren förstått vad de får ökar bara avhoppen.

Överväg också att ha dina CTAs flera gånger på samma sida, och att A/B-testa placeringen mot din egen trafik i stället för att lita på en tumregel.

• Prova att använda en symbol i knappen
• Prova att göra knappen större
• Fetmarkera texten i knappen
• Använd en hover-effekt när man håller över med musen
• Välj en färg som bidrar till hög kontrast
• Prova att skapa en 3D-känsla genom att lägga till en kant eller skugga

Jämför exempelvis nedan:

Med exemplet nedan:

När du har en ikon i din CTA sticker den ut mer.

Tänk också på hur ögat rör sig över sidan. landningssidor skannas i regel i ett Z-mönster, där blicken går från övre vänstra hörnet, snett ner och vidare mot nedre högra. Innehållstunga sidor som blogginlägg läses mer i ett F-mönster. På texttunga sidor kan det därför löna sig att lägga knappen där blicken redan är, i stället för längst ut i vänsterkanten.

De flesta besöker din sida via mobilen, och man blir förvånad hur lite mobilen prioriteras.

Det finns ett golv att hålla sig över. WCAG 2.2, W3C:s tillgänglighetsstandard, kräver att klickytan är minst 24 × 24 CSS-pixlar (framgångskriterium 2.5.8). Apple rekommenderar i sina designriktlinjer 44 × 44 punkter, vilket är en bra praktisk måttstock för en knapp som tummen ska träffa.

Ge dessutom knappen tillräckligt med luft runt om så att den inte klistras ihop med text eller bilder. En knapp som är för liten eller för trång tappar du klick på – varje gång någon råkar missa den.

Alla vill inte kontakta dig på samma sätt. Ett starkt tips är att prova flera olika knappar och mäta vilken av dem som fungerar bäst.

Ovan delade vi flera exempel på bra CTAs. Men en kombination av offert, en lätt första kontakt, mejl och telefon brukar vara en bra början.

Om du jobbar med flera färger kan du prova att ha en och samma färg för varje typ av call-to-action. Exempelvis att alla ”Kontakt”-knappar har en färg och ”Offert” en annan.

Det gör det något lättare för ögat att identifiera knappen.

Men kontrasten är viktigare – måste du välja, prioritera hög kontrast.

Formuläret är oftast den kritiska tröskeln mellan ett klick och ett lead. Här tappar du folk om det ser jobbigt ut. Fråga bara efter det du verkligen behöver – varje extra fält är ett skäl till att hoppa av.

Behöver du ändå samla in mer information, dela upp den i ett flerstegsformulär istället för att slänga upp allt på en gång. När besökaren väl klarat av det första enkla steget – säg att fylla i ett registreringsnummer eller välja en tjänst – aktiveras en vilja att slutföra det man påbörjat. Varje steg känns litet, och friktionen upplevs som mindre.

En sak till: knappen i slutet av formuläret ska säga vad som händer. ”Skicka” säger ingenting. ”Boka min tid” eller ”Skicka min förfrågan” gör det tydligt vad besökaren får.

En Smart CTA är en knapp som anpassar sig efter vem som tittar. En förstagångsbesökare och en återkommande kund har inte samma behov – och därför inte samma nästa steg.

I praktiken kan det se ut så här:

• Anonym förstagångsbesökare får ”Utforska funktioner”.
• Någon som redan laddat ner en guide får istället ”Se en kort videodemo”.
• Ett moget lead som varit inne och jämfört får ”Boka rådgivning”.

Poängen är att flytta besökaren till nästa steg utifrån var de befinner sig – inte att skrika samma erbjudande åt alla. Det kräver att du kopplar ihop din hemsida med data om besökaren, och det är värt att mäta effekten innan du bygger ut det.

Kraven på en CTA skiljer sig mellan e-handel och B2B. I e-handeln är köpintentionen ofta direkt, och snabbhet och trygghet väger tyngst. Inom B2B är målet sällan ett omedelbart köp, utan att ta besökaren ett steg längre i en längre beslutsprocess.

En CTA får inte lura besökaren. Konsumentverket har tillsyn över marknadsföringslagen (2008:486), och vilseledande utformning av knappar och kassaflöden faller under den.

Tre saker att hålla koll på:

• Betalknappen ska visa att det kostar. I sista steget av en kassa räcker inte ”Fortsätt” eller ”Bekräfta”. Använd ”Köp nu”, ”Slutför köp” eller ”Beställ med betalningsansvar” så att besökaren förstår att klicket innebär en betalningsskyldighet.
• Inga förhandskryssade rutor. Tilläggstjänster och prenumerationer ska besökaren välja aktivt själv – inte kryssa bort.
• Ingen fejkad brådska. Nedräkningsklockor som nollställs vid siduppdatering, eller lagersaldon som inte stämmer, är vilseledande.

Utöver risken för sanktioner kostar det förtroende. En besökare som känner sig lurad kommer inte tillbaka, och då tappar du affären du just vann.

Du vet inte om en CTA fungerar förrän du mäter den. Sätt upp händelser eller mål i ditt mätverktyg – Google Analytics tillsammans med Google Tag Manager räcker långt – så att varje klick och varje ifyllt formulär registreras.

Två tal att hålla ögonen på: klickfrekvensen på själva knappen, och konverteringsgrad längre ner, alltså hur många som faktiskt slutför. Klicken visar om knappen syns och lockar, konverteringen visar om löftet höll hela vägen fram.

Det är här arbetet hänger ihop med din SEO och dina Google Ads. De kanalerna drar in besökare, men om din CTA inte konverterar spelar besökarna mindre roll – du betalar för trafik som rinner ut. En bättre avslutningsfrekvens gör dessutom varje klick mer värt, vilket i annonsering hänger samman med hur mycket du kan buda och ändå vara lönsam.

Dina CTAs avgör hur stor del av trafiken som blir till affärer. Det handlar inte bara om knappen i sig, utan om texten, kontrasten, placeringen, formuläret och allt runtomkring.

Vill du ha hjälp med dina call-to-actions är du varmt välkommen att höra av dig. Boka en kostnadsfri analys av din SEO och Google Ads, så tittar vi på hur fler av dina besökare kan bli affärer. Vi är en SEO-byrå i Malmö men jobbar med kunder i hela Sverige.

Här är de frågor vi oftast får om call to action.

CTA står för call to action. Det är en uppmaning som ber besökaren att göra något specifikt, oftast i form av en knapp eller länk.

På svenska betyder call to action uppmaning till handling – till exempel ”Kontakta oss”, ”Få en offert” eller ”Lägg i varukorgen”.

Börja med ett verb i aktiv form och gör värdet tydligt: ”Hämta guiden”, ”Boka min tid”, ”Skapa mitt konto”. Undvik vaga ord som ”Skicka” eller ”Läs mer” när de inte säger vad som händer.

Vid enkla beslut och hög köpintention fungerar det bra högt upp på sidan. Vid större investeringar eller längre beslutsprocesser presterar knappen bättre längre ner, efter att du etablerat värdet.

En CTA-knapp är den klickbara knappen som bär din uppmaning till handling. Skillnaden mot en vanlig textlänk är att knappen är utformad för att synas – den har färg, storlek och form som drar blicken till sig.