Hur man designar en CTA-knapp som konverterar

Hur ska en CTA-knapp se ut? Var ska den placeras? Hur undviker man irriterande CTA? Det här är bara några av frågorna som stör alla från copywriters och marknadsförare till webb- och UX-designers. Idag ska vi reda ut dem.

Vad är en CTA?

Förkortningen ”CTA” står för Call to Action. En uppmaning till handling är vilken design som helst (vanligtvis en knapp) som uppmanar besökaren att utföra en åtgärd. Det kan vara vad som helst – från att utforska webbplatsen till att fylla i ett kontaktformulär eller lägga till en produkt i kundvagnen.

När väl utformad, CTA:er har en dubbel funktion – de hjälper användarna att navigera på en webbplats, och de representerar ett avgörande inslag i ditt konverteringsflöde. I slutändan är deras roll att få besökarna att göra det du vill att de ska göra. Som en diskret reseguide som försiktigt leder en användare genom din digitala miljö.

Tekniskt sett kan vilken knapp som helst vara en CTA-knapp, så länge den innehåller en kopia som förvandlar besökaren från en passiv observatör till en aktiv användare av en webbplats. Men en av de viktigaste sakerna som skiljer CTA:er från resten av knapparna på en webbplats är att de, förutom den tidigare nämnda kopian, måste ha vissa egenskaper (färg, form, position) som drar till sig användarnas uppmärksamhet och påverka dem att utföra en åtgärd.

Det är tydligt att CTA:er är av enorm betydelse för en bra användarupplevelse och för ditt företags resultat, så i den här artikeln kommer vi att dela med oss ​​av några saker att tänka på när du skapar dina CTA:er.

Låt oss börja med knapptexten.

Hur man skriver CTA-kopia

Eftersom effektiviteten av CTAs i hög grad beror på kvaliteten och strukturen på dess kopia, är det tydligt att denna text måste vara genomtänkt. CTA-kopia måste utföra två funktioner: att engagera besökaren och att göra det kristallklart vilken åtgärd besökaren förväntas vidta.

För att uppnå det engagerande värdet, texten ska vara direkt, tydlig och sympatisk, om inte rent ut sagt charmig. Eftersom det bara kan innehålla så många ord, bör budskapet i CTA-kopian tillåta användaren att intuitivt förstå det nödvändiga handlingssättet.

I många fall kommer den idealiska CTA-kopian helt enkelt att ange webbplatsens konverteringsmål. Om ditt mål är att få folk att läsa din blogg ska knappen helt enkelt säga Läs nu eller Läs mer. Om du vill att de ska interagera med webbplatsen, en knapp med texten Hör av dig nu eller helt enkelt Meddela oss kommer att göra susen bra.

Ändå räcker det inte med att bara vara kort, tydlig och (om möjligt) underhållande. Det finns lite psykologi att ta hänsyn till här. Faktiskt, en hel del forskning och tester har utförts för att avgöra vilken typ av kopia som användarna tycker är mest tilltalande och vilken CTA-text som konverterar bäst.

De flesta experter är överens om det skapa en känsla av brådska är ett nödvändigt villkor för framgångsrik CTA-kopia. Lyckligtvis kan detta uppnås ganska enkelt, helt enkelt genom att infoga ett eller två ord, som ”Nu” eller ”Idag”, kanske kombinerat med ”Endast”.

Knappar säger Få ditt gratisexemplar nu eller Registrera dig och få 50 % rabatt endast idag! är mycket konverterande, eftersom användare inte vill missa en speciell möjlighet att få något som imorgon inte längre kommer att vara tillgängligt.

En annan sak att vara uppmärksam på här är hur du tilltalar dina besökare. Vissa experter överväger användningen av förstapersonspronomen (Skapa mitt konto, få min kopia) den mest effektiva, medan andra väljer att använda andrapersonspronomen (Få ditt exemplar, gör anspråk på din kostnadsfria provperiod). För att göra saker mer komplicerade verkar de två teknikerna ha lika många anhängare och argument till deras fördel.

