5 Designteknikker til bedre CTA-knapper
Når vi besøger de fleste websites, har vi ofte et mål i tankerne. For at nå det mål er der normalt en række trin, vi skal tage, og det første trin starter med at klikke på en CTA (call to action) -knap. Tænk på sidste gang du tilmeldte dig en tjeneste eller hentede en app, og processen indebar sandsynligvis en interaktion med en opfordring til handling.
CTA-knapper er de knapper, du bruger på dit websted, til at guide brugerne mod din målkonvertering. Hele punktet i en CTA er at lede dine besøgende til et ønsket handlingsforløb. Nogle almindelige eksempler på CTA'er omfatter:
- "Start en prøve"
- "Download app / book / guide"
- "Tilmeld dig opdateringer"
- "Hør en høring"
I dag diskuterer vi 5 bedste metoder til at designe CTA-knapper sammen med de bedste eksempler på virkeligheden for at hjælpe dig med at få mest muligt ud af klik på din destinationsside.
1. Visuelt slående knap
Din knapfarve betyder noget. Faktisk, hvis du kun vil tage et enkelt stykke råd fra denne artikel, bør det være denne: "Overvej din CTA-knapfarve". Ved at bruge farve kan du få visse knapper til at skille sig ud over andre ved at give dem mere visuel fremtrædende karakter.
Brug kontrastfarver
Kontrastfarver fungerer bedst for CTA-knapper, ved hjælp af kontrastfarve er det muligt at oprette slående knapper, der skiller sig ud. Du skal vælge en kontrasterende farve fra websides farveskema, mens du stadig passer ind i det overordnede design. Overvej Firefox-eksemplet nedenfor. Den grønne farve på CTA-knappen på Firefox-siden hopper ud af siden og får straks brugerens opmærksomhed.
Firefox CTA-knappen er lysegrøn og skiller sig godt ud på en mørkblå baggrund
En anden iøjnefaldende CTA-knap findes på Hipmunk hjemmeside. En lys orange knap fanger brugerens opmærksomhed og definerer den næste mulige handling.
Negativt rum
Farven er ikke kun vigtig for en CTA, men også mængden af plads omkring den. Whitespace (eller negativt rum) skaber et vigtigt åndedræt og adskiller dine CTA-knapper fra andre elementer i din brugergrænseflade. Den gamle Dropbox hjemmeside var et godt eksempel på at bruge negativt rum til at lave deres primære CTA pop. Den blå "Tilmeld dig gratis" CTA skiller sig ud mod baggrundens lyse blues.
2. Handlingsorienteret tekst
Skrive tekst til din opfordring til handling, der tvinger dine besøgende til at træffe de rigtige handlinger, er ikke en nem opgave. Heldigvis er der et par ting, der kan hjælpe dig med at gøre det:
Begynd med et verb
Du bør undgå vage og kedelige ord som "Indtast for mere information" til dine CTA knapper og erstat dem med mere handlingsorienterede ord som "Start din gratis prøveversion" eller "Få rabat nu." Evernote har en af de mest almindelige, men arbejder stadig actionorienterede tekster til deres CTA-knap.
Begynd med en verb som "Start", "Get" eller "Join"
Et mere interessant eksempel kan findes på Treehouse hjemmeside. CTA på Treehouse hjemmeside siger ikke bare "Start en gratis prøve"; det siger "kræve din gratis prøveversion." Forskellen i ordlyden kan virke subtil, men "krav om din gratis prøve" lyder meget mere personlig.
Brug kort og let at forstå tekst til knapper
Vær sikker på at angive præcis, hvad den besøgende vil få, hvis de klikker på CTA. Ideelt set vil du holde knaptekst til mellem to og fem ord.
Tilføj Value Proposition
Sandsynligvis har du bemærket, at mange knapper har ordene som "gratis" i deres kopi, og det er ikke tilfældigt at bruge sådanne ord i knappen kopi understreger dit tilbuds værdi proposition. Når du skriver din CTA, så prøv at finde en måde at integrere et (eller alle) 3 overbevisende ord:
- Gratis
- Bonus
- Øjeblikkeligt
Lad mig give dig et eksempel: En stor frygt for brugerne har før man begår at tilmelde sig noget, er det, at det vil være en smerte at annullere deres abonnement, hvis de ikke kan lide tjenesten. Netflix lindrer den frygt ved at bruge løftet "Annuller når som helst" lige ved siden af "CTA gratis".
Opret en uopsættelighed
Konstruere en følelse af uopsættelighed i dine CTA-knapper kan give nogle imponerende klikfrekvenser. Du kan f.eks. Bruge knappetekst som "Tilmeld dig og få 25% rabat i dag!" Begrænsning af den tid, som nogen skal træffe beslutningen, gør, at folk ønsker at gøre krav på deres tilbud, når de kan.
Nyttig tekst
Nogle gange kan du overveje at tilføje en ekstra informationslinje i din knaptekst. Denne praksis er fælles med gratis prøveknapper. For eksempel kan en gratis prøveknapp sige "30 dages prøve, intet kreditkort" i mindre tekst under CTA-knappen med "Start din gratis prøve" -tekst. Denne ekstra tekst skal lette beslutningsprocessen.
3. Gør det synligt uden at rulle
Placeringen af dine kald-til-handling-knapper er lige så vigtig som farven og beskeden. En CTA-knap skal placeres på et let at finde sted, der følger organisk fra strømmen af websiden. Du bør forsøge at holde din CTA-knap over folden, så brugerne aldrig savner det. Ideelt set skal din CTA-knap være blandt de første ting en bruger ser på siden, når de når den. De yderligere oplysninger skal ligge under folden, hvor den forbliver tilgængelig, men ikke distraherende.
4. Stor knap med afrundede hjørner
Tænk på, hvordan designet kommunikerer rådgivning. Hvordan forstår brugerne elementet som en knap? Brug form og størrelse til at gøre elementet ligne en knap.
Gør det stort nok
CTA'en skal være stor nok til at se fra en afstand, men ikke så stor, at det mindsker opmærksomheden fra hovedindholdet på siden
Brugerknapper med afrundede hjørner
Button form kan spille en stor rolle. Det er en dokumenteret kendsgerning de afrundede hjørner er lettere på øjnene. I ContentVerves test gjorde en afrundet grøn knap bedre end et blåt rektangel.
5. Mindre er mere, når det kommer til valg
Husk, at hvis du vil have dine kunder til at handle, skal du hjælpe dem ved at fjerne alle mulige forhindringer fra deres vej. Når brugerne får for mange valg, har de tendens til at blive forvirrede. Så det er bedre at tilbyde potentielle kunder kun en mulighed.
Hvis du stadig ønsker at inkludere flere knapper, skal du vægt på et valg over andre for at hjælpe tragtbrugere mod en bestemt sti. Et godt eksempel er Evernote: Så snart du når en nederste del af Evernote hjemmeside, er det ret klart, at et foretrukket valg er "Tilmeld dig gratis", mens CTA for brugere at sammenligne planer er meget sekundært.
Konklusion
For at opnå et effektivt CTA-design skal du overveje mere end blot knappen selv. Det er også vigtigt at tænke på baggrundsfarve, omgivende billeder, omgivende tekst og mange andre elementer. Basecamp team forstår betydningen af disse elementer og designet et perfekt layout til deres destinationsside. Selv den mikroskopi, de bruger under CTA-knappen ("4,714 virksomheder har tilmeldt sig denne uge!") Øger tilliden hos potentielle kunder.
Jeg håber, at de tips, der er nævnt i denne artikel, hjælper dig med at oprette en bedre opfordring til handlingsknap til dit websted. I sidste øjeblik er vigtigheden af at teste - hvis du beslutter dig for at genskabe en CTA på dit websted, husk at teste for at se, om det virker for dit publikum.