Sådan designes en CTA-knap, der konverterer

Hvordan skal en CTA-knap se ud? Hvor skal den placeres? Hvordan undgår man irriterende CTA’er? Dette er blot nogle af de spørgsmål, der generer alle fra tekstforfattere og marketingfolk til web- og UX-designere. I dag skal vi ordne dem.

Hvad er en CTA?

Forkortelsen “CTA” står for Call to Action. En opfordring til handling er ethvert stykke design (normalt en knap), der beder den besøgende om at udføre en handling. Dette kan være alt fra at udforske webstedet til at udfylde en kontaktformular eller tilføje et produkt til indkøbskurven.

Når det er designet godt, CTA’er udfører en dobbelt funktion – de hjælper brugere med at navigere på et websted, og de repræsenterer et afgørende element i dit konverteringsflow. I sidste ende er deres rolle at få besøgende til at gøre det, du ønsker, de skal gøre. Som en diskret rejseleder, der forsigtigt fører en bruger gennem dit digitale miljø.

Teknisk set kan enhver knap være en CTA-knap, så længe den indeholder kopi, der forvandler den besøgende fra en passiv observatør til en aktiv bruger af et websted. Men en af ​​de vigtigste ting, der adskiller CTA’er fra resten af ​​knapperne på en hjemmeside, er, at de ud over den førnævnte kopi skal have visse træk (farve, form, position), der tiltrækker brugernes opmærksomhed og påvirke dem til at udføre en handling.

Det er klart, at CTA’er er af enorm betydning for en god brugeroplevelse og for din virksomheds bundlinje, så i denne artikel vil vi dele nogle ting, du skal huske på, når du opretter dine CTA’er.

Lad os starte med knapteksten.

Sådan skriver du CTA-kopi

Da effektiviteten af ​​CTA’er i høj grad afhænger af kvaliteten og strukturen af ​​dens kopi, er det klart, at denne tekst skal være gennemtænkt. CTA-kopi skal udføre to funktioner: at engagere den besøgende og at gøre det krystalklart, hvilken handling den besøgende forventes at tage.

For at opnå den engagerende værdi, teksten skal være direkte, klar og sympatisk, hvis ikke ligefrem charmerende. Fordi den kun kan indeholde så mange ord, bør budskabet i CTA-kopien give brugeren mulighed for intuitivt at forstå det nødvendige handlingsforløb.

I mange tilfælde vil den ideelle CTA-kopi blot angive webstedets konverteringsmål. Hvis dit mål er at få folk til at læse din blog, skal knappen blot sige Læs nu eller Læs mere. Hvis du vil have dem til at interagere med hjemmesiden, en knap med teksten Tag kontakt nu eller endda simpelthen Send os besked vil klare tricket fint.

Alligevel er det ikke nok kun at være kort, klar og (om muligt) underholdende. Der er lidt psykologi, der skal tages i betragtning her. Faktisk, en hel del forskning og test er blevet udført for at bestemme den type kopi, som brugerne finder den mest tiltalende, og hvilken CTA-tekst, der konverterer bedst.

Det er de fleste eksperter enige om skabe en følelse af at det haster er en nødvendig betingelse for vellykket CTA-kopi. Heldigvis kan dette opnås ret nemt, blot ved at indsætte et ord eller to, såsom “Nu” eller “I dag”, måske kombineret med “Kun.”

Knapper siger Få dit gratis eksemplar nu eller Tilmeld dig og få 50 % rabat kun i dag! er meget konverterende, da brugerne ikke ønsker at gå glip af en særlig mulighed for at få noget, som i morgen ikke længere vil være tilgængeligt.

En anden ting at være opmærksom på her er, hvordan du henvender dig til dine besøgende. Nogle eksperter overvejer brugen af ​​førstepersons pronominer (Opret min konto, få min kopi) den mest effektive, mens andre vælger at bruge andenpersons pronominer (Få din kopi, kræve din gratis prøveperiode). For at gøre tingene mere komplicerede ser de to teknikker ud til at have lige mange tilhængere og argumenter til deres fordel.

