Smernice, najboljše prakse in primeri za klicanje ukrepov

Gumbi za klicanje na spletnih straneh so pogosto zanemarjeni. Oblikovalci včasih ne razumejo natančno, kaj pomeni, da je dober klic na akcijski gumb bolj privlačen in se prilega celotnemu dizajnu. Toda gumbi za klicanje so preveč pomembni, da bi bili oblikovani brez neke vrste razumevanja, kaj jih naredi učinkovite. Navsezadnje je glavna točka gumba za klicanje dejanja, da obiskovalce narediti nekaj.

Pomembno je pridobiti vsaj osnovno razumevanje o tem, kako barva, obseg, jezik in drugi dejavniki vplivajo na stopnjo konverzije gumba za klic na dejanje. Koncepti tukaj niso zapleteni, vendar vzamejo nekaj premišljevanja in načrtovanja, da bi ustvarili najučinkovitejše pozive k akcijskim gumbom, ki so možni v danem dizajnu. Preberite več o vsaki od teh točk in več.

Namen gumbov »Call to action«

Gumbi za klicanje lahko služijo različnim funkcijam. Konec koncev, “poziv k dejanju” je res malo nejasno. Vse to pomeni, da je glavni namen, da obiskovalca zaslužite naredi kaj. Da bi nekaj lahko dodali izdelek v nakupovalni voziček, prenesli nekaj, zahtevali informacije ali kaj drugega.

Ker imajo gumbi klic na dejanje tako različne namene, je treba veliko pozornosti posvetiti temu, kar želi doseči gumb. Vrsta spletnega mesta, ciljni trg in želeno dejanje lahko igrajo vlogo pri tem, kako najbolje oblikovati gumb klicanja.

Vrste gumbov "Call to action"

Obstaja nekaj različnih tipk za klicanje. Čeprav je cilj vsake vrste, da obiskovalce izvede določeno dejanje, se lahko to dejstvo precej razlikuje. Spodaj so najpogostejše vrste gumbov klicanja, ki temeljijo na dejanjih, ki jih želite sprejeti.

1. Dodaj v košarico

Spletna mesta za e-trgovino običajno uporabljajo številne gumbe za klicanje, najpogosteje uporabljeni pa so “Dodaj v voziček” gumb. Ti gumbi so na splošno prikazani na posameznih straneh izdelka. Njihov namen je privabiti stranke k nakupu izdelka. Skupni elementi oblikovanja, ki so dodani v gumbe za voziček, vključujejo preprosto besedilo (npr “Dodaj v voziček” ali “Dodaj v torbo” ali “Kupi zdaj“) in uporaba ikon (ponavadi torba ali voziček).

2. Prenos gumbov

Gumbi za prenos so podobni, da se dodajo v gumbe za voziček, saj poskušajo obiskovalca privabiti k prevzemu predmeta. V primeru gumbov za prenos se mnogi oblikovalci odločijo za vključitev več informacij kot druge vrste gumbov (kot so informacije o različici ali velikosti prenosa)..

3. Preskusni gumbi

Nekatera spletna mesta poskušajo privabiti svoje obiskovalce, da preizkusijo svoje ponudbe, običajno v obliki brezplačnega preskušanja. To je lahko brezplačen prenos ali brezplačen račun, odvisno od posameznega spletnega mesta. Nekatera spletna mesta uporabljajo “manj je več” filozofijo in držite jezik na gumbih na minimumu, medtem ko drugi radi ponudijo več informacij o tem, kaj vsebuje preskušanje.

4. Več o gumbih

Več gumbov za več informacij se običajno uporablja na koncu bloka najavnih informacij (pogosto na domači strani). Ti gumbi so običajno preprosti, vendar pogosto preveliki, da bi pritegnili pozornost obiskovalcev.

5. Gumbi za prijavo

Gumbi za prijavo se najpogosteje pojavljajo v dveh različicah. Prva vrsta je običajno neposredno povezana z obrazcem za prijavo. Drugi tip se običajno uporablja na podoben način kot “Dodaj v voziček” kot način, s katerim uporabniki kupijo ali se prijavijo za storitev ali račun, preden dejansko dosežejo prijavni obrazec.

Obstajajo še druge vrste gumbov klicanja, vendar so ti najpogostejši. Smernice, ki veljajo za zgornje, bodo verjetno veljale tudi za katero koli drugo vrsto klica, ki ga načrtujete.

Učinkovito uporabo negativnega prostora

