Smjernice, najbolje prakse i primjeri “Poziva na akciju”

Gumbi poziva na akciju na web-stranicama često se zanemaruju. Dizajneri ponekad ne razumiju točno što čini dobar poziv na akciju osim što je atraktivan i uklapa se u cjelokupni dizajn. No, gumbi za poziv na akciju su previše važni da bi bili dizajnirani bez neke vrste razumijevanja onoga što ih čini učinkovitim. Uostalom, glavna točka poziva na akciju gumb je da se posjetitelji čini nešto.

Važno je dobiti barem osnovno razumijevanje o tome kako boja, razmjera, jezik i drugi čimbenici utječu na stopu konverzije gumba poziva na radnju. Koncepti ovdje nisu komplicirani, ali oni zauzimaju malo predumišljaja i planiraju stvoriti najučinkovitije pozive na akciju moguće unutar zadanog dizajna. Čitajte dalje za više informacija o svakoj od tih točaka i više.

Svrha gumba "Poziv na akciju"

Gumbi s pozivom na radnju mogu služiti različitim funkcijama. Nakon svega, “poziv na akciju” je stvarno malo nejasno. Sve to znači da je glavna svrha posjetitelja da dođe na vašu stranicu učini nešto. Da nešto može biti dodavanje proizvoda u njihovu košaricu, preuzimanje nečega, traženje informacija ili bilo što drugo.

Budući da gumbi za poziv na radnju imaju tako različite svrhe, puno se mora razmotriti u ono što gumb želi postići. Vrsta web-lokacije, ciljno tržište i željena radnja mogu igrati ulogu u tome kako najbolje oblikovati gumb poziva na radnju.

Tipovi tipki "Poziv na akciju"

Postoji nekoliko različitih tipki za poziv na radnju. Iako svaka vrsta želi posjetitelje izvršiti određenu radnju, ta se radnja može znatno razlikovati. U nastavku su navedene najčešće vrste tipki za poziv na radnju, koje se temelje na akciji koju želite da poduzmete.

1. Dodajte u gumbe za košaricu

E-commerce web-mjesta općenito koriste broj gumba za poziv na radnju, ali najčešće korišten je “Dodaj u košaricu” dugme. Ovi se gumbi obično pojavljuju na pojedinačnim stranicama proizvoda. Njihova je svrha potaknuti kupce na kupnju artikla. Zajednički elementi dizajna koji se dodaju u gumbe za košaricu uključuju jednostavne riječi (kao što su “Dodaj u košaricu” ili “Dodaj u torbu” ili “Kupi sada“) i upotreba ikona (obično torba ili kolica).

2. Preuzmi gumbe

Gumbi za preuzimanje slični su kako bi se dodali u gumbe košarice time što pokušavaju privući posjetitelja da preuzme stavku. U slučaju gumba za preuzimanje, mnogi dizajneri odlučuju uključiti više informacija od drugih tipova gumba (kao što su informacije o verziji ili veličini preuzimanja).

3. Probne tipke

Neke web-lokacije pokušavaju privući svoje posjetitelje da isprobaju svoje ponude, uglavnom u obliku besplatne probne verzije. To može biti besplatni ili besplatni račun, ovisno o određenoj web-lokaciji. Neke web - lokacije koriste “manje je više” filozofiju i držati jezik na njihovim gumbima na minimumu, dok drugi vole ponuditi više informacija o tome što suđenje sadrži.

4. Saznajte više gumba

Saznajte više gumba se obično koriste na kraju bloka informacija zadirkivanja (često na početnoj stranici). Ovi gumbi su obično jednostavni, ali često preveliki kako bi privukli pažnju posjetitelja.

5. Registrirajte gumbe

Gumbi za prijavu najčešće se pojavljuju u dvije različite verzije. Prvi tip je obično izravno povezan s obrascem za prijavu. Drugi tip se obično koristi na sličan način “Dodaj u košaricu” gumbe, kao način da korisnici kupe ili se prijave za uslugu ili račun prije nego što dođu do obrasca za prijavu.

Postoje i druge vrste gumba za poziv na radnju, ali to su najčešći. Smjernice koje se primjenjuju na gore navedene stavke vjerojatno će se primjenjivati i na bilo koji drugi tip poziva na radnju koji možda dizajnirate.

Učinkovito korištenje negativnog prostora