Uanset hvad, er det klart, at en vis grad af personalisering i henvendelse til de besøgende er påkrævet i CTA-kopi, da det får brugerne til at føle sig mere personligt involveret i produktet eller tjenesten. Og personlig forbindelse er afgørende for konverteringer.

Sådan designer du dine CTA-knapper

Det strengt visuelle aspekt af CTA-knapperne er lige så vigtigt (hvis ikke endnu mere) som selve kopien. Reglerne lyder enkle – knapperne skal vække opmærksomhed og invitere brugerne til at klikke. Men det er ikke altid nemt at opnå. For at skille sig ud på siden skal formen, størrelsen, farven og placeringen af ​​CTA-knapper være i klar kontrast til resten af ​​deres miljø.

Formen på CTA-knapper

Det har du sikkert lagt mærke til de fleste CTA’er (og de fleste knapper på nettet, for den sags skyld) er rektangulære. Sikker på, der er nogle gode eksempler på CTA’er, der er cirkulære, firkantede eller en anden, endnu mindre almindelig form, men de fleste af dem er rektangulære. Hvorfor er det?

Rektangler og firkanter er de former, vi støder mest på, hvad enten det er på nettet eller i vores hverdag. Især rektangler får os til at føle os godt tilpas, da de giver en følelse af stabilitet og sikkerhed.

På den anden side er det blevet bevist, at mennesker har en affinitet til kurver. Runde former er simpelthen mere behagelige for øjnene end skarpe, edgy. For ikke at nævne, at cirklen er en form, der udstråler en følelse af fred, fuldstændighed og harmoni.

I betragtning af disse to fakta er det logisk, at den mest effektive form for CTA-knapper viste sig at være en rektangel med afrundede hjørner. Denne form blev vildt populær blandt marketingfolk og kan findes på et stort antal sider og apps.

Dette er selvfølgelig kun generelle retningslinjer, der er afledt af erfaring og nogle velundersøgte bedste praksisser i UX. Der er CTA-knapper, der kommer i alle mulige uortodokse former, men de er generelt en del af et designmiljø præget af eksperimentering, meget specifik æstetik og så videre. Med andre ord – de repræsenterer ikke normen.

Farvens betydning for CTA-knapper

Farvernes rolle i at forme vores opfattelse og oplevelse af alt visuelt indhold er blevet undersøgt i årtier. Psykologer i dag er enige om, at vi har en tendens til at fortolke og følelsesmæssigt opleve farver efter bestemte mønstre, og det er noget, som marketingfolk har udnyttet i meget lang tid.

Specifikke farver kan associeres med bestemte meddelelser, formidler dem automatisk på et underbevidst plan. Tænk bare på trafiklys – farverne kommunikerer selv det ønskede budskab. Grøn – gå, rød – stop.

Men når det kommer til disse to farver og deres brug i CTA’er, er situationen ikke så klar, som den ser ud til. Man skulle tro, at farven rød, som en farve af alarm, forsigtighed og advarsel, ville afskrække folk og føre til færre klik. Men i flere uafhængige a/b-tests, rød var en klar vinder over grøn. Så når det kommer til at kommunikere via farver, er det bedst at tage alle råd med et gran salt og lave dine egne tests for at få brugbar indsigt.

Husk dog, at selv efter at du har fundet paletten med høj konvertering til dine visuelle budskaber, er dit arbejde langt fra slut. Farven på knappen vil kun være mest effektiv, når den er i synergi med dets visuelle miljø. Forholdet mellem knappen og resten af ​​layoutet skal være harmonisk og afbalanceret, men også kontrasterende nok til at tiltrække brugernes opmærksomhed. Komplementære farvekombinationer er også værd at overveje – de er behagelige for øjet, og de giver den nødvendige kontrast.

Betydningen af ​​farver i design af CTA-knapper bliver endnu tydeligere situationer, der berettiger til to knapper, hvoraf den ene er en klassisk CTA og en anden, der fører til yderligere information om emnet.

I dette tilfælde skal den strengt CTA-type knap fremhæves og fremhæves, så brugerne fokuserer på den først. Dette kan opnås med en fed signalfarve, såsom rød, orange eller enhver variation deraf.

