Strona g艂贸wna User experience Call to action 馃摙 – jak przyciski i has艂a wp艂ywaj膮 na zachowanie u偶ytkownika?

Call to action 馃摙 – jak przyciski i has艂a wp艂ywaj膮 na zachowanie u偶ytkownika?

 Przeczytasz w: 20 min.
0
1
Jak dzia艂a call to action

S艂owem wst臋pu. Call to action jest wezwaniem do dzia艂ania, kt贸re najcz臋艣ciej pod postaci膮 linku graficznego lub tekstowego ma przenie艣膰 u偶ytkownika do miejsca w艂a艣ciwej akcji. Call to action (CTA [w tym artykule b臋d臋 zamiennie u偶ywa艂 tych dw贸ch fraz]) mo偶emy znale藕膰 w wielu miejscach internetu – na stronach internetowych, w aplikacjach, w mailach czy w oprogramowaniu. W niniejszym tek艣cie przedstawi臋 r贸偶ne rodzaje wezwa艅 do dzia艂ania, kt贸re znajdziemy na stronach internetowych o zr贸偶nicowanym profilu dzia艂alno艣ci, wyja艣ni臋 r贸wnie偶 zak艂adan膮 przez tw贸rc贸w mechanik臋 dzia艂ania CTA.聽Poka偶臋 r贸wnie偶 bardzo zr贸偶nicowane przyk艂ady call to action w wersji polskiej oraz angloj臋zycznej.

Call to action, czyli wezwanie do dzia艂ania, wykorzystywane jest w celu lepszego zach臋cenia u偶ytkownika do wykonania akcji.

CTA mo偶emy zaobserwowa膰 przede wszystkim na stronach g艂贸wnych portali spo艂eczno艣ciowych, stron firmowych, sklep贸w internetowych, start-up贸w, platform komunikacyjnych czy w wielu innych serwisach. CTA wyst臋puje najcz臋艣ciej pod postaci膮 graficznego buttonu (przycisku), kt贸ry odr贸偶nia si臋 od reszty tekstu w swoim akapicie wielko艣ci膮, kolorem, fontem czy animacj膮, kt贸ra pojawia si臋 po najechaniu myszk膮. Wezwanie do dzia艂ania mo偶e przybra膰 proste formy jak s艂owa znajduj膮ce si臋 na buttonie pt.: „Sprawd藕!”, „Zobacz wi臋cej!”, itd. ale w wielu miejscach autorzy pos艂u偶yli si臋 nieco wi臋ksz膮 pomys艂owo艣ci膮 wprost stawiaj膮c na informowanie o korzy艣ciach, z jakimi spotka si臋 u偶ytkownik po wykonaniu akcji.

Sp贸jrzmy najpierw na kilka standardowych przyk艂ad贸w CTA.

BZWBK call to action
殴r贸d艂o: bzwbk.pl

 

Deutsche Bank call to action
殴r贸d艂o: deutschebank.pl

 

Credit Agricole call to action
殴r贸d艂o: credit-agricole.pl

 

Sprawd藕, sprawd藕, sprawd藕. Sztampa. W przypadku stron internetowych bank贸w, CTA zwykle jest bardzo proste w wymiarze s艂ownictwa, stworzone jest jedynie jako dope艂nienie przygotowanych grafik najcz臋艣ciej b臋d膮cych wielkim banerem przykrywaj膮c wi臋ksz膮 cz臋艣膰 strony. CTA w tych wypadkach najcz臋艣ciej idzie w parze z bardzo standardowymi has艂ami przedstawianymi w banerach, w konsekwencji czego trudno odr贸偶ni膰, kt贸ry bank rzeczywi艣cie bli偶szy jest lub w艂a艣ciwie chce by膰 swoim klientom.

 

Mbank call to action
殴r贸d艂o: mbank.pl

 

Nest bank call to action
殴r贸d艂o: nestbank.pl

 

Tak偶e mBank oraz Nest Bank nie zachwycaj膮 swoim wezwaniem do dzia艂ania. Oba banki id膮 w schematy. W przypadku Nest Banku brakuje wykorzystania potencja艂u, kt贸ry kryje si臋 w s艂owach znajduj膮cych si臋 powy偶ej niebieskiego przycisku. Autorzy CTA uznali, 偶e wa偶niejszym miejscem jest podstrona zwi膮zana ze szczeg贸艂ami dot. konta, zamiast linku przenosz膮cego do za艂o偶enia konta. Lepsz膮 opcj膮 by艂oby wyr贸偶nienie linku kieruj膮cego do rejestracji i usuni臋cie linku kieruj膮cego do szczeg贸艂贸w, a tym samym przeniesie contentu z detali do okna z rejestracj膮.

Zupe艂nie inaczej do tematu zach臋cenia u偶ytkownika do akcji podchodzi Lion’s Bank. Oto jak wygl膮da szablon strony g艂贸wnej.

