Ringa riktlinjer, bästa praxis och exempel

Ring till handlingsknappar på webbplatser misslyckas ofta. Designers förstår ibland inte exakt vad som gör ett bra samtal till actionknappen utöver att vara attraktiv och passande i den övergripande designen. Men det är alltför viktigt att ringa till handlingsknappar vara utformade utan någon form av förståelse för vad som gör dem effektiva. När allt kommer omkring är huvudpunkten för ett uppmaningsknapp att få besökare till do något.

Det är viktigt att få minst en grundläggande förståelse för hur färg, skala, språk och andra faktorer påverkar omvandlingsfrekvensen för en uppmaning till åtgärdsknapp. Begreppen här är inte komplicerade, men de tar lite förtänksamhet och planerar att skapa de mest effektiva anropsknapparna som är möjliga inom en given design. Läs vidare för mer information om var och en av dessa punkter och mer.

Syftet med "Call to Action" -knappar

Knapparna till funktionsknappar kan fungera med olika funktioner. Trots allt, “uppmaning till handling” är verkligen lite vagt. Allt det betyder är att det huvudsakliga syftet är att få en besökare till din webbplats till göra någonting. Att något skulle kunna lägga till en produkt i sin kundvagn, ladda ner något, begära information, eller bara om något annat.

Eftersom call-to-action-knappar har så olika ändamål måste mycket hänsyn tas till vad knappen syftar till att uppnå. Typ av webbplats, målmarknad och önskad åtgärd kan alla spela en roll i hur man bäst utformar en uppmaning till handlingsknapp.

Typer av "Call to Action" -knappar

Det finns några olika typer av knapptryckningar. Medan varje typ syftar till att få besökare att utföra en viss åtgärd, kan den här åtgärden variera avsevärt. Nedan är de vanligaste typerna av anropsknappar, baserat på den åtgärd de vill att du ska ta.

1. Lägg i varukorgen Knappar

E-handelswebbplatser använder vanligtvis ett antal knappar till handlingsknappar, men den mest använda är den “Lägg till i kundvagn” knapp. Dessa knappar visas generellt på enskilda produktsidor. Deras syfte är att locka kunder att köpa en vara. Vanliga designelement i korgknapparna innehåller enkel formulering (t.ex. “Lägg till i kundvagn” eller “Lägg i varukorg” eller “Köp nu“) och användningen av ikoner (vanligtvis en väska eller vagn).

2. Ladda ner knappar

Hämtningsknapparna liknar knapparna i kundvagnen, eftersom de försöker locka en besökare att ta vara på ett objekt. När det gäller nedladdningsknappar väljer många designers att inkludera mer information än andra typer av knappar (till exempel versionsinformation eller nedladdningsstorlek).

3. Proveknappar

Vissa webbplatser försöker locka sina besökare att försöka sina erbjudanden, i allmänhet i form av en gratis provperiod. Det här kan vara en gratis nedladdning eller ett gratis konto, beroende på webbplatsen. Vissa webbplatser använder “mindre är mer” filosofi och hålla språket på sina knappar till ett minimum, medan andra tycker om att erbjuda mer information om vad rättegången innehåller.

4. Läs mer Knappar

Lär dig mer Knappar används vanligtvis i slutet av ett block av teaserinformation (ofta på hemsidan). Dessa knappar är vanligtvis enkla men ofta överdimensionerade för att locka besökarnas uppmärksamhet.

5. Registrera Knappar

Anmälningsknapparna förekommer oftast i två olika versioner. Den första typen är vanligtvis direkt kopplad till en anmälningsblankett. Den andra typen brukar användas på liknande sätt som “Lägg till i kundvagn” knappar som ett sätt för användare att köpa eller registrera sig för en tjänst eller ett konto innan de faktiskt når en anmälningsblankett.

Det finns andra typer av anropsknappar, men dessa är de vanligaste. Riktlinjer som gäller för de ovanstående kommer sannolikt också att gälla för alla andra typer av funktionsknappar som du kanske skulle utforma.

Använda negativt utrymme effektivt