I eksemplet ovenfor vil du bemærke, at den anden knap, den, der inviterer besøgende til at lære mere om den pågældende tjeneste, er meget mere afdæmpet (i dette tilfælde blot skitseret), hvilket sikrer, at CTA’en får al opmærksomheden.

Animation og detaljer om CTA-knapper

Det tredje aspekt af CTA-design er knap-animationen. Sammen med ikoner, diskrete illustrationer og andre grafiske elementer, animation kan bringe endnu et lag af visuel og kommunikativ værdi. Når den bruges korrekt, kan funktionel animation som et UX-værktøj gøre knapper mere intuitive og direkte og derfor i høj grad forbedre deres effektivitet.

Når du designer CTA’er, animation bruges mest til svæveeffekter. Disse animationer bør ikke være for interaktive eller høje, da vi ikke ønsker, at de fjerner fokus fra budskabet. For meget animation kan forvirre brugeren og skabe en negativ følelsesmæssig effekt.

Imidlertid er subtilt animerede knapper altid et godt bidrag til CTA-design, der beriger det og sørger for, at fokus er klart.

Ud over animerede svæveeffekter vælger designere nogle gange yderligere elementer og ikoner, især for knapper, der inviterer brugere til at tilføje i kurv, downloade, uploade, slette og så videre. I dette tilfælde er det vigtigt at sørge for, at der er nok tom plads mellem teksten på knappen og disse ekstra elementer, såvel som mellem elementerne og knappens kanter. Knappen frem for alt, skal være let at læse og må ikke virke rodet.

Placeringen af ​​CTA-knapper

Det sidste aspekt, der bestemmer succesen for en CTA-knap er dens timing eller mere præcist dens placering. Selvom der ikke er nogen “gyldne regel” for, hvor knappen rent faktisk skal placeres, er én ting klar – den skal serveres til den besøgende på det rigtige tidspunkt.

Det betyder, at du skal tænke meget grundigt over, på hvilket tidspunkt under den besøgendes ophold på siden, han eller hun skal se knappen. Når den besøgende er godt forberedt på handlingen ved hjælp af visuelt og tekstuelt indhold og information, bliver chancen for at udføre den ønskede handling reel.

Hele siden – dens design og dens indhold – bør derfor være struktureret og udtænkt på en måde, der leder den besøgende til det endelige mål (handling), det være sig et abonnement, et køb eller andet.

Placering af en CTA over folden (den del af siden, der først er synlig ved indlæsning) plejede at være en standard, men da rulning er en handling, som vi nu udfører så naturligt og automatisk, har “over skillelinjen” mistet noget af sin “prestige”. Faktisk kan det ofte virke kontraproduktivt at sætte en CTA lige der øverst, før brugeren overhovedet har mulighed for at sætte sig ind og udforske indholdet.

Hvis du placerer knappen under fold, betyder det, at den besøgende skal gennemføre en sti for at nå den. Hvis du planlagde din sidestruktur rigtigt, vil stien være fuld af visuelle og tekstuelle signaler, der blidt skubber den besøgende ned og gør ham klar til handlingen.

Når du har fundet det perfekte sted til knappen, du skal sørge for, at den forbliver i fokus. For at gøre dette skal du sikre dig, at der er nok negativ plads omkring den. Dette lader den besøgende “hvile øjet” og giver mulighed for, at knappen er tydeligt synlig og dens budskab forstås.

Afsluttende tanker

Rent, ligetil, fokuseret og engagerende – det er de primære egenskaber ved en god, konverterende CTA-knap. Vi så, at mange af disse kvaliteter kommer fra designet. Selvom de generelle retningslinjer og forslag til at designe den perfekte CTA-knap er klare, tilrådes en individuel tilgang altid. Selvfølgelig kan den røde farve bevise sig for at fungere godt, men hvis den kolliderer med tonen og paletten på din hjemmeside, bør du ikke bruge den. Det samme gælder retningslinjer vedrørende knappens form, størrelse og placering. Når du har designet en knap, der passer til din visuelle branding og finder et godt sted til det, skal du sørge for at teste det med et par lidt forskellige versioner. Og glem ikke at støtte dine CTA’er med noget stærkt værdidrevet indhold og fantastisk kopi.