Želite da se vaši pozivi na akcijske gumbe izdvoje od sadržaja u okruženju i zaista privuku pozornost posjetitelja vaše web-lokacije. U tu svrhu morate koristiti negativni prostor oko tih gumba. Uključite prazan prostor između vašeg sadržaja i gumba poziv na akciju. Iako je to manje važno (i rjeđe) na nekim gumbima, kao što su dodavanje gumba u košaricu, dok drugi, poput onih za više informacija, bolje rade s više prostora.

Važno je uravnotežiti količinu negativnog prostora koji imate oko gumba s veličinom samih gumba. Radi se o proporciji. Želite da vaš gumb, prostor oko njega i okolni sadržaj izgledaju kao da idu zajedno, čak i ako su razlike u veličini. Vi svibanj morati gusle okolo s stvarima malo kako bi se oni traže samo pravo.

Neke smjernice:

Provjerite ima li dovoljno prostora oko gumba tako da se ne osjeća pretrpano
Razmotrite principe kao što je pravilo trećina ili Zlatni omjer pri određivanju koliko prostora treba uključiti
Negativni prostor daje vašoj sobi za pozivanje na akciju da bi se izdvojio iz vašeg drugog sadržaja i razdvojio ga

Veličina i boja

Vrlo je važno koliko su vaši gumbi za poziv na akciju važni. Preveliki gumb nadjačat će sve oko njega. Gumb koji je premali izgubit će se u dvoličnosti svih ostalih sadržaja na stranici. Želite da vaš gumb bude dovoljno velik da se ističe bez preopterećenja dizajna.

Boja se može upotrijebiti za izvrstan učinak kako bi se uravnotežila veličina gumba. Za veće tipke odaberite boju koja je manje istaknuta unutar vašeg dizajna (ali još uvijek ističe pozadinu). Za manji gumb, možete odabrati svjetliju, kontrastnu boju kako biste stvarno napravili pop gumb. U svakom slučaju, provjerite je li boja koju koristite postavljena pored gumba bez sukobljavanja s cjelokupnim dizajnom web-lokacije.

Neke smjernice:

Vaši gumbi za poziv na radnju bi trebali biti najveći gumbi na određenoj stranici
Upotrijebite kontrastne boje kako bi se manje gumbe izdvojile
Upotrijebite manje različite boje kako biste prevelike gumbe bolje uklopili
Vi pozivate na akcijske gumbe da morate privući pažnju bez preopterećenja vašeg dizajna

Jezik

Točan izraz koji odaberete za upotrebu gumba za poziv na radnju može imati ogroman učinak na pretvorbu. Usporedite “Kupi sada” s “Dodaj u košaricu“. Jedan je mnogo hitniji od drugog. Ili o tome “Isprobajte besplatno” s “Besplatna probna verzija“? Jedan je mnogo jači od drugog i ističe se više.

Jezik koji koristite na gumbima za poziv na radnju treba biti što jednostavniji i jednostavniji. Želite da posjetitelji znaju samo jednim pogledom što će dobiti kada kliknu na gumb. Ako to dovedu u pitanje, to znači da su pauzirali, što može dovesti do nižih stopa pretvorbe.

Nemojte zaboraviti ni na veličinu fonta. Tekst na vašem pozivu na akciju treba biti velik i podebljan, ispravno prilagođen veličini i boji samog gumba. Uvjerite se da postoji dovoljan kontrast i da je tekst jednostavan za čitanje.

Neke smjernice:

Koristite jednostavan, izravan jezik
Koristite veliki, podebljani font na gumbu glavnog teksta
Pobrinite se da jezik jasno zahtijeva određenu radnju

Stvori hitnost

Želite da posjetitelji na vašoj web-lokaciji obavljaju željene radnje sa što manje misli. Iako ne želite obmanjivati svoje posjetitelje, što im više prilika da se zaustave i razmotre što rade, to im daje više mogućnosti da kažu “Ne”.

Želite da vam gumbi daju dojam da moraju odmah djelovati. Želite ih ohrabriti da odmah donesu odluku, na trenutak. Iako to neće funkcionirati za svaki gumb poziva na akciju (posebno za kupnju stavki s visokom cijenom), za jeftine ili besplatne radnje, poželjno je da posjetitelji kliknu s malo promišljanja.

Neke smjernice:

Potaknite svoje posjetitelje da odmah reagiraju
Nemojte dopustiti svojim posjetiteljima da zastanu
Iako je hitnost važna, nemojte na bilo koji način obmanjivati svoje posjetitelje

Osigurati dodatne informacije

