Kald til handling knapper Retningslinjer, bedste praksis og eksempler

Opkald til handlingsknapper på hjemmesider bliver ofte forsømt. Designere forstår undertiden ikke præcis, hvad der gør et godt opkald til handlingsknappen bortset fra at være attraktivt og passer ind i det overordnede design. Men kald til handlingsknapper er for vigtige til at blive designet uden nogen form for forståelse for, hvad der gør dem effektive. Tross alt er hovedpunktet for et opkald til handlingsknap at få besøgende til gøre noget.

Det er vigtigt at få mindst en grundlæggende forståelse for, hvordan farve, skala, sprog og andre faktorer påvirker konverteringsfrekvensen for en opfordring til handlingsknap. Begreberne her er ikke komplicerede, men de tager en smule forethought og planlægger at skabe de mest effektive opfordring til handling knapper muligt inden for et givet design. Læs videre for mere information om hvert af disse punkter og mere.

Formålet med "Call to Action" -knapper

Knappen til handlingsknapper kan betjene en række funktioner. Trods alt, “opfordring til handling” er virkelig lidt vag. Alt det betyder er, at hovedformålet er at få en besøgende til dit websted til gør noget. At noget kunne tilføre et produkt til deres indkøbskurv, downloade noget, anmode om oplysninger, eller bare om noget andet.

Fordi call-to-action-knapper har så forskellige formål, skal der tages højde for, hvad knappen har til formål at opnå. Typen af websted, målmarkedet og den ønskede handling kan alle spille en rolle i, hvordan man bedst kan designe en opfordring til handlingsknap.

Typer af "Call to Action" -knapper

Der er et par forskellige typer af call-to-action knapper. Mens hver type har til formål at få besøgende til at udføre en bestemt handling, kan denne handling variere betydeligt. Nedenfor er de mest almindelige typer af action-knapper baseret på den handling, de vil have dig til at tage.

1. Læg i kurv Buttons

E-handelssites bruger generelt en række kald til handlingsknapper, men den mest anvendte er den “Tilføj til kurv” knap. Disse knapper vises generelt på de enkelte produktsider. Deres formål er at lokke kunderne til at købe en vare. Fælles designelementer i tilføj til kurvknapper indeholder enkle ordlyd (f.eks “Tilføj til kurv” eller “Tilføj til kurv” eller “Køb nu“) og brugen af ikoner (normalt en taske eller vogn).

2. Download knapper

Download knapper ligner tilføjelse til kurvknapper, fordi de forsøger at lokke en besøgende til at tage i besiddelse af et emne. I tilfælde af downloadknapper vælger mange designere at inkludere flere oplysninger end andre typer knapper (f.eks. Versionsoplysninger eller downloadstørrelse).

3. Prøvetaster

Nogle steder forsøger at lokke deres besøgende til at prøve deres tilbud, generelt i form af en gratis prøveperiode. Dette kan være en gratis download eller en gratis konto, afhængigt af det pågældende websted. Nogle steder bruger “mindre er mere” filosofi og holde sproget på deres knapper til et minimum, mens andre gerne vil give mere information om, hvad forsøget indeholder.

4. Lær mere knapper

Lær mere knapper bruges generelt i slutningen af en blok af teaserinformation (ofte på hjemmesiden). Disse knapper er normalt enkle, men ofte overdimensionerede for at tiltrække gæsternes opmærksomhed.

5. Tilmeld Knapper

Sign up-knapper vises mest almindeligt i to forskellige versioner. Den første type er normalt direkte forbundet med en tilmeldingsformular. Den anden type anvendes normalt på samme måde som “Tilføj til kurv” knapper som en måde for brugerne at købe eller tilmelde sig en tjeneste eller en konto, før de rent faktisk når en tilmeldingsblanket.

Der er andre typer opkald til handlingsknapper, men disse er de mest almindelige. Retningslinjer, der gælder for ovenstående, vil sandsynligvis også gælde for enhver anden form for opfordring til handlingskode, du måske vil designe.

Brug negativt rum effektivt

Du vil have dit opkald til handlingsknapper for at skille sig ud fra det omgivende indhold og virkelig kommentere opmærksomhed fra dine besøgende. Til dette formål skal du bruge negativt rum omkring disse knapper. Indlejre mellemrum mellem dit indhold og din opfordring til handlingsknap. Selvom dette er mindre vigtigt (og mindre almindeligt) på nogle knapper, som f.eks. Tilføj til indkøbsvogn-knapper, kan andre, som dem, der lærer mere, arbejde bedre med mere plads.

