Knapper til handling Knapper Retningslinjer, beste praksis og eksempler

Ring til handlingsknapper på nettsteder blir ofte forsømt. Designere forstår noen ganger ikke nøyaktig hva som gjør en god samtale til handlingsknappen enn å være attraktiv og passer inn i den overordnede designen. Men ring til handlingsknapper er for viktig for å bli utformet uten noen form for forståelse for hva som gjør dem effektive. Tross alt er hovedpunktet for en oppringing til handlingsknapp å få besøkende til gjøre noe.

Det er viktig å få minst en grunnleggende forståelse av hvordan farge, skala, språk og andre faktorer påvirker konverteringsfrekvensen for en oppringing til handlingsknapp. Begrepene her er ikke kompliserte, men de tar litt forethought og planlegger å skape de mest effektive handlings-knappene som er mulige innen et gitt design. Les videre for mer informasjon om hvert av disse punktene og mer.

Formålet med "Call to Action" -knappene

Ring til handlingsknapper kan betjene en rekke funksjoner. Tross alt, “oppfordring til handling” er egentlig litt vag. Alt det betyr er at det er hovedformålet er å få en besøkende til nettstedet ditt til gjør noe. At noe kan legge til et produkt i handlekurven, laste ned noe, be om informasjon, eller omtrent alt annet.

Fordi ring til handlingsknapper har så varierte formål, må mye hensyn tas til hva knappen har som mål å oppnå. Typen av nettsted, målmarkedet og den ønskede handlingen kan alle spille en rolle for hvordan du best kan designe en oppfordring til handlingsknapp.

Typer av "Call to Action" -knapper

Det finnes noen forskjellige typer oppringningsknapper. Mens hver type tar sikte på å få besøkende til å utføre en bestemt handling, kan denne handlingen variere betydelig. Nedenfor er de vanligste typene av action-knapper, basert på handlingen de vil ha deg til å ta.

1. Legg i handlekurven Knapper

E-handelsnettsteder bruker vanligvis en rekke anrop til handlingsknapper, men den mest brukte er den “Legg i handlekurv” knapp. Disse knappene vises vanligvis på de enkelte produktsidene. Deres formål er å lokke kunder til å kjøpe en vare. Vanlige designelementer i tilleggsknapper inneholder enkle ordlyd (for eksempel “Legg i handlekurv” eller “Legg til i kurven” eller “Kjøp nå“) og bruken av ikoner (vanligvis en pose eller vogn).

2. Last ned knapper

Nedlastningsknappene ligner på knappene i handlekurven, fordi de prøver å lokke en besøkende til å ta i besittelse av et element. Ved nedlastingsknapper velger mange designere å inkludere mer informasjon enn andre typer knapper (for eksempel versjoninformasjon eller nedlastingsstørrelse).

3. Testknapper

Noen steder prøver å lokke sine besøkende til å prøve sine tilbud, generelt i form av en gratis prøveperiode. Dette kan være en gratis nedlasting eller en gratis konto, avhengig av det aktuelle nettstedet. Noen nettsteder bruker “mindre er mer” filosofi og holde språket på knappene sine til et minimum, mens andre liker å tilby mer informasjon om hva forsøket inneholder.

4. Lær mer knapper

Lær mer knapper blir vanligvis brukt på slutten av en blokk med teaserinformasjon (ofte på hjemmesiden). Disse knappene er vanligvis enkle, men ofte overdimensjonerte for å tiltrekke besøkende oppmerksomhet.

5. Registrer knapper

Registreringsknappene vises oftest i to forskjellige versjoner. Den første typen er vanligvis direkte knyttet til et registreringsskjema. Den andre typen brukes vanligvis på samme måte som “Legg i handlekurv” knapper, som en måte for brukerne å kjøpe eller registrere seg for en tjeneste eller konto, før de faktisk når et påmeldingsskjema.

Det finnes andre typer kall til handlingsknapper, men disse er de vanligste. Retningslinjer som gjelder for de ovennevnte, vil trolig også gjelde for alle andre typer handlingsknapper du kan designe.

Bruk negativ plass effektivt