Pasja czyni cie lwem lions bank
殴r贸d艂o: lionsbank.pl

Bez scrollowania nie znajdziemy 偶adnego przycisku przenosz膮cego nas do za艂o偶enia konta. Oto co znajduje si臋 kiedy zjedziemy ni偶ej:

Odkryj Lion's Bank
殴r贸d艂o: lionsbank,pl

Tak偶e w tym miejscu nie spotkamy si臋 z zach臋ceniem do za艂o偶enia konta czy sprawdzenia szczeg贸艂贸w dotycz膮cych kredyt贸w. CTA widoczne jest dopiero w nast臋pnej sekcji:

lions bank call to action
殴rod艂o: Lion’s Bank

Call to action jest proste, ale jednoznaczne. W dodatku zosta艂o umieszczone w ca艂kiem dobrym miejscu, co wynika ze strategii banku – marka najpierw przedstawia swoje cechy i ofert臋, a dopiero p贸藕niej sugeruje zwi膮zanie si臋.


Na podstawie przyk艂ad贸w call to action znajduj膮cych si臋 na stronach bank贸w mo偶na wyci膮gn膮膰 pierwsze ciekawe wnioski:

  • wezwanie do dzia艂ania nie powinno by膰 sztampowe
  • kreatywne podej艣cie do lokalizacji mo偶e wp艂yn膮膰 na stopie艅 konwersji
  • wybranie stron, do kt贸rych kierowa膰 ma CTA powinno by膰 zrewidowane kilkukrotnie, tak aby unikn膮膰 sytuacji, kiedy u偶ytkownik podejmuje akcj臋, kt贸r膮 i tak by wykona艂, w przypadku postawienia na sytuacj臋 braku wyboru (patrz: Nest Bank)

 

Jak robi膮 to giganci?

Mowa b臋dzie o mediach spo艂eczno艣ciowych. Obecne s膮 w naszym 偶yciu od dekady i nic nie wskazuje na to, 偶eby mia艂y z niego znikn膮膰. Postanowi艂em sprawdzi膰 w jaki spos贸b wykorzystuj膮 call to action na swoich stronach g艂贸wnych – czyli miejscach, w kt贸rych mo偶emy si臋 zarejestrowa膰.

CTA Facebooka nie wyr贸偶nia si臋 niczym ciekawym:

facebook call to action
殴r贸d艂o: facebook.com

 

A jak wygl膮da艂o to na Facebooku w 2008 roku?

facebook 2008 call to action
殴r贸d艂o: facebook.com

 

Poza niewiele gorsz膮 grafik膮 na stronie startowej, CTA nie r贸偶ni si臋 – zach臋ca po prostu do za艂o偶enia konta. W odr贸偶nieniu od nowszej wersji strony, wersja sprzed niemal 10 lat przybli偶a艂a odrobin臋 funkcjonalno艣膰 witryny, czego obecnie brakuje.

Por贸wnajmy teraz Twittera na stan obecny oraz z roku 2008:

twitter call to action
殴r贸d艂o: twitter.com

 

CTA z pocz膮tk贸w serwisu by艂o nieco bardziej frywolne i krzykliwe, obecne jest spokojne i zupe艂nie beznami臋tne. Obecna szata graficzna strony startowej Twittera zupe艂nie r贸偶ni si臋 od tego, z czym spotykali艣my si臋 w roku 2008. Wraz z kierunkiem zmian to偶samo艣ci, zmieniono r贸wnie偶 wezwanie do dzia艂ania – jak ju偶 zasugerowa艂em jest zwyczajne, ten fakt mo偶e wynika膰 z obecnej powszechnej znajomo艣ci serwisu, co nie wymusza na autorach nieco nachalnego przekonania u偶ytkownika, 偶e strona jest fajna i warto zosta膰 z ni膮 na d艂u偶ej.

Przed nami jeszcze jedno por贸wnanie w czasie:

pinterest call to action
殴r贸d艂o: pinterest.com

 

pinterest 2010 call to action
殴r贸d艂o: pinterest.com

 

Powy偶ej widzimy dwie wersje serwisu Pinterest. Pierwszy zrzut ekranu to wersja tera藕niejsza, drugi za艣 podchodzi z pocz膮tk贸w witryny, czyli z 2010 roku. CTA r贸偶ni膮 si臋 diametralnie. W pierwszym przypadku nie mog臋 jednoznacznie stwierdzi膰 czy przej艣cie do kroku drugiego (czyli wybranie jednej z opcji kontynuacji) w艂a艣ciwie jest wezwaniem do dzia艂ania, czy jest tylko instrukcj膮. Starsza wersja serwisu posiada CTA („Request Invitation”), kt贸re w dw贸ch s艂owach przedstawia sytuacj臋: „Nie mo偶esz si臋 ot tak zarejestrowa膰, popro艣 najpierw o zaproszenie.”. Chocia偶 samo rozwi膮zanie mo偶e uchodzi膰 za kontrowersyjne, to ma swoje zalety – wp艂ywa bowiem na wi臋ksz膮 ciekawo艣膰 u偶ytkownika – jak dosta膰 zaproszenie? kiedy je dostan臋? czy w og贸le je dostan臋? Jest dodatkowo r贸wnie偶 czym艣, co pod艣wiadomie wp艂ywa na my艣lenie o sobie jako o osobie potencjalnie znajduj膮cej si臋 w gronie os贸b „wybranych”, w odr贸偶nieniu od serwis贸w, gdzie mo偶na si臋 zarejestrowa膰 w 30 sekund.

 