Du vill att ditt anrop till handlingsknappar ska sticka ut från det omgivande innehållet och verkligen ge uppmärksamhet från dina besökare. För det ändamålet måste du använda negativt utrymme runt dessa knappar. Inkludera tomt mellanslag mellan ditt innehåll och din funktionsknapp. Även om detta är mindre viktigt (och mindre vanligt) på vissa knappar, som tilläggsknappar, med andra, som de som lär sig mer, fungerar det bättre med mer utrymme.

Det är viktigt att balansera hur mycket negativt utrymme du har runt knapparna med storleken på knapparna själva. Det handlar om proportioner. Du vill ha din knapp, utrymmet runt det och det omgivande innehållet ser ut som om de går ihop, även med skillnader i storlek. Du kanske måste fitta runt med saker lite för att få dem att se exakt rätt.

Några riktlinjer:

• Se till att det finns tillräckligt med utrymme runt din knapp så att den inte känns rubbig
• Tänk på principer som tredje parts eller Golden Ratio när du bestämmer hur mycket utrymme du ska inkludera
• Negativt utrymme ger ditt uppmaning till action-knapprummet att sticka ut från ditt andra innehåll och sätter det ifrån varandra

Storlek och färg

Hur stor din anropsknapp är är mycket viktig. En knapp som är för stor kommer att övermanna allt runt den. En knapp som är för liten kommer att gå vilse i blandningen av allt annat innehåll på en sida. Du vill att din knapp ska vara tillräckligt stor för att sticka ut utan att överväldiga designen.

Färg kan användas till stor effekt för att balansera storleken på dina knappar. För större knappar, välj en färg som är mindre framträdande inom din design (men står fortfarande ut igen bakgrunden). För en mindre knapp kan du välja en ljusare, kontrasterande färg för att verkligen göra knappen pop. Kontrollera i båda fallen att färgen du använder sätter knappen iväg utan att kollidera med webbplatsens övergripande design.

Några riktlinjer:

• Knapparna för att ringa till handlingar bör helst vara de största knapparna på en viss sida
• Använd kontrasterande färger för att få mindre knappar att sticka ut mer
• Använd mindre tydliga färger för att göra stora knappar passar in bättre
• Du ringer till handlingsknappar måste skicka uppmärksamhet utan att överväldiga din design

Språk

Den exakta ordalydelsen du väljer att använda på ditt anrop till handlingsknappar kan ha stor inverkan på konvertering. Jämföra “Köp nu” med “Lägg till i kundvagn“. En är mycket mer brådskande än den andra. Eller vad sägs om “Prova det gratis” med “Gratis prov“? En är mycket punchigare än den andra och sticker ut mer.

Språket du använder på ditt samtal till handlingsknappar ska vara så rakt framåt som enkelt. Du vill att besökare ska veta med en blick precis vad de kommer att få när man klickar på en knapp. Om de ifrågasätter det betyder det att de har pausat, vilket kan leda till lägre konverteringsfrekvenser.

Glöm inte dina typsnittstorlekar också. Texten på din uppmaning till åtgärdsknappen ska vara stor och fet, lämpad för storleken och färgen på knappen själv. Se till att det finns tillräcklig kontrast och att texten är lätt att läsa.

Några riktlinjer:

• Använd enkelt, direkt språk
• Använd en stor fetstil på knappen för huvudtexten
• Se till att språket tydligt kräver en specifik åtgärd

Skapa skyndsamhet

Du vill att besökare på din webbplats ska utföra de önskade åtgärderna med så lite tanke som möjligt. Medan du inte vill lura dina besökare, desto fler möjligheter du ger dem att sluta och överväga vad de gör, ju fler möjligheter du ger dem att säga “Nej”.

Du vill ha dina knappar för att ge dem intrycket att de måste agera genast. Du vill uppmuntra dem att fatta sitt beslut omedelbart, just nu. Även om det här inte kommer att fungera för varje uppmaning till handlingsknapp (särskilt de som köper artiklar med höga biljettpriser), för att ha billiga eller gratis åtgärder, är det önskvärt att ha besökare klickar med lite förtänkande.

Några riktlinjer:

• Uppmuntra dina besökare att agera omedelbart
• Ge inte dina besökare någon anledning att pausa
• Medan brådskande är viktigt, vill du inte vilseleda dina besökare på något sätt

Ge ytterligare information