Želite, da so vaši gumbi za klic na akcijo izstopali iz vsebine v okolici in resnično naredili pozornost obiskovalcev vašega spletnega mesta. V ta namen morate uporabiti negativni prostor okoli teh gumbov. Vstavite prazen prostor med vašo vsebino in gumb za klic na dejanje. Čeprav je to manj pomembno (in manj običajno) pri nekaterih gumbih, kot so na primer dodajanje v gumbe za voziček, pri drugih, kot so tisti za učenje več, deluje bolje z več prostora.

Pomembno je uravnotežiti količino negativnega prostora, ki ga imate, okoli gumbov z velikostjo gumbov. Gre za delež. Želite, da vaš gumb, prostor okoli njega in okoliške vsebine izgledajo tako, kot da gredo skupaj, celo z razlikami v velikosti. Morda se boste morali malo zafrkavati s stvarmi, da bi jih dobili prav.

Nekaj smernic:

Prepričajte se, da je okoli vašega gumba dovolj prostora, da se ne bo počutil nered
Razmislite o načelih, kot je pravilo tretjih ali Zlato razmerje, ko določate, koliko prostora je treba vključiti
Negativni prostor daje vašemu klicu gumb za dejanje sobo, da izstopa iz vaše druge vsebine in jo loči

Velikost in barva

Kako velik je vaš klic na gumb za dejanje je zelo pomemben. Prevelik gumb bo vsega okrepil. Gumb, ki je premajhen, se izgubi v shuffle vseh drugih vsebin na strani. Želite, da je vaš gumb dovolj velik, da izstopa brez zasnove.

Barvo lahko uporabite za odličen učinek in tako uravnavate velikost gumbov. Za večje gumbe izberite barvo, ki je manj izrazita v vašem dizajnu (vendar še vedno izstopa iz ozadja). Za manjši gumb boste morda želeli izbrati svetlejšo in kontrastno barvo, ki bo res naredila pop gumb. V vsakem primeru se prepričajte, da barvo, ki jo uporabljate, loči gumb, ne da bi se sprijaznila s celotno zasnovo spletnega mesta.

Nekaj smernic:

Gumbi za klicanje bi morali biti največji gumbi na določeni strani
Uporabite kontrastne barve, da bi manjši gumbi bolj izstopali
Uporabite manj ločene barve, da bi prevelike gumbe bolje vstavili
Pokličete na gumbe za ukrepanje, zato morate opozoriti, ne da bi zasenčili vašo zasnovo

Jezik

Natančno besedilo, ki ga izberete na gumbih klicanja, lahko močno vpliva na konverzijo. Primerjaj “Kupi zdaj” z “Dodaj v voziček“. Ena je veliko bolj nujna kot druga. Ali pa približno “Poskusite brezplačno” z “Brezplačen preizkus“? Eden je veliko močnejši od drugega in bolj izstopa.

Jezik, ki ga uporabljate na gumbih za klicanje, mora biti čim bolj preprost in preprost. Želite, da obiskovalci z enim pogledom natančno vedo, kaj bodo dobili, ko kliknejo na gumb. Če ga vprašajo, to pomeni, da so začasno ustavili, kar lahko privede do nižjih stopenj konverzij.

Tudi velikosti pisav ne pozabite. Besedilo gumba za klic na dejanje mora biti veliko in krepko, primerno prilagojeno velikosti in barvi samega gumba. Prepričajte se, da je dovolj kontrasta in da je besedilo lahko berljivo.

Nekaj smernic:

Uporabite preprost, neposreden jezik
Uporabite veliko, krepko pisavo na gumbu za glavno besedilo
Prepričajte se, da jezik jasno zahteva določeno dejanje

Ustvari nujnost

Želite, da obiskovalci na vašem spletnem mestu izvedejo želena dejanja s čim manj mislijo. Čeprav ne želite zavajati obiskovalcev, več možnosti jim dajete, da se ustavijo in razmislijo o tem, kaj delajo, več možnosti, ki jim jih dajete, “ne”.

Želite, da imajo vaši gumbi vtis, da morajo takoj ukrepati. Hočete jih spodbuditi, da se odločijo takoj, v trenutku. Čeprav to ne bo delovalo za vsak klicni gumb (zlasti za nakup izdelkov z veliko vstopnicami), za poceni ali brezplačne akcije, je zaželeno, da obiskovalci kliknejo z malo premišljenostjo.

Nekaj smernic:

Spodbujajte obiskovalce, naj takoj ukrepajo
Ne dovolite svojim obiskovalcem nobenega razloga za premor
Čeprav je nujnost pomembna, obiskovalcev ne zavajajte

Zagotovite dodatne informacije