Det er vigtigt at afbalancere mængden af negativ plads, du har omkring knapperne, med størrelsen af knapperne selv. Det handler om proportioner. Du vil have din knap, pladsen omkring det, og det omgivende indhold ser ud til at alle sammen ser sammen, selv med forskelle i størrelse. Du må muligvis fyre rundt med ting lidt for at få dem til at se rigtigt ud.

Nogle retningslinjer:

Sørg for, at der er nok plads omkring din knap, så det ikke føles rodet
Overvej principper som tredjedelsregel eller Golden Ratio, når du bestemmer, hvor meget plads der skal inkluderes
Negativt rum giver dit opkald til handlingsknappen mulighed for at skille sig ud fra dit andet indhold og sætte det fra hinanden

Størrelse og farve

Hvor stort dit opkald til handlingsknapper er, er meget vigtigt. En knap, der er for stor, overstyrer alt omkring det. En knap, der er for lille, vil gå tabt i blandingen af alt andet indhold på en side. Du vil have din knap til at være stor nok til at skille sig ud uden overvældende design.

Farve kan bruges til stor effekt for at balancere størrelsen af dine knapper. For større knapper skal du vælge en farve, der er mindre fremtrædende inden for dit design (men stadig skiller sig ud igen baggrunden). For en mindre knap vil du måske vælge en lysere, kontrasterende farve for virkelig at gøre knappen pop. I begge tilfælde skal du sørge for, at den farve du bruger, sætter knappen adskilt uden at kollidere med webstedets overordnede design.

Nogle retningslinjer:

Dine kald til handlingsknapper bør ideelt set være de største knapper på en given side
Brug kontrasterende farver for at få mindre knapper til at skille sig ud mere
Brug mindre forskellige farver for at få overstørrede knapper til at passe ind bedre
Du ringer til handlingsknapper skal give opmærksomhed uden overvældende dit design

Sprog

Den nøjagtige formulering, du vælger at bruge på dine opkald til handlingsknapper, kan have stor effekt på konvertering. Sammenligne “Køb nu” med “Tilføj til kurv“. Den ene er meget mere presserende end den anden. Eller hvad med “Prøv det gratis” med “Gratis prøveversion“? Den ene er meget punchere end den anden og skiller sig ud mere.

Sproget, du bruger på dit opkald til handlingsknapper, skal være ligefrem og simpelt som muligt. Du vil have besøgende til at kende med et blik, hvad de får, når du klikker på en knap. Hvis de spørger det, betyder det, at de har pause, hvilket kan føre til lavere konverteringsfrekvenser.

Glem ikke dine skriftstørrelser også. Teksten på din opfordring til handlingsknap skal være stor og fed, korrekt tilpasset størrelsen og farven på knappen selv. Sørg for, at der er tilstrækkelig kontrast, og at teksten er let at læse.

Nogle retningslinjer:

Brug simpelt, direkte sprog
Brug en stor fed skrift på knappen til hovedteksten
Sørg for, at sproget klart kræver en bestemt handling

Opret haster

Du vil have besøgende på dit websted for at udføre de ønskede handlinger med så lidt tænkning som muligt. Mens du ikke vil bedrage dine besøgende, desto flere muligheder giver du dem til at stoppe og overveje, hvad de laver, jo flere muligheder giver de dem at sige “ingen”.

Du vil have dine knapper til at give dem indtryk af, at de skal handle med det samme. Du vil gerne opfordre dem til at træffe deres beslutning straks, på nuværende tidspunkt. Selvom dette ikke virker for hver opfordring til handlingsknap (især dem, der køber billetter med høj billet), for at have billige eller gratis handlinger, er det ønskeligt at have besøgende klik med lidt forankring..

Nogle retningslinjer:

Opmuntre dine besøgende til at handle straks
Giv ikke dine besøgende nogen grund til at stoppe
Mens haster er vigtigt, må du ikke vildlede dine besøgende på nogen måde

Giv ekstra information