Ostatni przyk艂ad medi贸w spo艂eczno艣ciowych to LinkedIn. Oba przedstawione poni偶ej CTA s膮 przyk艂adami tego jak po艂膮czy膰 przycisk z walorami marki, kt贸re stanowi膮 uzupe艂nienie dla ca艂ej akcji.

linkedin call to action
殴r贸d艂o: linkedin.com

 

linkedin do艂膮cz do najwi臋kszej na 艣wiecie sieci profesjonalist贸w
殴r贸d艂o: linkedin.com

Wa偶ne zalety serwisu widoczne s膮 powy偶ej przycisk贸w, za艣 wykonanie akcji stanowi w tym wypadku ch臋膰 przekonania si臋, czy to o czym czyta u偶ytkownik to prawda.

 

Brak CTA tam gdzie to potrzebne

Czasami mo偶emy spotka膰 si臋 ze stronami, kt贸re ju偶 na pierwszy rzut oka mog艂yby konwertowa膰 lepiej, je偶eli tylko odpowiednio wykorzysta艂yby wezwanie do dzia艂ania. Poni偶ej przedstawiam dwa przyk艂ady takich miejsc:

pkobp brak call to action
殴r贸d艂o: pkobp.pl

Bank PKO zaznacza pewne has艂o stylizuj膮c litery na wielkie i pogrubione. Nie wykorzystuje jednak potencja艂u CTA zostawiaj膮c pod w gruncie rzeczy ciekawie, skr贸towo opisan膮 mo偶liwo艣ci膮 dla nowych klient贸w, tylko jedno s艂owo „Wi臋cej”, kt贸ry w dodatku nie wyr贸偶nia si臋.

 

allegro brak call to action
殴r贸d艂o: allegro.pl

 

Allegro ma ogromny zasi臋g i jest powszechnie znan膮 stron膮 internetow膮. Bior膮c pod uwag臋 fakt, 偶e od jakiego艣 czasu sprzedaje produkty pod w艂asnym brandem, dziwi to, 偶e strona nie posiada wyra藕nego call to action, mog膮cego przecie偶 mie膰 korzy艣ci przede wszystkim finansowe.

Serwis Rate Your Music cechuje si臋 uproszczonym szablonem, aby nie nazwa膰 go nienowoczesnym. Problemem strony g艂贸wnej jest to, 偶e wezwanie do dzia艂ania umieszczono jako link do zostania subskrybentem. Zak艂adaj膮c, 偶e osoba chc膮ca zosta膰 u偶ytkownikiem serwisu nie zna jego mechaniki, takie rozwi膮zanie nie jest dobre. Warto r贸wnie偶 zwr贸ci膰 uwag臋 na fakt, 偶e opcja menu przenosz膮ca do logowania/rejestracji nie wyr贸偶nia si臋 na tle innych element贸w menu.

rateyourmusic zly call to action
殴r贸d艂o: rateyourmusic.com

 

Prosta forma z czytelnym przekazem

Przyk艂ad z poprzedniej sekcji artyku艂u, wskazuj膮cy na zmarnowany potencja艂 PKO, nie oznacza, 偶e wezwanie do dzia艂ania zawsze musi by膰 wyra藕ne, du偶e, kolorowe czy w jaki艣 spos贸b przyci膮gaj膮ce wzrok. CTA, kt贸re znajdziecie poni偶ej s膮 stosunkowo proste, jednak偶e skonstruowane tak, aby zwr贸ci膰 uwag臋 u偶ytkownika na fakt, 偶e po klikni臋ciu wydarzy si臋 co艣 ciekawego.

 

wikiwacje wikipedia
殴rod艂o: wikipedia.pl

Na stronie Wikipedii mo偶emy znale藕膰 proste CTA, po klikni臋ciu kt贸rego zostaniemy przeniesieni na stron臋 konkursow膮, Wikipedia zwraca tak偶e uwag臋 na fakt, 偶e konkurs ma charakter prospo艂eczny (o ile tak – jak ja – traktujemy to miejsce).

wikiwakcje dowiedz si臋 wi臋cej
殴rod艂o: wikiwakacje.pl

 

Inny przyk艂ad z Wikipedii to link w samym sekcji nag艂贸wka.

