Jak mít na webu skvělé call to action tlačítka?

Dostat uživatele internetu na webové stránky většinou nestačí. Je to jenom první krok. Důležité je návštěvníka provést webem tak, aby udělal, co potřebujeme. Koupil službu, zarezervoval termín, přečetl článek, přihlásil se k odběru newsletteru, stáhl e-book nebo nás třeba kontaktoval. A k tomu, mimo jiné, pomohou i správně navržená call to action tlačítka.

Jakmile totiž necháte návštěvníka webu v rozpacích, udělá zpravidla přesně to, co nechcete. Odejde bez další interakce. Proto jsou call to action nedílnou součástí designu moderního webu. 

A co to je "call to action"?

Českým ekvivalentem je spojení „výzva k akci“. Běžně se také používá zkratka CTA. 

Call-to-action je interaktivní prvek, který má většinou podobu kontrastního tlačítka s textem, ale může to být i klasický text obsahující link nebo třeba obrázek. Používá se na webových stránkách, ale i v e-mailech, reklamách, pop-up oknech, sociálních sítích a na mnoha dalších místech, kde je potřebné uživatele přimět ke konkrétní akci. 

Platí přitom jednoduché pravidlo. Čím lépe znáte cílovou skupinu, tím úspěšnější budete v navrhování efektivního CTA prvku. A pokud ještě vezmete v potaz následující tipy s příklady, bude úspěch vašich cta buttonů zaručen.

Umístění call to action tlačítka rozhoduje o úspěchu

Kam s ním? Přesně to je otázka, na kterou neexistuje jednoznačná odpověď. Důležité je respektovat dva základní principy.

1. Držte se zavedených standardů
2. Poznejte co nejlépe uživatele vašeho webu 

Rozhodně se nevyplácí návštěvníka webu něčím překvapovat. Tlačítko pro přihlášení je obvykle v pravém horním rohu. Proč to měnit? Ničeho dobrého byste tím nedosáhli. Lidé už mají v hlavě určitou mentální mapu, podle které se na internetových stránkách automaticky orientují. Není tedy důvod měnit zavedené pořádky. 

A jak umístit další call to action tlačítka?

Ideálně by měla být rozpoznatelná na první pohled. Uživatel by na ně měl logicky narazit během standardní návštěvy webu. Umístění by tak mělo odpovídat běžnému chování uživatele. 

To se sice jednoduše řekne, ale podstatně hůře udělá.

79 % uživatelů web jen proskenuje

Mějte na paměti poznatek z výzkumu od Nielsen Norman Group, který odhaluje pro majitele webů bolestivou skutečnost. Ať se budete snažit sebevíc, 79 % uživatelů váš web stejně jenom rychle proskenuje. Podrobněji se zaměří pouze na zvýrazněné pasáže webu a ostatní text jen zběžně prolétnou. 

Existuje několik vzorců skenování, ale o tom bychom mohli popsat několik dalších stránek (zájemci si mohou přečíst více v angličtině zde). Jestli chcete umístit call to action tlačítka s maximální přesností, doporučujeme využít teplotní mapy (heat maps), o kterých jsme psali v minulém článku. 

Pomocí speciální teplotní mapy (scroll mapy) také odhalíte, jak hluboko většina uživatelů v rámci stránky „doscrolluje“. Když je webová stránka dlouhá, vyplatí se call to action tlačítko umístit na více míst.

Barvou si získáte pozornost

Křiklavé barvy sice zaujmou, ale působí jako pěst na oko. Méně výrazné tóny zase nebudí dostatečnou pozornost. Jak z toho elegantně vybruslit?

Někteří lidé věří, že konkrétní barva funguje podstatně lépe než ostatní. Ve skutečnosti to není tak úplně pravda. 

Záleží na mnoha faktorech:

• Na umístění tlačítka v kontextu celého webu
• Na barvě pozadí
• Na barvách brandu
• Na podstatě zamýšlené akce
• Na cílové skupině

Obecně však platí, že by barva call to action tlačítka měla být dostatečně kontrastní k pozadí stránky. 

Pokud není web přeplácaný grafickými prvky, vyplatí se u CTA tlačítek použít také jemné stínování. 

Nicméně. Při navrhování designu je důležité vycházet z předem připravených schémat, která určují celkový vizuální styl webové stránky. Pokud je nedodržíte web design, bude web působit nesourodě, chaoticky a neprofesionálně.

Na velikosti záleží (i na mobilu)

Znáte to. Když je to moc malé, je s tím problém. Když je to ale moc velké, budí to obavy už na první pohled. A nenechte se mýlit. Stále se bavíme o call to action tlačítkách. Fakt.

Malé tlačítko je lehce přehlédnutelné. Navíc si vzpomeňte, jak se na miniaturní tlačítka špatně kliká na telefonech (Kristýna o tom mluví i ve videu v čase 10:20). Přitom v dnešní době se více než polovina lidí kouká na internet právě přes mobil (viz. Broadbandsearch). 