Använd lämpligt dina anropsknappar för att ge besökarna extra information om vad de kommer att få om de klickar på knappen. Det här brukar ses med testknappar eller nedladdningsknappar. Vanliga exempel på extra information inkluderar hur lång tid en gratis provperiod ska vara eller storleken på en filhämtning. Versionsinformation ses också vanligt.

När du lägger till extra information, kom ihåg att du måste hålla fokus på själva uppmaningen till handling. Se till att texten för språket lockar besökare att agera är mest framträdande, med annan information mycket mindre synlig.

Några riktlinjer:

• Ta bara med extra information när den lägger till användarupplevelsen
• Extra information är endast lämplig för vissa typer av funktionsknappar, särskilt nedladdnings- eller provknappar
• Se till att huvudanropet till handling fortfarande är den mest framstående texten på din knapp

prioritera

Det är viktigt att prioritera anropsknapparna på din sida om det finns fler än en. Detta kan göras på ett antal sätt, men det vanligaste är genom användning av färg och storlek.

Använd färg för att markera den viktigaste knappen på en sida, eller för att de mindre viktiga ska verka mindre framträdande. Eller använd storlek för att få den viktigaste knappen att stå ut (genom att göra den större) och de-stressa de mindre viktiga.

Ikoner och bilder

Inkluderande visuella signaler i dina knappar för att aktivera knappar kan också bidra till att öka omvandlingsfrekvenserna. En ikon för en kundvagn på en “Lägg till i kundvagn” knappen, till exempel, eller en pil på en nedladdningsknapp är båda bra exempel. Tänk på unika ikoner att använda också, men se till att ikonen lägger till användarupplevelsen genom att förtydliga vad knappen är för och lägger inte till någon förvirring.

Några riktlinjer:

• Se till att ikonerna du använder hjälper dig att klargöra din knapps mening, snarare än att förvirra den
• Lätt igenkända ikoner kan omedelbart indikera betydelse för dina besökare
• Var inte rädd för att använda mindre vanliga ikoner, så länge som deras mening fortfarande är klar

exempel

Här är några exempel på bra anropsknappar. Medan de inte helt överensstämmer med riktlinjerna ovan, möter de tillräckligt med kriterier som ska anses vara bra.

Direktsändning - Att skilja upp "Köp nu" (för betalda alternativ) och "Registrera" (för gratis alternativ) knappar är en bra strategi.

Windows 7 - Den stora, gröna "Get Windows7" ​​-knappen är lätt för besökare att upptäcka.

Fileshare HQ - Den ljusgröna knappen här står verkligen ut mot den vita bakgrunden.

Loggbok - Använda olika färger för "Download" och "Buy" -knapparna sätter dem ihop och prioriterar "Köp" -knappen.

TasteBook - Den här knappen använder stor nytta av en ikon och använder större fet text för att sticka ut.

GoodBarry - En annan ljusgrön uppringningsknapp.

Lifetree Creative - Fortsatt samma typsnitt från kroppskopian till uppmaningsknappen skapar en känsla av sammanhållning.

Resumatorn - En ljus röd anrop till åtgärdsknapp med fet stil utmärker sig mot den blå bakgrunden.

Notepod - Ett bra exempel på att inkludera extra information i ett samtal till handlingsknapp.

Inkd - Ett bra exempel på att prioritera knappar med storlek.

Eleganta teman - Ett annat utmärkt exempel på att använda färg för att sticka ut utan att kollidera med omgivande designelement.

Zendesk - Ett annat bra exempel på att en knapp sticker ut med färg.

Storenvy - En rund knapp är oväntad och sticker ut, speciellt när den är omgiven av en vit kant.

Bara'Mail - Ibland fungerar en knapp som kombinerar bättre i din övergripande webbdesign, särskilt när åtgärden är mindre brådskande.

Fler resurser

• Ring till handlingsknappar: exempel och bästa praxis - från smashing magazine
• Bra Call-to-Action-knappar - från UX Booth
• Ring till Action Knappar: Har storlek Matter? - Från Få Elastic
• 10 tekniker för ett effektivt “Uppmaning till handling” - Från Boagworld
• 5 tips för att skapa en effektiv uppmaning till åtgärdsknapp - från SitePoint