wikipedia ka偶dy mo偶e edytowa膰
殴rod艂o: wikipedia.pl

 

Cech膮 charakterystyczn膮 powy偶szego wezwania do dzia艂ania jest fakt, 偶e nie zawiera element贸w CTA, kt贸re widzimy w ich zdecydowanej wi臋kszo艣ci na stronach maj膮cych co艣 w ofercie. Podkre艣lony zosta艂 zwrot „ka偶dy mo偶e redagowa膰”, kt贸ry sugeruje:

  • przedstawienie szczeg贸艂owych informacji o mo偶liwo艣ci samodzielnego redagowania
  • warunki redagowania
  • prawdopodobnie korzy艣ci z samodzielnego redagowania

CTA Wikipedii jest ponadto ma艂膮 zach臋t膮 do wzi臋cia udzia艂u w procesie tworzenia tre艣ci dost臋pnych globalnie.

 

Jasna instrukcja

Dobre CTA mo偶e zawiera膰 si臋 w jasnej instrukcji. U偶ytkownik z poziomu wezwania do dzia艂ania dowiaduje si臋 od razu co powinno wydarzy膰 si臋 po wykonaniu akcji, o kt贸r膮 zostaje poproszony/kt贸ra zostaje wskazana. Poni偶ej przedstawiam przyk艂ady call to action z jasn膮 instrukcj膮.

Agencja 10Clouds postawi艂a na prostot臋 w tre艣ci znajduj膮cej si臋 na przycisku:

10clouds call to action
殴r贸d艂o: 10clouds.com

Po klikni臋ciu buttonu od razu przenosimy si臋 do kr贸tkiego formularza kontaktowego, w kt贸rym mo偶emy przedstawi膰 za艂o偶enia swojego projektu. Po ponownym klikni臋ciu „Hire us” mo偶emy ju偶 oczekiwa膰 kontaktu od agencji.

 

10clouds
殴r贸d艂o: 10clouds.com

 

Proste CTA cz臋sto wykorzystywane s膮 w sklepach internetowych:

aliexpress call to action
殴r贸d艂o: aliexpress.com

 

rtveuroagd call to action
殴r贸d艂o: euro.com.pl

 

rtv euro agd gry cta
殴r贸d艂o: euro.com.pl

 

xkom call to action

Poni偶ej jeszcze kilka przyk艂ad贸w zwi膮zanych z wykorzystaniem w CTA jasnej instrukcji:

 

antyradio call to action
殴r贸d艂o: antyradio.pl

Chocia偶 samo CTA „GRAJ” mo偶e by膰 odebrane jako element menu, stanowi jednak wezwanie do dzia艂ania. Funkcja radia online nie jest jedyn膮 czy najwa偶niejsz膮 opcj膮 witryny (ta ma raczej charakter informacyjny). Wybranie zatem opcji grania to odpowied藕 na wezwanie autor贸w.

Podobnie wygl膮da to na stronie Awwwards:

awwwards call to action
殴r贸d艂o: awwwards.com

 

Proste instrukcje pojawiaj膮 si臋 r贸wnie偶 jako potwierdzenie charakteru i mo偶liwo艣ci strony internetowej:

clutch call to action
殴rod艂o: clutch.co

 

filmweb call to action
殴r贸d艂o: filmweb.pl

 

imdb call to action
殴r贸d艂o: imdb.com

Zar贸wno Filmweb jak i IMDb wykorzystuj膮 CTA zawarte w funkcjonalno艣ci strony. Przedstawiaj膮 mo偶liwo艣ci wyszukiwarki, rozja艣niaj膮c jej zastosowanie. Chocia偶 samo przej艣cie do kolejnej podstrony nie wyst臋puje tutaj pod postaci膮 linku czy przycisku, to tego typu przyk艂ady uznaj臋 za wezwanie do dzia艂ania.

Stary ale jary JoeMonster r贸wnie偶 wykorzystuje proste instrukcje, wr臋czaj膮c u偶ytkowniki kilka opcji, z kt贸rych mo偶e skorzysta膰. Chocia偶 zar贸wno szablon graficzny i jak spos贸b podania wydaje si臋 przestarza艂y, to wezwanie do dzia艂ania zachowuje swoj膮 funkcjonalno艣膰:

joemonster call to action
殴r贸d艂o: joemonster.org

 

Kolejny przyk艂ad prostych instrukcji w CTA, znajdziemy na stronie Ubera:

 

uber call to action
殴r贸d艂o: uber.com

 

Nad formularzem u偶ytkownik zapoznaje si臋 z przeznaczeniem tego偶. Pod nim z kolei potwierdza, to co przeczyta艂 wy偶ej. Proste i oczywiste.

Dope艂nieniem dla CTA z powy偶szej sekcji artyku艂u, mog膮 by膰 dwa przyk艂ady rozwi膮za艅 jakie wprowadzone zosta艂y na tych dw贸ch portalach tematycznych:

 