Na druhou stranu. Zas to s tou velikostí nepřehánějte. Tlačítko přes půl stránky je sice dobře viditelné a pohodlně na něho klikne i člověk s obřími prsty, ale nepůsobí zrovna dvakrát věrohodně. 

Zkuste raději upoutat uživatelovu pozornost trošku jiným způsobem. 

Použijte sílu volného prostoru. 

Když necháte kolem akčního tlačítka trochu místa, přirozeně na webu vynikne a bude na uživatele působit jako magnet. Při skenování stránky si všimne, že je něco jinak a přitáhne to jeho pozornost. Dobré využití prostoru okolo akčního tlačítka můžete vidět třeba na webu Airbank:

Jak zvolit správná slova?

Nedílnou součástí call to action tlačítek je také text. Právě obsah sdělení by měl uživatele přesvědčit, aby na tlačítko kliknul. Jak na to? Použijte osvědčené triky copywriterů.

• Naléhavost – časové omezení nabídky návštěvníka webu povzbudí k rychlé reakci. Jen si představte CTA tlačítko s textem: „Pouze dnes sleva 50 %“ 
• Benefity – zdůrazněte, co zákazník získá: „Servis na 3 roky zdarma“
• První osoba – zkuste v CTA tlačítkách použít podvědomou sugesci: „Chci se dozvědět víc“ 
• Direktivnost – „Kup teď!“ Někteří lidé potřebují trochu popostrčit. 
• Transparentnost – neustále se mluví o podvodech, proto je občas dobré návštěvníkovi webu naznačit, co bude po kliknutí následovat: „Spočítat nezávaznou nabídku“

Jestli nepatříte mezi zkušené copywritery, pravděpodobně se u psaní textů pro CTA tlačítka pořádně natrápíte. Není to totiž tak snadné, jak by se na první pohled mohlo zdát.

Musíte dostat potřebné informace, emoce a atmosféru do několika málo slov. Platí, že stručnost a srozumitelnost je půl úspěchu. Když se vám navíc podaří do CTA tlačítka propašovat i vtip, máte vyhráno. 

Párová tlačítka

Některá CTA se používají ve dvojici. Typicky to jsou tlačítka „potvrdit“ a „zrušit“. Sice uživateli internetu dáváte možnost výběru, ale ve skutečnosti chcete, aby akci uskutečnil.  

Není nic snadnějšího, než mu rozhodování trochu ulehčit. Využijte psychologického efektu vizuální hierarchie. 

Co si pod tím představit? Nic složitého.

Primární tlačítko, na které má návštěvník webu kliknout, udělejte v kontrastních barvách. Klidně použijte i tučné písmo. „Odmítací“ tlačítko nechte naopak trošku zaniknout. Zvolte nevýraznou barvu. Ideálně šedou. Mělo by však být stále dostatečně zřetelné. 

Příkladem v praxi je ukázka na cookie liště u Airbnb. Tlačítka Ok a Nastavení cookies:

Podobné to může být i s tlačítkem registrovat (Join now) a přihlásit (Sign in). Jako třeba tady ukázka z anglické verze webu od Starbucks:

Co si z článku o akčních tlačítkách odnést?

1. CTA tlačítka pomáhají plnit vytyčené cíle. Prostřednictvím správně navržených call to action tlačítek návštěvníci dostanou ve správnou dobu potřebný impuls, aby udělali, co potřebujeme.
2. Funkční call to action tlačítka usnadňují život majitelům webů i návštěvníkům.
3. Úspěšnost akčních tlačítek závisí především na znalosti cílového publika. Pokud budete vědět, jak se návštěvníci chovají na vaší internetové stránce, po čem touží a jakým jazykem hovoří, bude pro vás podstatně snazší navrhnout efektivní CTA tlačítko. 
4. Důležitá je velikost, barevnost a dostatečný prostor okolo tlačítka.
5. Nezapomínejte, že call to action tlačítka neexistují ve vakuu. Musíte je vnímat v kontextu celého webového designu. Podle toho volit barevné schéma, umístění i styl komunikace.
6. Funkční CTA tlačítka nenavrhnete přes noc. Ideální je připravit si několik sad call to action tlačítek a postupně pomocí A/B testování hledat ideální variantu. 

Kam dále?

• Stáhněte si komplexní checklist pro lepší výsledky z webu - je součástí vzdělávacího programu 20denní #AwesomeWeb výzva (je to zdarma).
• Přečtěte si 8 tipů, jak donutit čtenáře opravdu číst váš blog nebo představení 3 základních teplotních map pro lepší webovou analytiku.

Nezapomeňte, že se s call to action tlačítky nemusíte trápit. Pokud chcete zlepšit uživatelskou přívětivost vašeho webu a více prodávat on-line, napište na ondrej@creativehandles.com. Pomůžu vám s tím a s dalšími službami, které vylepší váš web.