Hur som helst är det uppenbart att en viss grad av personalisering för att tilltala besökarna krävs i CTA-kopia, eftersom det gör att användarna känner sig mer personligt involverade i produkten eller tjänsten. Och personlig anslutning är avgörande för omvandlingar.

Så här designar du dina CTA-knappar

Den strikt visuella aspekten av CTA-knapparna är lika viktig (om inte ännu mer) som själva kopian. Reglerna låter enkla – knapparna måste dra uppmärksamhet och bjuda in användare att klicka. Men det är inte alltid lätt att uppnå. För att sticka ut på sidan måste formen, storleken, färgen och placeringen av CTA-knapparna vara i klar kontrast till resten av deras miljö.

Formen på CTA-knappar

Det har du säkert märkt de flesta CTA:er (och de flesta knappar på webben, för den delen) är rektangulära. Visst, det finns några bra exempel på CTA som är cirkulära, kvadratiska eller någon annan, ännu mindre vanlig form, men majoriteten av dem är rektangulära. Varför är detta?

Rektanglar och fyrkanter är de former vi stöter på mest, vare sig det är på webben eller i vår vardag. Särskilt rektanglar får oss att känna oss bekväma eftersom de förmedlar en känsla av stabilitet och trygghet.

Å andra sidan har det bevisats att människor har en affinitet för kurvor. Runda former är helt enkelt mer tilltalande för ögonen än skarpa, edgy. För att inte tala om att cirkeln är en form som utstrålar en känsla av frid, fullständighet och harmoni.

Med tanke på dessa två fakta är det logiskt att den mest effektiva formen för CTA-knappar visade sig vara en rektangel med rundade hörn. Denna form blev väldigt populär bland marknadsförare och kan hittas på ett stort antal webbplatser och appar.

Naturligtvis är detta bara allmänna riktlinjer som härrör från erfarenhet och några väl undersökta bästa praxis i UX. Det finns CTA-knappar som finns i alla möjliga oortodoxa former, men de är i allmänhet en del av en designmiljö präglad av experiment, mycket specifik estetik och så vidare. Med andra ord – de representerar inte normen.

Färgens betydelse för CTA-knappar

Färgernas roll för att forma vår uppfattning och upplevelse av allt visuellt innehåll har undersökts i decennier. Psykologer är idag överens om att vi tenderar att tolka och känslomässigt uppleva färger enligt vissa mönster, och detta är något som marknadsförare har utnyttjat under mycket lång tid.

Specifika färger kan associeras med specifika meddelanden, förmedlar dem automatiskt, på en undermedveten nivå. Tänk bara på trafikljus – färgerna i sig kommunicerar det önskade budskapet. Grön – gå, röd – stopp.

Men när det kommer till dessa två färger och deras användning i CTA:er är situationen inte så tydlig som den verkar. Man skulle kunna tro att den röda färgen, som en färg för larm, försiktighet och varning, skulle avvärja människor och leda till färre klick. Men i flera oberoende a/b-testerrött var en klar vinnare över grönt. Så när det gäller att kommunicera via färger är det bäst att ta alla råd med en nypa salt och göra dina egna tester för att få praktiska insikter.

Kom dock ihåg att även efter att du hittat paletten med hög konvertering för dina visuella meddelanden, är ditt arbete långt ifrån över. Färgen på knappen kommer att vara som mest effektiv endast när den är i synergi med sin visuella miljö. Relationen mellan knappen och resten av layouten ska vara harmonisk och balanserad, men också tillräckligt kontrasterande för att dra användarnas uppmärksamhet. Kompletterande färgkombinationer är också värda att överväga – de är tilltalande för ögat och de ger den nödvändiga kontrasten.

Vikten av färger för att designa CTA-knappar blir ännu tydligare situationer som kräver två knappar, varav en är en klassisk CTA och en annan som leder till ytterligare information om ämnet.

I det här fallet måste knappen av strikt CTA-typ markeras och accentueras, så att användarna fokuserar på den först. Detta kan uppnås med en djärv signalfärg, såsom röd, orange eller någon variant därav.