CTA UX i SEL
殴r贸d艂o: usabilitygeek.com / searchengineland.com

 

CTA po lewej to dok艂adne przedstawienie opisu akcji, kt贸r膮 mo偶e wykona膰 u偶ytkownik. Do CTA do艂膮czono w skr贸cie najwa偶niejsze informacje, kt贸re user musi wiedzie膰, zanim kliknie. S艂owo „FREE” dodatkowo wyr贸偶niono aby przykuwa艂o uwag臋. W przypadku wezwania do dzia艂ania z serwisu Search Engine Land w niewielkim boxie zmieszczono optymaln膮 ilo艣膰 informacji, kt贸re wzmacniaj膮 efekt przycisku. Button bez informacji nad nim (celu, nazwy eventu, miejsca, filmiku pogl膮dowego) nie mia艂by takiej si艂y jak z tymi dodatkami.

 

A to, to co?

W odr贸偶nieniu od call to action b臋d膮cych jasn膮 instrukcj膮 chc臋 przedstawi膰 kilka przyk艂ad贸w wezwa艅 do dzia艂ania, kt贸re nie s膮 oczywiste. Na pierwszy ogie艅 – Biedronka w trzech krokach.

biedronka call to action
殴r贸d艂o: biedronka.pl

 

Na stronie Biedronki mo偶emy spotka膰 si臋 z takim oto sliderem, zawieraj膮cym jakie艣 ukryte tre艣ci, na temat kt贸rych mo偶emy dowiedzie膰 si臋 dopiero po klikni臋ciu „Zobacz wi臋cej >”. No to klikamy.

 

biedronka call to action krok2
殴r贸d艂o: biedronka.pl

Po klikni臋ciu w slider, zostajemy przeniesieni do filmiku, kt贸ry oczywi艣cie mo偶emy w艂膮czy膰.

biedronka call to action krok3
殴r贸d艂o: biedronka.pl

Niestety kilkunastosekundowa produkcja raczej wiele nie rozja艣nia, wci膮偶 widzimy otoczk臋 tajemnicy ale jednocze艣nie wiemy, 偶e „to nie koniec” i wkr贸tce Biedronka zaprezentuje co艣 wi臋cej. Clickbaitowy charakter CTA Biedronki prawdopodobnie konwertuje ca艂kiem nie藕le, ale bior膮c pod uwag臋 fakt, 偶e marka nie ma aury brandu premium, nie widz臋 powodu dla kt贸rego nale偶a艂oby porcjowa膰 emocje potencjalnemu/dotychczasowemu klientowi.


Na samym pocz膮tku artyku艂u przywo艂ywa艂em ju偶 przyk艂ad banku Credit Agricole. Poni偶ej przedstawi臋 jeszcze inne wezwanie do dzia艂ania, kt贸re mo偶emy znale藕膰 na stronie, te jest ciekawsze ni偶 to co podpi臋te zosta艂o pod baner.

nie przegap rabat贸w w credit agricole
殴r贸d艂o: credit-agricole.pl

 

Zwrot „Nie przegap rabat贸w!” to oczywiste CTA. U偶ytkownik mo偶e przej艣膰 do strony, kt贸rej oferta mo偶e go zaskoczy膰, zw艂aszcza, 偶e samo CTA r贸wnie偶 nie pojawia si臋 od razu, a dopiero po chwili pobytu na stronie banku.

Interesuj膮cy przyk艂ad niejasnego call to action znajdziemy na stronie Google Translate. Tu偶 pod polem t艂umacze艅 spotkamy grafik臋 z podpisem, po klikni臋ciu kt贸rej przenosimy si臋 do panelu z naszymi osobistymi statystyki w roli t艂umacza.

google translate call to action
殴rod艂o: translate.google.pl

CTA nie jest oczywiste. Nie sugeruje wprost tego, 偶e za kilka sekund mo偶e rozpocz膮膰 t艂umaczenia; mo偶e zosta膰 odebrane na przyk艂ad jako przej艣cie do formularza, kt贸ry to dopiero sprawi lub nie, 偶e kto艣 rozwa偶y nasz膮 aplikacj臋.

 

Obietnica bez pokrycia

Nie spos贸b nie wspomnie膰 r贸wnie偶 o wezwaniach do dzia艂ania, kt贸re mog膮 s艂u偶y膰 statystykom, ale nie spe艂niaj膮 swojej roli, gdy偶 zwyczajnie obiecuj膮 jedno, a „robi膮” drugie.

tvn24 call to action
殴r贸d艂o: tvn24.pl

 

tvn24 brak abonamentu
殴r贸d艂o: tvn24.pl

 