Brug eventuelt dine kald til handlingsknapper for at give besøgende ekstra information om, hvad de vil få, hvis de klikker på knappen. Dette ses mest med prøveknapper eller downloadknapper. Fælles eksempler på ekstra information inkluderer hvor lang tid en gratis prøveperiode varer, eller størrelsen af en fil download. Versionsoplysninger er også almindeligt set.

Når du inkludere ekstra information, skal du huske at du skal holde fokus på det faktiske opkald til handling. Sørg for, at teksten til sproget lokker besøgende til at handle, er mest fremtrædende, med andre oplysninger meget mindre synlige.

Nogle retningslinjer:

Indsæt kun ekstra information, når det tilføjer brugeroplevelsen
Ekstra oplysninger er kun relevante for nogle typer af opkald til handlingsknapper, især download- eller prøveknapper
Sørg for, at hovedopkaldet til handling stadig er den mest fremtrædende tekst på din knap

Prioriter

Det er vigtigt at prioritere knapperne til handling til handling på din side, hvis der er mere end en. Dette kan gøres på en række måder, men de mest almindelige er ved brug af farve og størrelse.

Brug farve til at fremhæve den vigtigste knap på en side, eller for at få de mindre vigtige til at virke mindre fremtrædende. Eller brug størrelse for at få den vigtigste knap til at skille sig ud (ved at gøre den større) og de-understrege de mindre vigtige.

Ikoner og billeder

Inklusive visuelle signaler i dine kald til handlingsknapper kan også bidrage til at øge konverteringsfrekvenserne. Et ikon af en indkøbskurv på en “Tilføj til kurv” knappen, for eksempel, eller en pil på en download-knap er begge gode eksempler. Tænk på unikke ikoner, der skal bruges, men sørg for, at ikonet tilføjer brugeroplevelsen ved at præcisere, hvad knappen er til, og tilføjer ikke nogen forvirring.

Nogle retningslinjer:

Sørg for, at ikonerne du bruger hjælper med at præcisere din knaps mening, i stedet for at forvirre den
Nemt anerkendte ikoner kan straks angive betydning for dine besøgende
Vær ikke bange for at bruge mindre almindeligt anvendte ikoner, så længe deres betydning stadig er tydelig

eksempler

Her er nogle få Eksempler på gode call-to-action knapper. Selvom de ikke alle stemmer helt overens med ovenstående retningslinjer, opfylder de nok af de kriterier, der skal betragtes som store.

Live stream - At skelne mellem "Køb nu" (til betalte indstillinger) og "Tilmeld" (for gratis indstillinger) knapper er en god strategi.

Windows 7 - Den store grønne "Get Windows7" -knap er let for de besøgende at få øje på.

Fileshare HQ - Den lyse grønne knap står her virkelig ud for den hvide baggrund.

Logbog - Brug af forskellige farver til "Download" og "Buy" -knapperne sætter dem adskilt og prioriterer "Køb" -knappen.

TasteBook - Denne knap gør stor brug af et ikon og bruger større, fed skrift til at skille sig ud.

GoodBarry - En anden lysegrøn opkald til handlingsknap.

Lifetree Creative - Hvis du fortsætter med samme skrifttype fra kropsbilledet til opkald til handlingsknappen, skabes en følelse af samhørighed.

Resumatoren - Et lyst rødt opkald til handlingsknap med fed type skiller sig ud mod den blå baggrund.

Notepod - Et godt eksempel på at inkludere ekstra information i en opfordring til handlingsknap.

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

Elegante temaer - Et andet glimrende eksempel på at bruge farve til at skille sig ud uden at kollidere med omgivende designelementer.

Zendesk - Et andet godt eksempel på at lave en knap skiller sig ud ved hjælp af farve.

Storenvy - En rund knap er uventet og skiller sig ud, især når den er omgivet af en hvid kant.

Bara'Mail - Nogle gange fungerer en knap, der passer ind, bedre i dit overordnede site design, især når handlingen er mindre presserende.

Flere ressourcer

Opkald til handlingsknapper: Eksempler og bedste praksis - Fra smashing Magazine
Gode Call-to-Action Buttons - Fra UX Booth
Opkald til handlingsknapper: Har størrelse spørgsmål? - Fra Få elastik
10 teknikker til en effektiv “Opfordring til handling” - Fra Boagworld
5 tips til oprettelse af en effektiv opfordring til handlingsknap - fra SitePoint