Call to action ­čôó ÔÇô jak przyciski i has┼éa wp┼éywaj─ů na zachowanie u┼╝ytkownika?

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 actionDeutsche Bank call to action Credit Agricole call to action

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 actionNest bank call to action

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

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

Tak┼╝e w tym miejscu nie spotkamy si─Ö z zach─Öceniem do za┼éo┼╝enia konta czy sprawdzenia szczdg├│┼é├│w dotycz─ůcych kredyt├│w. CTA widoczne jest dopiero w nast─Öpnej sekcji:

lions bank call to action

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

A jak wygl─ůda┼éo to na Facebooku w 2008 roku?

facebook 2008 call to action

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

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 pinterest 2010 call to action

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 linkedin do┼é─ůcz do najwi─Ökszej na ┼Ťwiecie sieci profesjonalist├│w .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

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

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

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

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

Inny przykład z Wikipedii to link w samym sekcji nagłówka.

wikipedia ka┼╝dy mo┼╝e edytowa─ç

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

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

Proste CTA cz─Östo wykorzystywane s─ů w sklepach internetowych:

aliexpress call to action rtveuroagd call to action rtv euro agd gry cta

xkom call to action

Poni┼╝ej jeszcze kilka przyk┼éad├│w zwi─ůzanych z wykorzystaniem w CTA jasnej instrukcji:

antyradio call to action

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

Proste instrukcje pojawiaj─ů si─Ö r├│wnie┼╝ jako potwierdzenie charakteru i mo┼╝liwo┼Ťci strony internetowej:

clutch call to action filmweb call to action imdb call to action

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

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

uber call to action

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:

Darmowy kurs UX

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

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.

Po klikni─Öciu w slider, zostajemy przeniesieni do filmiku, kt├│ry oczywi┼Ťcie mo┼╝emy w┼é─ůczy─ç.

biedronka call to action krok3

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

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

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 tvn24 brak abonamentu

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

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 actionnetflix call to action user testing call to action wetransfer call to action

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

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 hologram-cta

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

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

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

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

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

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

ContentStream wykorzystuje najprostsze metody w budowaniu CTA - mog─ů si─Ö one jednak spotka─ç z du┼╝─ů konwersj─ů:

contentstream call to action

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

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

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

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

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

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

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

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 naami. 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.

Ostatnio zmodyfikowano: 27 sierpnia 2017