CTA „Ogl膮daj online TVN24 na 偶ywo” sugeruje, 偶e po klikni臋ciu przeniesieni zostaniemy do streamu…ale czy na pewno? Ot贸偶 nie. Zostaniemy przeniesie do panelu logowania i dostajemy informacje o konieczno艣ci uiszczenia op艂at. CTA spe艂nia zatem swoje zadanie po艂owicznie. U偶ytkownik rzeczywi艣cie mo偶e klikn膮膰, ale nie zrealizuje us艂ugi, bo dopiero w kroku drugim dowiedzia艂 si臋, 偶e jest ona p艂atna.

 

P艂atne i darmowe

Rozwi膮zaniem problemu, kt贸ry om贸wi艂em wy偶ej jest wykorzystanie dw贸ch button贸w. Ka偶dy z nich przeniesie u偶ytkownika do opcji, kt贸r膮 preferuje. Takie rozwi膮zanie nastawia usera do oferty bardziej pozytywnie.

clutch animacja call to action
殴r贸d艂o: clutch.co

Powy偶ej widzimy co wydarzy si臋, je偶eli najedziemy myszk膮 na jedn膮 z opcji. Ta, kt贸ra oznaczona jest kolorem czerwonym to opcja darmowa (tylko informacje), za艣 pod艣wietlenie (dodanie w艂asnej firmy) jasnoniebieskie to opcja p艂atna.

 

freshmail call to action
殴r贸d艂o: freshmail.pl

 

netflix call to action
殴r贸d艂o: netflix.com

 

user testing call to action
殴rod艂o: usertesting.com

 

wetransfer call to action
殴r贸d艂o: wetransfer.com

 

Powy偶sze przyk艂ady to w艂a艣ciwe sposoby zastosowania wezwania do dzia艂ania. U偶ytkownik wybiera opcj臋 p艂atn膮 lub darmow膮 – w zale偶no艣ci od potrzeb. W przypadku Netflixa zastosowano nieco inne podej艣cie. U偶ytkownik ma tylko jedn膮 opcj臋, ale za to wie wi臋cej ju偶 na starcie: us艂uga og贸lnie jest p艂atna, ale pierwszy miesi膮c jest darmowy. Informacje podane czarno na bia艂ym – zw艂aszcza zwi膮zane z finansami – s膮 dobrze postrzegane przez potencjalnych klient贸w. Te z nich, kt贸re uznawane s膮 za bardziej warto艣ciowe dla u偶ytkownika s膮 specjalnie stylizowane – tutaj wykorzystywane s膮 najcz臋艣ciej kontrastuj膮ce kolory, animacje czy dwie wersje wygl膮du (opcja druga pojawia si臋 po najechaniu kursorem na przycisk).

 

Wiemy, co jest wa偶ne

Wielu autor贸w ciekawych przyk艂ad贸w CTA wychodzi z za艂o偶enia, 偶e doskonale rozumie zamierzenia potencjalnych klient贸w. Poni偶ej znajduj膮 si臋 przyk艂ad wezwa艅 do dzia艂ania, kt贸re s膮 najwa偶niejszymi na stronie. Wyszczeg贸lnienie ich w dobrym miejscu pozwala na sprawne kierowanie ruchem po stronie – od jednej podstrony do nast臋pnej. Chocia偶 ograniczona liczba opcja wydaje si臋 by膰 czasami niewystarczaj膮ca to zwr贸cenie uwagi na akcj臋, kt贸rej u偶ytkownik najbardziej poszukuje, dobrze si臋 sprawdza.

chop chop call to action
殴r贸d艂o: chop-chop.org

 

Chop-Chop postawi艂 na szybkie przeniesienie u偶ytkownika od razu do formularza zam贸wienia, dzi臋ki czemu ogranicza si臋 czas na przegl膮danie pe艂nej oferty, portfolio itd. Takie rozwi膮zanie nie zawsze si臋 sprawdza, ale jest u偶yteczne w przypadku firm z wypracowan膮 reputacj膮 i cechuj膮cych si臋 powszechn膮 znajomo艣ci膮.

Poni偶sze CTA agencji Hologram kieruj膮 u偶ytkownika do jednej strony: „O nas”.

hologram agencja call to action
殴r贸d艂o: hologramdesign.co

 

hologram-cta
殴r贸d艂o: hologramdesign.co

Niezale偶nie od tego, kt贸r膮 z opcja przycisku wybierzemy przeniesieni zostaniemy na stron臋, na kt贸rej w skr贸cie opisano profil dzia艂alno艣ci agencji Hologram. Tam z kolei spotykamy si臋 z podobnymi sekcjami z innym contentem i kolejnymi dwoma przyk艂adami CTA – tym razem o tym samym tytule:

let's talk call to action hologramdesign
殴r贸d艂o: hologramdesign.co

 

Agencja The Story stawia na szybkie skontaktowanie si臋 w celu om贸wienia projektu, z tym 偶e CTA widoczne jest od razu na samej g贸rze strony – w menu.

