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.

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.

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

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, 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 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 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┼╝ 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.

Za┼éaduj wi─Öcej z dzia┼éu User experience

Dodaj komentarz

Tw├│j adres email nie zostanie opublikowany. Pola, kt├│rych wype┼énienie jest wymagane, s─ů oznaczone symbolem *

Polecam

Cross-selling i up-selling w marketingu internetowym