5 designteknikker for bedre CTA-knapper
Når vi besøker de fleste nettsteder, har vi ofte et mål i tankene. For å nå det målet er det vanligvis en rekke trinn vi må ta, og det første trinnet starter med å klikke på en CTA (call to action) -knapp. Tenk på den siste gangen du meldte deg på en tjeneste, eller lastet ned en app, inkluderte prosessen sannsynligvis en samhandling med en handlingsknapp.
CTA-knappene er knappene du bruker på nettstedet ditt for å veilede brukere mot målkonvertering. Hele poenget med en CTA er å lede besøkende til et ønsket handlingsforløp. Noen vanlige eksempler på CTAer inkluderer:
- "Start en prøve"
- "Last ned app / bok / guide"
- "Registrer deg for oppdateringer"
- "Få en konsultasjon"
I dag diskuterer vi 5 beste fremgangsmåter for å designe CTA-knapper sammen med de beste eksemplene på ekte verden for å hjelpe deg med å få mest mulig klikk ut av destinasjonssiden din.
1. Visuelt slående knapp
Din knappfarge betyr noe. Faktisk, hvis du skal ta bare ett enkelt råd fra denne artikkelen, bør det være dette: "Vurder din CTA-knappefarge". Ved å bruke farge kan du få bestemte knapper til å skille seg ut mer enn andre ved å gi dem mer visuell fremtredende karakter.
Bruk kontrastfarger
Kontrastfarger fungerer best for CTA-knapper, med kontrastfarger er det mulig å lage slående knapper som skiller seg ut. Du bør velge en kontrasterende farge fra fargeskjemaet på nettsiden, samtidig som den passer inn med den overordnede designen. Vurder Firefox-eksemplet nedenfor. Den grønne fargen på CTA-knappen på Firefox-siden hopper av siden og umiddelbart får brukerens oppmerksomhet.
Firefox CTA-knappen er lysegrønn og skiller seg godt ut på en mørkblå bakgrunn
En annen iøynefallende CTA-knapp finner du på Hipmunk hjemmeside. En lyse oransje knapp fanger brukerens oppmerksomhet og definerer neste mulige handling.
Negativ plass
Ikke bare er fargen viktig for en CTA, men også mengden plass rundt den. Whitespace (eller negativ plass) skaper et viktig pustrom og skiller CTA-knappene dine fra andre elementer i brukergrensesnittet. Den gamle Dropbox-hjemmesiden var et godt eksempel på å bruke negativ plass til å lage sin primære CTA-pop. Den blå "Registrer deg gratis" CTA skiller seg ut mot den lette bluesen i bakgrunnen.
2. Handlingsorientert tekst
Skrive tekst for Call-To-Action-knappen som vil tvinge de besøkende til å ta de riktige handlingene, er ikke en enkel oppgave. Heldigvis finnes det noen få ting som kan hjelpe deg med å gjøre det:
Begynn med et verb
Du bør unngå vage og kjedelige ord som "Skriv inn mer informasjon" for CTA-knappene dine, og erstatt dem med mer handlingsorienterte ord som "Start gratis prøveversjon" eller "Få rabatt nå." Evernote har en av de vanligste, men jobber fortsatt med actionorienterte tekster for deres CTA-knapp.
Begynn med et verb som "Start", "Get" eller "Join"
Et mer interessant eksempel finnes på Treehouse hjemmeside. CTA på Treehouse nettsted sier ikke bare "Start en gratis prøve"; Det står "Krev din gratis prøveversjon." Forskjellen i ordlyden kan virke subtil, men "Krev din gratis prøveversjon" høres mye mer personlig ut.
Bruk kort og lett å forstå tekst for knapper
Sørg for å oppgi nøyaktig hva den besøkende vil få hvis de klikker på CTA. Ideelt sett vil du beholde knappetekst til mellom to og fem ord.
Legg til verdioppsett
Sannsynligvis har du lagt merke til at mange knapper har ordene som "gratis" i kopien deres, og det er ikke en tilfeldighet, ved å bruke slike ord i knappen kopi legger vekt på tilbudets verdi proposisjon. Derfor, når du skriver din CTA, prøver du å finne en måte å integrere ett (eller alle) 3 overbevisende ord:
- Gratis
- Bonus
- øyeblikkelig
La meg gi deg et eksempel: En stor frykt brukerne har før de forplikter seg til å registrere seg for noe, er at det vil være vondt å avbryte abonnementet dersom de ikke vil like tjenesten. Netflix lindrer den frykten ved å bruke løftet "Avbryt når som helst" rett ved siden av "CTA gratis".
Opprett et sans for brådskelse
Å opprette en følelse av haster i CTA-knappene dine kan gi noen imponerende klikkfrekvenser. For eksempel kan du bruke knappetekst som "Registrer deg og få 25% av i dag bare!" Begrensning av tiden noen må ta avgjørelsen gjør at folk ønsker å kreve sitt tilbud mens de kan.
Nyttig tekst
Noen ganger kan du vurdere å legge til en ekstra linje med informasjon i knappeteksten din. Denne øvelsen er vanlig med gratis prøveknapper. For eksempel kan en gratis prøveversjonsknapp si "30 dagers prøveversjon, ikke kredittkort" i mindre tekst under CTA-knappen med "Start gratis prøveversjon" -teksten. Denne ekstra teksten skal lette beslutningsprosessen.
3. Gjør det synlig uten å bla
Plasseringen av Call-to-Action-knappene er like viktig som fargen og meldingen. En CTA-knapp skal ligge på et lettvint å finne sted som følger organisk fra strømmen av nettsiden. Du bør prøve å holde CTA-knappen over folden, slik at brukerne aldri savner den. Ideelt sett bør CTA-knappen være blant de første tingene en bruker ser på siden når de når den. Ytterligere informasjon bør ligge under brettet, der den er tilgjengelig, men ikke distraherende.
4. Stor knapp med avrundede hjørner
Tenk på hvordan design kommuniserer råd. Hvordan forstår brukerne elementet som en knapp? Bruk form og størrelse for å få elementet til å se ut som en knapp.
Gjør det stort nok
CTA skal være stor nok til å se fra en avstand, men ikke så stor som å svekke oppmerksomheten fra hovedinnholdet på siden
Brukerknapper med avrundede hjørner
Knappform kan spille en stor rolle. Det er en bevist faktum de avrundede hjørnene er lettere på øynene. I ContentVerves test gjorde en rundet grønn knapp bedre enn et blått rektangel.
5. Mindre er mer når det kommer til valg
Husk at hvis du vil at kundene skal gjøre noe, må du hjelpe dem, ved å fjerne alle mulige hindringer fra veien. Når brukerne får for mange valg, har de en tendens til å bli forvirret. Så det er bedre å tilby de potensielle kundene bare ett alternativ.
Hvis du fortsatt vil inkludere flere knappvalg, legg vekt på ett valg over andre for å hjelpe trag brukere til en bestemt bane. Et godt eksempel er Evernote: så snart du kommer til en nedre del av Evernote hjemmeside, er det ganske klart at et foretrukket valg er "Registrer deg gratis", mens CTA for brukere å sammenligne planer er veldig sekundært.
Konklusjon
For å oppnå effektiv CTA-design, må du vurdere mer enn bare knappen selv. Det er også viktig å tenke på bakgrunnsfarge, rundt bilder, omgivende tekst og mange andre elementer. Basecamp-teamet forstår viktigheten av disse elementene og utformet et perfekt layout for deres destinasjonsside. Selv mikroskopien de bruker under CTA-knappen ("4 714 bedrifter registrerte seg denne uken!") Øker tilliten til potensielle kunder.
Jeg håper at de tipsene som er nevnt i denne artikkelen, vil hjelpe deg med å opprette en bedre oppfordringsknapp for nettstedet ditt. Det siste øyeblikket er viktigheten av testing - hvis du bestemmer deg for å gjenopprette en CTA på nettstedet ditt, husk å teste for å se om det fungerer for publikum.