thestory call to action
殴r贸d艂o: thestory.pl

 

Interesuj膮ce przyk艂ady przyjemnych CTA

Zaczniemy od kilku wartych uwagi przyk艂ad贸w wezwa艅 do dzia艂ania, kt贸re znajduj膮 si臋 na stronach po艣wi臋conych user experience. Jako, 偶e call to action jest jego wa偶nym elementem, warto czerpa膰 wzorce od najlepszych.

boagworld call to action
殴r贸d艂o: boagworld.com

W tym przypadku spotykamy si臋 a偶 trzema call to action, kt贸re stanowi膮 dodatek dla du偶ego has艂a w banerze: „Sta艅 si臋 ekspertem ux”. Chocia偶 samo has艂o nie jest klikalne, to 3 przyciski z czarnym t艂em ju偶 tak. U偶ytkownik widzi opcje, z kt贸rych mo偶e skorzysta膰, wszystkie 3 to nawi膮zanie do terminu „ekspert”.

Na tej samej stronie znajdziemy r贸wnie偶 tego rodzaju rozwi膮zanie:

paulboag blog twitter call to action
殴r贸d艂o: boagworld.com

Chocia偶 Twitter nie jest oczywi艣cie integraln膮 cz臋艣ci膮 bloga, to samo graficzne przygotowanie wa偶nego cytatu pochodz膮cego z danego artyku艂u jest dobrym pomys艂em na CTA. Stanowi podpowied藕 dla osoby, kt贸ry chcia艂aby podzieli膰 si臋 ciekawym tekstem, ale preferuje inne rozwi膮zanie ni偶 suchy link.

Na stronie uxmastery.com spotykamy taki oto CTA:

uxmastery call to action
殴r贸d艂o: uxmastery.com

Powy偶szy rodzaj wezwania do dzia艂ania r贸wnie偶 cechuje si臋 po艂膮czeniem tre艣ci w banerze z tre艣ci膮 w samym przycisku. Tre艣膰 dla buttonu stanowi niejako wskazanie powodu do wykonania akcji, podkre艣lone zosta艂o, 偶e poradnik pozwoli na rozpocz臋cie kariery w UX. Sam button wyr贸偶nia si臋 na tle reszty kolorem.

Na tej samej stronie znajdziemy r贸wnie偶 ciekawe CTA powoduj膮ce przej艣cie do internetowej spo艂eczno艣ci fan贸w UX. Po najechaniu kursorem na grafik臋, ta delikatnie zmienia swoj膮 zawarto艣膰:

uxmastery hurray cta
殴r贸d艂o: uxmastery.com

 

ContentStream wykorzystuje najprostsze metody w budowaniu CTA – mog膮 si臋 one jednak spotka膰 z du偶膮 konwersj膮:

contentstream call to action
殴r贸d艂o: contentstream.pl

Przed samym przyciskiem znajduj膮 si臋 „s艂owa wst臋pu”, za艣 ten wyr贸偶nia si臋 wielko艣ci膮, rozmiarem czcionki, kolorem i stanowi stosunkowo du偶膮 cz臋艣膰 sekcji strony w wymiarze procentowym.

 

Duolingo call to action
殴r贸d艂o: duolingo.com

 

Duolingo stawia na podj臋cie przez u偶ytkownika natychmiastowej decyzji, ju偶 po przeczytaniu dos艂ownie 6 s艂贸w. Sama formu艂a „Rozpocznij” wyr贸偶nia si臋 na tle wielu innych stron przede wszystkim s艂owem, po drugie niesie ze sob膮 cechy interfejsu programu – zwykle bowiem aby wykona膰 co艣 na stronie o pewnej u偶yteczno艣ci, najpierw nale偶y za艂o偶y膰 konta, a tutaj w kilka krokach od razu mo偶emy przyst膮pi膰 do pracy – jak w grze wideo czy w aplikacji.

Interesuj膮cym przyk艂adem przyjemnego CTA jest Apple.

ipad pro call to action
殴r贸d艂o: apple.com

Nie widzimy tutaj typowych dla wielu sklep贸w zwrot贸w typu kup, zobacz, poka偶 mi szczeg贸艂y, zam贸w itd. Apple nie sugeruje nawet co wydarzy si臋 po klikni臋ciu w baner. Sam u偶ytkownik musi to odkry膰 o ile zach臋c膮 go zwroty przygotowane przez brand i sam produkt.

W wezwaniach do dzia艂ania obserwujemy r贸wnie偶 elementy interaktywno艣ci:

udemy call to action
殴r贸d艂o: udemy.com

W przypadku strony Udemy.com spotykamy si臋 z CTA w formie wyszukiwarki, kt贸ra jednak nie daje nam 偶adnych podpowiedzi. Dopiero sam u偶ytkownik musi przedstawi膰 jej swoje propozycje.

Nieco podobne rozwi膮zanie zastosowano w Woodpeckerze:

