Hvordan designe en CTA-knapp som konverterer

Hvordan skal en CTA-knapp se ut? Hvor skal den plasseres? Hvordan unngå irriterende CTAer? Dette er bare noen av spørsmålene som plager alle fra tekstforfattere og markedsførere til web- og UX-designere. I dag skal vi sortere dem.

Hva er en CTA?

Forkortelsen «CTA» står for Call to Action. En oppfordring til handling er ethvert design (vanligvis en knapp) som ber den besøkende om å utføre en handling. Dette kan være alt – fra å utforske nettstedet til å fylle ut et kontaktskjema eller legge til et produkt i handlekurven.

Når utformet godt, CTAer utfører en todelt funksjon – de hjelper brukere med å navigere på et nettsted, og de representerer et avgjørende element i konverteringsflyten din. Til syvende og sist er deres rolle å få besøkende til å gjøre det du vil at de skal gjøre. Som en diskret reiseleder, leder en bruker skånsomt gjennom ditt digitale miljø.

Teknisk sett kan enhver knapp være en CTA-knapp, så lenge den inneholder kopi som forvandler den besøkende fra en passiv observatør til en aktiv bruker av et nettsted. Men en av de viktigste tingene som skiller CTA-er fra resten av knappene på en nettside, er at de i tillegg til den nevnte kopien må ha visse funksjoner (farge, form, posisjon) som tiltrekker brukernes oppmerksomhet og påvirke dem til å utføre en handling.

Det er tydelig at CTAer er av enorm betydning for god brukeropplevelse og for bedriftens bunnlinje, så i denne artikkelen skal vi dele noen ting du bør huske på når du oppretter CTAene dine.

La oss starte med knappeteksten.

Hvordan skrive CTA-kopi

Siden effektiviteten til CTA-er i stor grad avhenger av kvaliteten og strukturen til kopien, er det klart at denne teksten må være gjennomtenkt. CTA-kopi må utføre to funksjoner: å engasjere den besøkende og å gjøre det krystallklart hvilken handling den besøkende forventes å ta.

For å oppnå den engasjerende verdien, teksten skal være direkte, tydelig og sympatisk, om ikke rett og slett sjarmerende. Fordi den bare kan inneholde så mange ord, bør budskapet til CTA-kopi gjøre det mulig for brukeren å intuitivt forstå den nødvendige handlingen.

I mange tilfeller vil den ideelle CTA-kopi ganske enkelt angi nettstedets konverteringsmål. Hvis målet ditt er å få folk til å lese bloggen din, bør knappen bare si Les Nå eller Les mer. Hvis du vil at de skal samhandle med nettstedet, en knapp med teksten Ta kontakt nå eller rett og slett Send oss ​​en melding vil gjøre susen helt fint.

Det er likevel ikke nok å bare være kort, tydelig og (om mulig) underholdende. Det er litt psykologi som må tas i betraktning her. Faktisk, mye forskning og testing har blitt utført for å finne ut hvilken type kopi brukerne synes er mest tiltalende, og hvilken CTA-tekst som konverterer best.

De fleste eksperter er enige om det skaper en følelse av at det haster er en nødvendig betingelse for vellykket CTA-kopi. Heldigvis kan dette oppnås ganske enkelt, ganske enkelt ved å sette inn et ord eller to, for eksempel «Nå» eller «I dag», kanskje kombinert med «Bare.»

Knapper sier Få ditt gratis eksemplar nå eller Registrer deg og få 50 % rabatt kun i dag! er svært konverterende, siden brukere ikke vil gå glipp av en spesiell mulighet til å få noe som i morgen ikke lenger vil være tilgjengelig.

En annen ting å være oppmerksom på her er hvordan du henvender deg til besøkende. Noen eksperter vurderer bruken av førstepersonspronomen (Opprett min konto, få min kopi) den mest effektive, mens andre velger å bruke andrepersonspronomen (Få ditt eksemplar, gjør krav på din gratis prøveversjon). For å gjøre ting mer komplisert, ser de to teknikkene ut til å ha like mange støttespillere og argumenter i deres favør.