Du vil at samtalen til handlingsknapper skal skille seg ut fra det omkringliggende innholdet og virkelig gi oppmerksomhet fra besøkende på nettstedet ditt. For det formål må du bruke negativ plass rundt disse knappene. Ta med tomt mellomrom mellom innholdet ditt og din ring til handlingsknapp. Selv om dette er mindre viktig (og mindre vanlig) på noen knapper, for eksempel legge til kurv-knapper, med andre, som de som lærer mer, fungerer det bedre med mer plass.

Det er viktig å balansere mengden negativ plass du har rundt knappene med størrelsen på knappene selv. Det handler om proporsjon. Du vil ha knappen din, plassen rundt den, og det omkringliggende innholdet til alle ser ut som de går sammen, selv med forskjeller i størrelse. Det kan hende du må fitte rundt med ting litt for å få dem til å se akkurat ut.

Noen retningslinjer:

Pass på at det er nok plass rundt knappen din slik at den ikke føles rotete
Vurder prinsipper som tredjedelsregel eller Golden Ratio når du bestemmer hvor mye plass som skal inkluderes
Negativ plass gir anropet til handlingsknappen for å skille seg ut fra ditt andre innhold og setter det fra hverandre

Størrelse og farge

Hvor stor ringeknappene dine er til, er svært viktig. En knapp som er for stor vil overmanne alt rundt den. En knapp som er for liten vil gå seg vill i blandingen av alt annet innhold på en side. Du vil at knappen din skal være stor nok til å skille seg ut uten overveldende design.

Farge kan brukes til stor effekt for å balansere størrelsen på knappene dine. For større knapper, velg en farge som er mindre fremtredende innenfor ditt design (men fremdeles skiller seg ut igjen i bakgrunnen). For en mindre knapp, vil du kanskje velge en lysere, kontrasterende farge for å virkelig lage knappen pop. I begge tilfeller må du kontrollere at fargen du bruker, setter knappen fra hverandre uten å kollidere med nettstedets overordnede design.

Noen retningslinjer:

Dine anropsknapper skal ideelt sett være de største knappene på en gitt side
Bruk kontrasterende farger for å få mindre knapper til å skille seg ut mer
Bruk mindre forskjellige farger for å få større knapper til å passe inn bedre
Du ringer til handlingsknapper må beordre oppmerksomhet uten å overvelde designet ditt

Språk

Den nøyaktige ordlyden du velger å bruke på anropsknappen din, kan ha stor effekt på konvertering. Sammenligne “Kjøp nå” med “Legg i handlekurv“. Den ene er mye mer presserende enn den andre. Eller hva med “Prøv det gratis” med “Gratis prøveperiode“? Den ene er mye punchier enn den andre og skiller seg ut mer.

Språket du bruker på din samtale til handlingsknapper, skal være så rett frem og enkelt som mulig. Du vil at besøkende skal vite med et blikk akkurat hva de får når du klikker på en knapp. Hvis de spørsmålet om det, betyr det at de har stoppet, noe som kan føre til lavere konverteringsfrekvenser.

Ikke glem skriftstørrelsene dine også. Teksten på handlingsknappen din skal være stor og fet, riktig tilpasset størrelsen og fargen på selve knappen. Pass på at det er tilstrekkelig kontrast og at teksten er lett å lese.

Noen retningslinjer:

Bruk enkelt, direkte språk
Bruk en stor, fet skrift på knappen for hovedteksten
Sørg for at språket klart krever en bestemt handling

Opprett haster

Du vil ha besøkende på nettstedet ditt for å utføre de ønskede handlingene med så lite tanke som mulig. Mens du ikke vil bedra de besøkende, desto flere muligheter du gir dem til å stoppe og vurdere hva de gjør, desto flere muligheter gir de dem til å si “Nei”.

Du vil at knappene dine skal gi dem inntrykk av at de trenger å handle med en gang. Du vil oppfordre dem til å ta sin avgjørelse umiddelbart, på øyeblikkets anspore. Selv om dette ikke vil fungere for hver oppkjøp til handlingsknapp (spesielt de som kjøper varer med høyt billett), for å ha rimelige eller gratis handlinger, er det ønskelig å ha besøkende klikk med liten forethought..

Noen retningslinjer:

Oppfordre dine besøkende til å handle umiddelbart
Ikke gi dine besøkende noen grunn til å pause
Mens haster er viktig, må du ikke villede dine besøkende på noen måte

Gi ekstra informasjon