I exemplet ovan kommer du att märka att den andra knappen, den som bjuder in besökare att lära sig mer om tjänsten i fråga, är mycket mer dämpad (i det här fallet, precis beskrivet), vilket gör att CTA får all uppmärksamhet.

Animation och detaljer om CTA-knappar

Den tredje aspekten av CTA-design är knappanimeringen. Tillsammans med ikoner, diskreta illustrationer och andra grafiska element, animation kan ge ytterligare ett lager av visuellt och kommunikativt värde. När den används på rätt sätt kan funktionell animering som ett UX-verktyg göra knappar mer intuitiva och direkta och därför avsevärt förbättra deras effektivitet.

När du utformar CTA:er, animering används mest för svävningseffekter. Dessa animationer bör inte vara för interaktiva eller högljudda, eftersom vi inte vill att de ska ta bort fokus från budskapet. För mycket animering kan förvirra användaren och skapa en negativ känslomässig effekt.

Men subtilt animerade knappar är alltid ett bra bidrag till CTA-design, berikar den och ser till att fokus är tydligt.

Förutom animerade svävningseffekter väljer designers ibland ytterligare element och ikoner, speciellt för knappar som bjuder in användare att lägga till i kundvagnen, ladda ner, ladda upp, ta bort och så vidare. I det här fallet är det viktigt att se till att det finns tillräckligt med tomt utrymme mellan knappens text och dessa ytterligare element, såväl som mellan elementen och knappens kanter. Knappen framför allt, måste vara lätt att läsa och får inte verka rörig.

Placeringen av CTA-knappar

Den sista aspekten som avgör framgången för en CTA-knapp är dess timing eller, mer exakt, dess positionering. Även om det inte finns någon ”gyllene regel” om var man faktiskt ska placera knappen, är en sak klar – den ska serveras till besökaren vid rätt tidpunkt.

Vad detta innebär är att du måste tänka mycket noga vid vilken tidpunkt under besökarens vistelse på sidan han eller hon ska se knappen. När besökaren är väl förberedd på handlingen med hjälp av visuellt och textuellt innehåll och information, blir chansen att utföra den önskade handlingen verklig.

Hela sidan – dess design och dess innehåll – bör därför struktureras och utformas på ett sätt som leder besökaren till det slutliga målet (handlingen), vare sig det är en prenumeration, ett köp eller något annat.

Placera en CTA ovanför vecket (den del av sidan som först är synlig vid laddning) brukade vara en standard, men eftersom rullning är en åtgärd som vi nu utför så naturligt och automatiskt, har ”innehållet ovanför mitten” förlorat en del av sin ”prestige”. Faktum är att att sätta en CTA högst upp, innan användaren ens har chansen att bosätta sig och utforska innehållet, kan ofta vara kontraproduktivt.

Om du placerar knappen nedanför mitten, betyder det att besökaren måste slutföra en väg för att nå den. Om du planerade din sidstruktur rätt, kommer den vägen att vara full av visuella och textuella ledtrådar som försiktigt trycker ner besökaren och gör honom redo för handlingen.

När du har hittat den perfekta platsen för knappen, du måste se till att den förblir i fokus. För att göra detta måste du se till att det finns tillräckligt med negativt utrymme runt den. Detta låter besökaren ”vila ögat” och gör att knappen är tydligt synlig och dess budskap kan förstås.

Slutgiltiga tankar

Rent, okomplicerat, fokuserat och engagerande – det här är de primära egenskaperna hos en bra, konverterande CTA-knapp. Vi såg att många av dessa egenskaper kommer från designen. Även om de allmänna riktlinjerna och förslagen för att utforma den perfekta CTA-knappen är tydliga, rekommenderas alltid ett individuellt tillvägagångssätt. Visst, färgen röd kan visat sig fungera utmärkt, men om den krockar med tonen och paletten på din webbplats bör du inte använda den. Detsamma gäller riktlinjer för form, storlek och placering av knappen. När du har designat en knapp som passar ditt visuella varumärke och hittat en bra plats för den, se till att testa den med ett par lite olika versioner. Och glöm inte att backa upp dina CTA:er med starkt värdedrivet innehåll och bra kopia.