Uansett er det klart at en viss grad av personalisering for å henvende seg til besøkende kreves i CTA-kopi, da det får brukerne til å føle seg mer personlig involvert i produktet eller tjenesten. Og personlig tilknytning er avgjørende for konverteringer.

Hvordan designe CTA-knappene dine

Det strengt visuelle aspektet ved CTA-knappene er like viktig (om ikke enda mer) som selve kopien. Reglene høres enkle ut – knappene må vekke oppmerksomhet og invitere brukere til å klikke. Men det er ikke alltid lett å få til. For å skille seg ut på siden, må formen, størrelsen, fargen og plasseringen av CTA-knappene være i klar kontrast til resten av miljøet.

Formen på CTA-knapper

Det har du sikkert lagt merke til de fleste CTA-er (og de fleste knapper på nettet, for den saks skyld) er rektangulære. Jada, det er noen gode eksempler på CTA-er som er sirkulære, firkantede eller en annen, enda mindre vanlig form, men de fleste av dem er rektangulære. Hvorfor er det sånn?

Rektangler og firkanter er de formene vi møter mest, enten det er på nettet eller i hverdagen. Spesielt rektangler får oss til å føle oss komfortable ettersom de gir en følelse av stabilitet og trygghet.

På den annen side er det bevist at mennesker har en affinitet for kurver. Runde former er rett og slett mer behagelige for øynene enn skarpe, edgy. For ikke å nevne at sirkelen er en form som utstråler en følelse av fred, fullstendighet og harmoni.

Tatt i betraktning disse to fakta, er det logisk at den mest effektive formen for CTA-knapper viste seg å være en rektangel med avrundede hjørner. Denne formen ble veldig populær blant markedsførere og kan finnes på et stort antall nettsteder og apper.

Selvfølgelig er dette bare generelle retningslinjer hentet fra erfaring og noen godt undersøkte beste praksiser i UX. Det er CTA-knapper som kommer i alle slags uortodokse former, men de er vanligvis en del av et designmiljø preget av eksperimentering, svært spesifikk estetikk og så videre. Med andre ord – de representerer ikke normen.

Viktigheten av farger for CTA-knapper

Fargenes rolle i å forme vår oppfatning og opplevelse av alt visuelt innhold har blitt forsket på i flere tiår. Psykologer i dag er enige om at vi har en tendens til å tolke og følelsesmessig oppleve farger i henhold til visse mønstre, og dette er noe markedsførere har utnyttet i svært lang tid.

Spesifikke farger kan assosieres med spesifikke meldinger, formidler dem automatisk, på et underbevisst nivå. Bare tenk på trafikklys – fargene i seg selv kommuniserer ønsket budskap. Grønn – gå, rød – stopp.

Men når det kommer til disse to fargene og deres bruk i CTA-er, er ikke situasjonen så klar som den ser ut til. Du skulle tro at fargen rød, som en farge for alarm, forsiktighet og advarsel, ville avverge folk og føre til færre klikk. Men i flere uavhengige a/b-tester, rød var en klar vinner over grønn. Så når det gjelder kommunikasjon via farger, er det best å ta alle råd med en klype salt og gjøre dine egne tester for å få praktisk innsikt.

Husk imidlertid at selv etter at du har funnet paletten med høy konvertering for de visuelle meldingene dine, er arbeidet ditt langt fra over. Fargen på knappen vil være mest effektiv bare når den er i synergi med det visuelle miljøet. Forholdet mellom knappen og resten av layouten skal være harmonisk og balansert, men også kontrasterende nok til å trekke brukernes oppmerksomhet. Komplementære fargekombinasjoner er også verdt å vurdere – de er behagelige for øyet, og de gir den nødvendige kontrasten.

Betydningen av farger i utformingen av CTA-knapper blir enda tydeligere situasjoner som tilsier to knapper, hvorav en er en klassisk CTA og en annen som fører til tilleggsinformasjon om emnet.

I dette tilfellet må den strengt tatt CTA-typen utheves og fremheves, slik at brukerne fokuserer på den først. Dette kan oppnås med en dristig signalfarge, for eksempel rød, oransje eller en hvilken som helst variant av disse.