Bruk eventuelt anropsknappen for å gi besøkende ekstra informasjon om hva de skal få hvis de klikker på knappen. Dette er mest sett med prøveknapper eller nedlastningsknapper. Vanlige eksempler på ekstra informasjon inkluderer hvor lang tid en gratis prøveperiode vil vare eller størrelsen på en filnedlasting. Versjonsinformasjon er også vanlig sett.

Når du inkluderer ekstra informasjon, husk at du må holde fokus på selve handlingen. Pass på at teksten til språket lokker besøkende til å handle, er mest fremtredende, med annen informasjon mye mindre synlig.

Noen retningslinjer:

Bare ta med ekstra informasjon når den legger til brukeropplevelsen
Ekstra informasjon er bare hensiktsmessig på noen typer oppringningsknapper, spesielt nedlastings- eller prøveknapper
Pass på at hovedanropet til handling fortsatt er den mest fremtredende teksten på knappen

Prioriter

Det er viktig å prioritere handlingsknappene på siden din hvis det er mer enn én. Dette kan gjøres på flere måter, men de vanligste er ved bruk av farge og størrelse.

Bruk farge til å markere den viktigste knappen på en side, eller for å få de mindre viktige til å virke mindre fremtredende. Eller bruk størrelsen for å få den viktigste knappen til å skille seg ut (ved å gjøre den større) og de-understreke de mindre viktige.

Ikoner og bilder

Inkludering av visuelle signaler i handlingsknappene dine kan også bidra til å øke konverteringsfrekvensen. Et ikon av en handlekurv på en “Legg i handlekurv” knappen, for eksempel, eller en pil på en nedlastningsknapp er begge gode eksempler. Tenk på unike ikoner som skal brukes, men sørg for at ikonet legger til brukeropplevelsen ved å avklare hva knappen er for, og legger ikke til noen forvirring.

Noen retningslinjer:

Kontroller at ikonene du bruker hjelper deg med å avklare knappens betydning, i stedet for å forvirre den
Enkelt anerkjente ikoner kan umiddelbart indikere betydning for dine besøkende
Ikke vær redd for å bruke mindre brukte ikoner, så lenge deres betydning fortsatt er tydelig

eksempler

Her er noen Eksempler på flotte Call-to-Action-knapper. Selv om de ikke alle overholder retningslinjene ovenfor, oppfyller de nok av kriteriene som skal betraktes som gode.

Direktestrømming - Det er en god strategi å skille mellom "Kjøp nå" (for betalte alternativer) og "Registrer deg" (for gratis alternativer).

Windows 7 - Den store, grønne "Get Windows7" -knappen er lett for besøkende å få øye på.

Fileshare HQ - Den lyse grønnknappen her skiller seg virkelig ut mot den hvite bakgrunnen.

Loggbok - Ved å bruke forskjellige farger for "Download" og "Buy" -knappene, setter de dem fra hverandre og prioriterer "Kjøp" -knappen.

TasteBook - Denne knappen gjør stor bruk av et ikon og bruker større, fet skrift for å skille seg ut.

GoodBarry - En annen lysegrønn ring til handlingsknapp.

Lifetree Creative - Fortsetter det samme skriftstedet fra kroppskopien til kallet til handlingsknappen skaper en følelse av samhold.

Resumatoren - Et lyst rødt anrop til handlingsknapp med fet skrift skiller seg ut mot den blå bakgrunnen.

Notepod - Et godt eksempel på å inkludere ekstra informasjon i en kall til handlingsknapp.

Inkd - Et godt eksempel på å prioritere knapper med størrelse.

Elegante temaer - Et annet godt eksempel på å bruke farge for å skille seg ut uten å kollidere med omkringliggende designelementer.

Zendesk - Et annet godt eksempel på å lage en knapp skiller seg ut med farge.

Storenvy - En rund knapp er uventet og skiller seg ut, spesielt når den er omgitt av en hvit kant.

Bara'Mail - Noen ganger fungerer en knapp som passer bedre i den generelle webdesignen din, spesielt når handlingen er mindre presserende.

Flere ressurser

Ring til handlingsknapper: Eksempler og beste praksis - Fra smashing Magazine
Gode Call-to-Action-knapper - Fra UX Booth
Call to Action Buttons: Har størrelse Matter? - Fra Få Elastisk
10 teknikker for en effektiv “Oppfordring til handling” - Fra Boagworld
5 tips for å skape en effektiv Call to Action Button - fra SitePoint