Kada je to prikladno, upotrijebite gumbe za poziv na radnju kako biste posjetiteljima pružili dodatne informacije o tome što će dobiti ako kliknu na gumb. To se najčešće vidi pomoću probnih gumba ili gumba za preuzimanje. Uobičajeni primjeri dodatnih informacija uključuju duljinu trajanja besplatne probne verzije ili veličinu preuzimanja datoteke. Informacije o verzijama također se obično vide.

Kada uključite dodatne informacije, imajte na umu da trebate zadržati fokus na stvarnom pozivu na akciju. Uvjerite se da je tekst za jezik koji privlači posjetitelje da djeluje najistaknutiji, s drugim informacijama mnogo manje vidljivim.

Neke smjernice:

Uključite samo dodatne informacije kada dodaju korisničko iskustvo
Dodatne informacije prikladne su samo za neke tipke tipki za poziv na radnju, osobito za gumbe za preuzimanje ili probne tipke
Provjerite je li glavni poziv na radnju još uvijek najistaknutiji tekst na vašem gumbu

Prioritete

Važno je odrediti prioritet gumba za poziv na radnju na stranici ako ih ima više. To se može učiniti na više načina, ali najčešći su kroz korištenje boje i veličine.

Koristite boju kako biste istaknuli najvažniji gumb na stranici ili učinili manje važne gumbe manje istaknutim. Ili upotrijebite veličinu kako biste istaknuli najvažniji gumb (čineći ga većim) i smanjili naglasak na one manje važne.

Ikone i slike

Uključivanje vizualnih znakova u gumbe za poziv na radnju također može pomoći u povećanju stope pretvorbe. Ikona košarice na “Dodaj u košaricu” primjerice, ili strelica na gumbu za preuzimanje dobar su primjer. Zamislite i jedinstvene ikone koje ćete koristiti, ali provjerite dodaje li ikona korisničkom iskustvu razjašnjavanje značenja gumba i ne dodaje nikakvu zbrku.

Neke smjernice:

Pobrinite se da ikone koje koristite pomažu razjasniti značenje vašeg gumba, umjesto da ga zbunjuju
Lako prepoznatljive ikone odmah mogu značiti vaše posjetitelje
Nemojte se bojati koristiti manje uobičajeno korištene ikone, sve dok je njihovo značenje još uvijek jasno

Primjeri

Evo nekoliko primjeri izvrsnih gumba za poziv na radnju. Iako ne odgovaraju svim gore navedenim smjernicama, oni zadovoljavaju dovoljno kriterije da bi se smatrali velikim.

Uživo prijenos - Razlikovanje gumba "kupi odmah" (za plaćene opcije) i "prijavite se" (za besplatne opcije) dobra je strategija.

Windows 7 - Veliki, zeleni "Get Windows7" gumb je lako posjetiteljima na licu mjesta.

Razmjena datoteka HQ - Svijetlo zeleni gumb ovdje se ističe na bijeloj pozadini.

brodski dnevnik - Korištenjem različitih boja za gumbe "Download" i "Buy" razlikuju se i daje prednost gumbu "Kupi".

TasteBook - Ovaj gumb izvrsno koristi ikonu i koristi veći, podebljani tekst da bi se istaknuo.

GoodBarry - Još jedan svijetlo zeleni gumb poziva na akciju.

Lifetree Creative - Nastavljanje istog slova od kopije tijela do gumba poziv na akciju stvara osjećaj povezanosti.

Nastavnik - Jarko crveni gumb poziva na akciju s podebljanim slovima ističe se na plavoj pozadini.

Notepod - Dobar primjer uključivanja dodatnih informacija u gumb poziva na akciju.

Inkd - Izvrstan primjer određivanja prioriteta tipkama veličine.

Elegantne teme - Još jedan izvrstan primjer korištenja boja za isticanje bez sukoba s okolnim elementima dizajna.

Zendesk - Još jedan odličan primjer izrade gumba ističe se bojom.

Storenvy - Okrugli gumb je neočekivan i ističe se, osobito kada je okružen bijelim rubom.

Bara'Mail - Ponekad gumb koji se uklapa bolje funkcionira u cjelokupnom dizajnu web-lokacije, pogotovo kada je radnja manje hitna.

Više resursa

Poziv na akciju Buttons: Primjeri i najbolje prakse - iz potresno Magazine
Dobri Pozivi za djelovanje Tipke - Od UX Booth
Poziv na akciju Gumbi: Je li veličina bitna? - Od Get Elastic
10 tehnika za učinkovito “Poziv na akciju” - Iz Boagworlda
5 Savjeti za stvaranje učinkovitog gumba za poziv na radnju - iz SitePointa