Design Systemer

Anatomien til en CTA-knapp i 2017: beste praksis for tale og tone, stil og komponent.

Her vil jeg forklare hvordan et Design System fungerer ved å bruke et enkelt grensesnittelement: CTA-knappen som er ansvarlig for å lede brukeren til hovedhandlingen på websiden din.

Denne artikkelen tar sikte på å presentere noen retningslinjer for utforming av en effektiv oppfordring til handlingskomponent og hvordan team kan gjøre dette grensesnittelementet vellykket å samarbeide.

Stemme og tone

Hvorfor skal jeg klikke på denne knappen?

en. Begynn med et handlingsverb og skriv i første person

CTA-knappen din skal begynne med et handlingsverb som "Start", "Få" eller "Last ned". De er handlingsorienterte.

I en testkjøring av Michael Aagaard (Unbounces Senior Conversion Optimizer) fant han at å endre CTA-knappkopien fra den andre personen til den første personen resulterte i et 90% løft i klikkfrekvensen.

b. Forventning

De fleste nettbrukere nøler med å ta ting de blir presentert på nettet til pålydende. Av erfaring har tilliten deres blitt brent av lenker som lover gratis service bare for å finne ut at de må oppgi kredittkortnummeret sitt for å få det de vil ha.

For å øke klikkkonvertering og å bygge tillit, kan du forutse brukernes skepsis og fortelle dem hva de vil få ved å ta handlingen du har presentert dem. Når du designer en call to action-knapp, tenk på alle potensielle spørsmål brukerne vil ha, og sørg for at du svarer dem i tide.

c. Følelse av haster

Setning av handlingen ved å bruke dristige, selvsikre og kommanderende ord kan endre brukerens oppfatning på en slik måte at de overbeviser dem om at de ikke burde vente lenger med å ta grep, og at å vente på å ta handling ville resultert i en straff eller en savnet mulighet.

d. Følelse av letthet

Ofte stammer brukerens nøling til å iverksette handlinger fra å tenke at en handling vil være vanskelig, kostbar eller tidkrevende. Ved å ta vare på disse bekymringene, kan CTA-knappen din føre til flere konverteringer.

e. Trigger ord

Utløsende ord er ord og uttrykk som trigger en bruker til å klikke. De inneholder de essensielle elementene for å gi motivasjonen til brukeren til å fortsette å bla. Gi dem en god grunn til å gjøre det du vil at de skal gjøre. Hvis brukeren ser etter "planer" eller "priser", og CTA-knappen din sier "planer" eller "priser", vil de klikke på den. Så i dette tilfellet ville "planer" og "priser" være utløsende ord.

Tenk på triggerord som søkeord!

Jared Spool har gode tips i artikkelen: The Right Trigger Words.

Stil

Hvor skal jeg klikke?

en. Form

Det første du bør vite er hvilken form som CTA-knappen din har. De to mest populære knappeformene er avrundede og firkantede kanter, og formen som fungerer best for deg vil i stor grad avhenge av testing. Ikke overse denne faktoren. Knappeform kan påvirke konverteringsfrekvensene.

b. Størrelse

På websider indikerer størrelsen på et element i forhold til dets omgivende elementer dets betydning: jo større elementet er, desto viktigere er det. Bestem hvor viktige bestemte handlinger er, og størr CTA-knappen din deretter.

c. Hvit avstand

Bruken av mellomrom (eller død plass) rundt en CTA-knapp er en effektiv måte å få den til å skille seg ut i områder der det er mange elementer.

d. plassering

Plasseringen av en CTA-knapp er avgjørende for å trekke oppmerksomheten til de besøkende. Plassering på prominente steder som den øverste delen av en webside kan føre til høyere konverteringer til destinasjonssiden fordi brukere sannsynligvis vil merke CTA-knappen og iverksette tiltak.

Designere som bruker mobilapper designet med standardene for Google Material Design, vet allerede at primærknappen (FAB - Float Action Button) vil være plassert nederst til høyre på skjermen. Plassering betyr noe!

e. Kontrasterende farge