woodpecker call to action
殴r贸d艂o: woodpecker.co

Mo偶e zacz膮膰 wykorzystywa膰 mo偶liwo艣ci start-upu Woodpecker, ale dopiero wtedy kiedy podamy sw贸j email. Ponownie przywo艂am tutaj przyk艂ad CTA zwi膮zany z opcj膮 free/paid:

woodpecker-cta
殴r贸d艂o: woodpecker.co

Woodpecker jasno podpowiada od czego zacz膮膰. Wersja pr贸bna na 14 dni jest oznaczona znacznie wyra藕niej ni偶 opcja demo. U偶ytkownik ma r贸wnie偶 艣wiadomo艣膰 tego, 偶e po okresie pr贸bnym b臋dzie musia艂 pokry膰 koszty us艂ugi.

Niekt贸re sklepy niezbyt ciekawie pochodz膮 do CTA, brakuje im kreatywno艣ci i zrozumienia motywacji u偶ytkownik贸w. W opozycji do takich przypadk贸w stoi na przyk艂ad sklep Xiaomi4You:

xiaomi call to action
殴r贸d艂o: xiaomi4you.pl

Zr贸b sobie prezent jest has艂em ciekawym, prostym i b臋d膮cym podstaw膮 do bli偶szej „wsp贸艂pracy” kupca ze sprzedawc膮. Zamiast beznami臋tnego „Wi臋cej”, „Zobacz detale”, „Przejd藕 do sklepu” itd., mo偶emy „zrobi膰 sobie prezent”.

 

Powtarzanie CTA

Na stronach internetowych mo偶emy spotka膰 si臋 z praktyk膮 cz臋stego powtarzania tego samego CTA. Poni偶ej ciekawy przyk艂ad:

brand24 call to action

brand24 cta darmowe konto
殴r贸d艂o: brand24.pl

Brand24 wielokrotnie powiela swoje wezwanie do dzia艂ania: „Za艂贸偶 darmowe konto”. Niezale偶nie od tego, w kt贸rym miejscu strony si臋 znajdziemy, CTA wsz臋dzie „chodzi” za nami. Nie spos贸b zatem go nie zauwa偶y膰, a im wi臋cej razy go zobaczymy, tym wi臋ksza szansa na to, 偶e wypr贸bujemy trial. Taktyka powtarzania jednakowego call to action w wielu miejscach strony ma swoje wady i zalety, z pewno艣ci膮 mo偶e by膰 wi臋kszym minusem ni偶 plusem na stronach nowych, o zerowej jeszcze reputacji, z zerow膮 艣wiadomo艣ci膮 marki w艣r贸d konsument贸w. Jedna forma CTA w takim wypadku mo偶e sugerowa膰, 偶e start-up nie przygotowa艂 na tyle ciekawej oferty, aby obroni艂a si臋 sama.

Du偶e firmy, znane od d艂ugiego czasu, jak w艂a艣nie Brand24, maj膮 ju偶 ugruntowan膮 pozycj臋 na rynku, taka taktyka zatem im nie zaszkodzi.


Podsumowanie

Call to action jest jednym z najwa偶niejszych element贸w zach臋caj膮cych do podj臋cia akcji zak艂adanej przez autor贸w miejsca, w kt贸rym znajduje si臋 u偶ytkownik. Chocia偶 przedstawione przeze mnie przyk艂ady call to action przyjmuj膮 rozmaite formy – przyciski, linki na艂o偶one na zach臋caj膮ce do kliku frazy, customizowane wyszukiwarki, atrakcyjne banery czy ca艂e sekcje strony, maj膮 wsp贸lny cel – sprawi膰, aby u偶ytkownik d艂u偶ej zosta艂 za stronie, zapozna艂 si臋 z ofert膮 czy mo偶liwo艣ciami serwisu i finalnie aby sta艂 si臋 klientem/zarejestrowanym u偶ytkownikiem.

Atrakcyjno艣膰 CTA polega nie tylko na dobrej grafice, ale tak偶e na chwytliwym ha艣le, przekazaniu prostych instrukcji i nakre艣leniu tego, co wydarzy si臋 po podj臋ciu akcji.

Strony nie posiadaj膮ce wezwa艅 do dzia艂ania niekoniecznie trac膮 u偶ytkownik贸w ale z pewno艣ci膮 nie wykorzystuj膮 w pe艂ni swojego potencja艂u.

Dodaj komentarz

Tw贸j adres email nie zostanie opublikowany. Pola, kt贸rych wype艂nienie jest wymagane, s膮 oznaczone symbolem *

Za艂aduj wi臋cej z dzia艂u User experience

Polecam

Reklamy na czole i inne mniej znane formy marketingu

Ile musieliby wam zap艂aci膰 aby艣cie pozwolili wykorzysta膰 w艂asne czo艂o jako form臋 poruszaj膮…