En call to action kräver verb, synlig plats och 24 pixlar

Foto: Vitaly Gariev via Pexels

Läser besökarna produktsidan men klickar aldrig vidare till kassan eller formuläret, är knappen ett bra ställe att börja. Knappen eller länken som ska få besökaren att ta nästa steg kallas call to action, ofta förkortat CTA.

Inget av stegen kräver behörighet eller särskild utbildning. Texten ändrar du i regel själv i publiceringsverktyget. Storlek, avstånd och färg sitter ofta i temat eller sidbyggaren, och då behöver du hjälp av den som har tillgång till dem. Rubriken, erbjudandet och formuläret runt knappen tas upp i guiden om landningssidor som konverterar och i checklistan inför lansering.

Bestäm vart knappen ska leda

1. Skriv ned vad som händer efter klicket, i en enda mening. Till exempel att varan hamnar i varukorgen, att ett offertformulär öppnas eller att prislistan laddas ned som pdf. Blir det två saker i meningen har knappen två uppgifter. Dela då upp den i två knappar, eller välj den uppgift sidan finns till för.

2. Utse sidans huvudknapp. Har sidan flera knappar, bestäm vilken handling som är viktigast och ge den knappen den tydligaste formen. Övriga val kan se ut som sekundära knappar eller textlänkar, så att besökaren inte behöver väga flera likvärdiga knappar mot varandra.

Vad ska stå på CTA-knappen?

3. Börja med ett verb och säg vad besökaren får. ”Beställ provpaket” och ”Boka visning” berättar vad som händer, medan ”Läs mer” och ”Kom igång” passar på nästan vad som helst. I Nielsen Norman Groups användartester klickade deltagare som ville läsa om ett företag på en Get Started-knapp och hamnade i en stilquiz och ett kontoflöde de inte var beredda på. Nielsen Norman Group drar slutsatsen att knappen ska säga precis vad användaren kan vänta sig, till exempel ”Take Our Style Quiz” i stället för ”Get Started”.

4. Sätt det viktigaste ordet först. Ett ord längst fram i knapptexten fångas när besökaren skummar sidan. Nielsen Norman Group råder därför att lägga de mest relevanta orden i början av länktexten. I ”Gratis provpaket” står det viktiga ordet först, i ”Klicka här för att få ett gratis provpaket” står det sist.

5. Läs knappen helt utan sammanhang. En skärmläsare kan läsa upp sidans länkar som en lista, utan stycket runt omkring, och då betyder tre knappar med texten ”Läs mer” ingenting. Har knappen en dold etikett i koden, en så kallad aria-label, ska den innehålla den synliga texten. Kravet står i WCAG 2.2 som framgångskriterium 2.5.3 Label in Name, på nivå A.

6. Klicka själv och kontrollera att nästa sida håller löftet. Står det ”Få offert” ska besökaren landa i offertformuläret, inte på en sida med tre nya val. I Get Started-studien blev följden att besökarna klickade, blev vilseledda och tappade förtroendet för sajten.

Placera och dimensionera knappen

7. Lägg huvudknappen där den syns utan att besökaren skrollar. I Nielsen Norman Groups ögonrörelsestudie från 2018 hamnade 57 procent av tittiden i den del av sidan som syns utan att man skrollar. Studien gjordes på datorskärmar, så den säger inget säkert om mobilen. Kontrollera därför sidan både på datorn och i telefonen. Upprepar du knappen längre ned på en lång sida, ge den samma text, så att samma ord alltid leder till samma mål.

8. Mät klickytan och se till att den är minst 24 gånger 24 CSS-pixlar. Kravet står i WCAG 2.2 som framgångskriterium 2.5.8 Target Size (Minimum), på nivå AA, med lydelsen ”The size of the target for pointer inputs is at least 24 by 24 CSS pixels”. Kriteriet har fem undantag: en yta under 24 pixlar godkänns om en cirkel med 24 pixlars diameter, centrerad på ytan, inte når någon annan klickyta eller en annan liten ytas cirkel (Spacing), samma funktion i en annan kontroll på sidan som uppfyller kravet (Equivalent), en länk i löpande text (Inline), en storlek som webbläsaren bestämmer (User Agent Control) och en utformning som är nödvändig eller krävs enligt lag (Essential). I praktiken träffar undantagen främst länkar i text, täta rader av små ikoner och kartnålar, och en köpknapp har sällan skäl att använda något av dem.

   Storleken ser du i webbläsarens utvecklarverktyg, där bredd och höjd visas när du markerar knappen. Myndigheten för digital förvaltning, Digg, räknar i sin tillsyn i dag 24 gånger 24 pixlar som en rekommendation. Det gör den i väntan på att EU-kommissionen beslutar om en ny version av den europeiska standard som bygger på WCAG 2.2. Beskedet beskriver hur Digg bedriver sin egen tillsyn, inte ett krav på ditt företags webbplats.