Sett en aksentfarge på CTA-knappen og hold deg fast i den. Ikke bruk hovedfargen eller sekundærfargen på merket ditt.

Michael Aagaard sier:

Mitt beste råd er å bruke sunn fornuft og kontrastfarger når du designer landingsside-knappene. Den gode gamle "skvisstesten" er alltid nyttig. Sett sammen siden din, ta noen skritt tilbake, skvis øynene og se om knappen din skiller seg ut. Jeg starter vanligvis med å eksperimentere med en oransje eller grønn knapp, ganske enkelt fordi de ofte klarer seg godt i tester. Jeg tror ikke det er noen dypere psykologisk grunn, det virker bare som om de skiller seg ut på de fleste landingssider på grunn av den gjennomsnittlige designen. Igjen handler det om kontekst, og jeg har sett tester der en lilla knapp har utkonkurrert både grønne og oransje variasjoner.

Se for deg at CTA-knappen din trenger å være nesten en anomali på skjermen. For å gjøre det, unngå noen Gestalt-prinsipper som nærhet, likhet, kontinuitet og felles region. Bruk bare en lov: samlingspunkt. Ved å gjøre dette vil CTA-knappen bli fremhevet i visningen til brukeren din.

Komponent

Det er på tide å forvandle grensesnittelementene dine til komponenter!

en. Vær en komponent for designere og utviklere

Designere må lage grensesnitt som tenker i komponenter, ved å bruke de riktige verktøyene som er tilgjengelige i markedet, for eksempel Sketch, Adobe XD, Figma, etc. Utviklere! Bruk litt front-end teknologi for komponentisering som React, Angular, Vue.js, etc.

b. Lik navnekonvensjon for designere og utviklere

Nå som vi jobber med komponenter, må teamene snakke det samme språket. For å gjøre dette må vi ha den samme navnekonvensjonen for komponenter for både designere og utviklere.

Reager eksempel:
Eksempel på skissesymbol:
knapp / primær-knapp
knapp / sekundær-knapp

c. Optimalisert for enhetstesting

For at QA-teamet skal arbeide mer effektivt, må du alltid erklære en identifikator for komponenten din. Og gjør det klart hvilken kontekst komponenten brukes.

HTML-eksempel:

  Kjøp nå!

d. Optimalisert for Analytics

Tilpassede dataattributter er en rask måte å fange opp ytterligere informasjon om innhold på siden. Det er en strømlinjeformet løsning som hjelper deg med å bedre forstå hvordan en bruker styrer gjennom nettstedets innhold. Tilpassede dataattributter er en konstruksjon av HTML 5-spesifikasjonen og støttes bredt i alle større nettlesere. Siden det er gyldig HTML og HTML er veldig brukervennlig å implementere, gjør dette det desto mer attraktivt å ta for en snurr.

HTML-eksempel:

  Last ned PDF

Det er flere fordeler med å implementere og bruke dataattributter:

e. Optimalisert for A / B-testing

Utfør god praksis for komponentoptimalisering som ble sagt ovenfor, og nyt å teste alle tipsene til Voice & Tone og Style.

Reager eksempel:
HTML-utgang:
<-knappen
  class = "primær-knapp - b"
  data-variant = "b"
  data-kampanje = "St. Patrick's Day">
  Øl i dag!
"Målet med en test er ikke å få et løft, men snarere å få en læring" - Dr. Flint McGlaughlin, MECLABS

Optimalisering er en pågående prosess. Er ikke så viktig om de første testresultatene er positive eller negative.

- Selvfølgelig er det enklere å slå et hjemmekjør i første sving. Men når du nærmer deg optimalisering som en prosess - ikke en engangs mulighet til å svinge for gjerdene - vil du se at å stoppe ved noen få baser underveis ofte er det som trengs for å vinne spillet. ”- Michael Aagaard, Unbounce

Å huske

Ingenting er skrevet i stein. Test mye. Det handler om kontekst.

Inngående markedsføring

Alt som ble presentert i denne artikkelen kan kombineres med en eller flere strategier for Inbound Marketing. Lær mer om hva som er i lenken nedenfor:

referanser