Kadar je to primerno, uporabite gumbe za klicanje in omogočite obiskovalcem dodatne informacije o tem, kaj bodo dobili, če kliknejo gumb. To se najpogosteje vidi s poskusnimi gumbi ali gumbi za prenos. Običajni primeri dodatnih informacij vključujejo čas trajanja brezplačne preizkusne različice ali velikost prenosa datoteke. Običajno se pojavljajo tudi informacije o različici.

Ko vključite dodatne informacije, ne pozabite, da se morate osredotočiti na dejanski poziv k dejanju. Prepričajte se, da je besedilo za jezik, ki privlači obiskovalce, najpomembnejše, druge informacije pa so veliko manj vidne.

Nekaj smernic:

Med dodajanje uporabniške izkušnje vključite samo dodatne informacije
Dodatne informacije so primerne le za nekatere vrste gumbov za klicanje, predvsem za prenos ali poskusne gumbe
Prepričajte se, da je glavni poziv k dejanju še vedno najpomembnejše besedilo na vašem gumbu

Določite prednost

Pomembno je, da gumbe za klicanje na vaši strani določite po prednosti, če jih je več. To je mogoče storiti na več načinov, vendar je najpogostejša uporaba barv in velikosti.

Uporabite barvo, da označite najpomembnejši gumb na strani, ali da postanejo manj pomembni, manj pomembni. Ali pa uporabite velikost, da naredite najpomembnejši gumb izstopajoč (s povečanjem) in odstranite poudarek manj pomembnih gumbov.

Ikone in slike

Vključitev vizualnih oznak v gumbe za klicanje lahko pomaga tudi pri povečanju razmerja preusmeritev. Ikona nakupovalne košarice na “Dodaj v voziček” na primer gumb ali puščica na gumbu za prenos. Pomislite tudi na edinstvene ikone, ki jih želite uporabiti, vendar se prepričajte, da ikona dodaja uporabniški izkušnji, tako da pojasni, za kaj je gumb, in ne povzroča zmede.

Nekaj smernic:

Prepričajte se, da ikone, ki jih uporabljate, pomagajo pojasniti pomen gumba, namesto da ga zamenjate
Preprosto priznane ikone lahko takoj prikažejo pomen vašim obiskovalcem
Ne bojte se uporabiti manj pogosto uporabljenih ikon, dokler je njihov pomen še vedno jasen

Primeri

Tukaj je nekaj primeri odličnih gumbov za klicanje. Medtem ko niso vsi popolnoma v skladu z zgoraj navedenimi smernicami, izpolnjujejo dovolj meril, da bi jih šteli za odlične.

Livestream - Razlikovanje med tipkami »kupi zdaj« (za plačane možnosti) in »prijavi« (za brezplačne možnosti) je dobra strategija.

Windows 7 - Velika, zelena "Get Windows7" gumb je enostavno za obiskovalce na kraju samem.

Datoteka HQ - Svetlo zeleni gumb tukaj res izstopa na belem ozadju.

Dnevnik - Z uporabo različnih barv za gumbe "Prenos" in "Nakup" jih ločimo in damo prednost "Kupi".

TasteBook - Ta gumb omogoča veliko uporabo ikone in uporablja večje, krepko besedilo, ki izstopa.

GoodBarry - Še en svetlo zelen gumb klic na dejanje.

Lifetree Creative - Nadaljevanje istega pisave od kopije telesa do gumba za klic na dejanje ustvarja občutek kohezije.

Resumator - Svetlo rdeča tipka za klic na akcijo s krepko pisavo izstopa na modrem ozadju.

Notepod - Dober primer vključitve dodatnih informacij v gumb za klic na dejanje.

Inkd - Odličen primer določanja prednostnih gumbov z velikostjo.

Elegantne teme - Še en odličen primer uporabe barve za izstopanje, ne da bi se spopadali z okoliškimi elementi oblikovanja.

ZenDesk - Še en odličen primer, kako narediti gumb izstopa z uporabo barv.

Storenvy - Okrogel gumb je nepričakovan in izstopa, še posebej, če ga obdaja bela obroba.

Bara'Mail - Včasih je gumb, ki se ujema z delom, boljši v celotnem oblikovanju spletnega mesta, še posebej, če je ukrep manj pereč.

Več virov

Poziv k ukrepanju Gumbi: Primeri in najboljše prakse - iz Smashing Magazine
Dobri gumbi za poziv k dejanjem - od UX Bootha
Klic k ukrepanju Gumbi: Ali je velikost pomembna? Od Get Elastic
10 tehnik za učinkovito “Poziv k dejanju” - Iz Boagworlda
5 Nasveti za ustvarjanje učinkovitega gumba za klicanje - iz SitePointa