I eksemplet ovenfor vil du legge merke til at den andre knappen, den som inviterer besøkende til å lære mer om den aktuelle tjenesten, er mye mer dempet (i dette tilfellet bare skissert), og sørger for at CTA får all oppmerksomheten.

Animasjon og detaljer om CTA-knapper

Det tredje aspektet ved CTA-design er knappeanimasjonen. Sammen med ikoner, diskrete illustrasjoner og andre grafiske elementer, animasjon kan gi enda et lag med visuell og kommunikativ verdi. Når den brukes på riktig måte, kan funksjonell animasjon som et UX-verktøy gjøre knappene mer intuitive og direkte, og derfor øke effektiviteten deres betydelig.

Når du designer CTAer, animasjon brukes mest for sveveeffekter. Disse animasjonene bør ikke være for interaktive eller høylytte, siden vi ikke vil at de skal ta fokus fra budskapet. For mye animasjon kan forvirre brukeren og skape en negativ følelsesmessig effekt.

Imidlertid er subtilt animerte knapper alltid et godt bidrag til CTA-design, berikende det og sørger for at fokuset er klart.

I tillegg til animerte sveveeffekter, velger designere noen ganger tilleggselementer og ikoner, spesielt for knapper som inviterer brukere til å legge til i handlekurven, laste ned, laste opp, slette og så videre. I dette tilfellet er det viktig å sørge for at det er nok tom plass mellom teksten på knappen og disse tilleggselementene, samt mellom elementene og kantene på knappen. Knappen fremfor alt, må være lett å lese og må ikke virke rotete.

Plasseringen av CTA-knapper

Det siste aspektet som avgjør suksessen til en CTA-knapp er timingen eller, mer nøyaktig, plasseringen. Selv om det ikke er noen «gyllen regel» for hvor du faktisk skal sette knappen, er én ting klar – den skal serveres til den besøkende til rett tid.

Hva dette betyr er at du må tenke nøye gjennom på hvilket tidspunkt under besøkets opphold på siden han eller hun skal se knappen. Når den besøkende er godt forberedt på handlingen ved hjelp av visuelt og tekstlig innhold og informasjon, blir sjansen for å utføre ønsket handling reell.

Hele siden – dens design og innhold – bør derfor struktureres og utformes på en måte som leder den besøkende til det endelige målet (handlingen), det være seg et abonnement, et kjøp eller noe annet.

Plassere en CTA over bretten (den delen av siden som først er synlig ved innlasting) pleide å være en standard, men siden rulling er en handling som vi nå utfører så naturlig og automatisk, har «innholdet på den synlige delen av nettsiden» mistet noe av sin «prestisje». Faktisk kan det ofte være kontraproduktivt å sette en CTA på toppen, før brukeren i det hele tatt har sjansen til å finne seg til rette og utforske innholdet.

Hvis du plasserer knappen under fold, betyr det at den besøkende må fullføre en sti for å nå den. Hvis du har planlagt sidestrukturen riktig, vil banen være full av visuelle og tekstlige signaler som forsiktig presser den besøkende ned, og gjør ham klar for handlingen.

Når du har funnet det perfekte stedet for knappen, du må sørge for at det forblir i fokus. For å gjøre dette, må du sørge for at det er nok negativ plass rundt den. Dette lar besøkende «hvile øyet», og gjør at knappen er godt synlig og dens budskap blir forstått.

Siste tanker

Rent, enkelt, fokusert og engasjerende – dette er de viktigste egenskapene til en god, konverterende CTA-knapp. Vi så at mange av disse egenskapene kommer fra designet. Selv om de generelle retningslinjene og forslagene for utforming av den perfekte CTA-knappen er klare, anbefales alltid en individuell tilnærming. Jada, rødfargen kan vise seg å fungere utmerket, men hvis den kolliderer med tonen og paletten på nettstedet ditt, bør du ikke bruke den. Det samme gjelder retningslinjer angående form, størrelse og plassering av knappen. Når du har designet en knapp som passer til din visuelle merkevarebygging og finner et flott sted for den, sørg for å teste den med et par litt forskjellige versjoner. Og ikke glem å støtte CTAene dine med sterkt verdidrevet innhold og flott kopi.