9. Gör knappen större än 24 pixlar om den ska tryckas med tummen. Den strängare nivån AAA i samma standard kräver 44 gånger 44 CSS-pixlar (kriterium 2.5.5). Nielsen Norman Group anger att interaktiva element bör vara minst 1 gånger 1 centimeter på pekskärmar, eftersom en fingertopp i genomsnitt är 1,6 till 2 centimeter bred och tummens kontaktyta omkring 2,5 centimeter.

10. Ge knappen luft mot andra klickytor. Små ytor som står tätt ökar risken att besökaren trycker på fel sak, och enligt samma genomgång av pekytor hjälper avstånd inte om ytorna redan är för små. Åtgärda storleken först och avståndet sedan. Kontrollera särskilt att köpknappen inte står kant i kant med ”Avbryt” eller ”Töm varukorgen”.

11. Välj färg efter kontrasten. Det som visar att knappen är en knapp ska ha en kontrast på minst 3:1 mot färgen intill, enligt kriterium 1.4.11 Non-text Contrast i WCAG 2.2. Bär knappens text eller ikon den uppgiften, behöver kanten eller bakgrunden inte nå 3:1 enligt W3C:s förklaring av kriteriet. En tydlig kant eller bakgrund får du gärna ge knappen ändå, men kriteriet kräver den inte. Texten på knappen följer kravet för vanlig text, som checklistan för landningssidor går igenom. Vilken nyans som fungerar bäst hos just dina besökare får du veta genom ett test.

Pröva en ny knapptext med ett A/B-test

12. Ändra en sak. Variant A är knappen som den ser ut i dag, variant B har den nya texten och allt annat är identiskt. Ändrar du text, färg och placering på en gång vet du inte vad som gjorde skillnaden. Upplägget i övrigt beskriver guiden om A/B-testning.

13. Bestäm i förväg hur länge testet ska pågå. Låt det gå över hela veckor, så att skillnader mellan vardag och helg jämnas ut. Hur många besökare som behövs beror på din nuvarande konverteringsgrad och hur liten skillnad du vill kunna upptäcka, och ett räkneexempel finns i guiden om signifikansnivå och p-värde. A/B-testkalkylatorn räknar inte ut antalet åt dig. Avbryt inte testet i förtid för att siffrorna ser bra ut, eftersom det ökar risken för falska vinnare.

14. Räkna det som händer efter klicket som konvertering. Ett genomfört köp eller ett skickat formulär säger mer än själva klicket. En vag knapptext kan ge fler klick på knappen, som Nielsen Norman Group konstaterar om Get Started, och ändå ge färre nöjda kunder.

15. Läs av resultatet i A/B-testkalkylatorn när testet är klart. Där fyller du i antal besökare och antal konverteringar för A (original) och B (utmanare) och trycker på Räkna ut. Du får något av tre besked: signifikant förbättring för B, signifikant försämring för B eller att skillnaden inte är statistiskt säkerställd på 95-procentsnivån. Under beskedet står konverteringsgraden för varje variant, den relativa förändringen (uplift) samt z-värde och p-värde. Kalkylatorn gör ett tvåsidigt z-test för två andelar med signifikansnivån 5 procent. Ett säkerställt resultat betyder att skillnaden sannolikt inte beror på slumpen, inte att den är stor i kronor.

16. Testa om innan du flyttar den vinnande texten till en annan sida. Knappen vann tillsammans med just den sidans erbjudande, besökare och trafikkällor. Ron Kohavi och tre medförfattare, med erfarenhet av tusentals kontrollerade experiment på bland andra Microsoft, Amazon, Booking.com och LinkedIn, skriver att en idé som fungerat på en sajt inte nödvändigtvis fungerar lika bra på en annan. De skriver också att de är skeptiska till många av de uppseendeväckande testresultat som publiceras. Behandla procentsatser om hur mycket en viss formulering påstås lyfta klicken i andras tester som idéer att pröva på din egen sida.

Senast faktagranskad: 2 november 2026