Kliknout, nebo nekliknout? Tato hamletovská otázka se nabízí každému návštěvníkovi vašich stránek, jakmile uvidí tlačítko s výzvou k akci (CTA). Čím více výzev k akci na stránce máte, tím více času potřebuje uživatel k rozhodnutí. Musí zkoumat každé tlačítko a určit, které z nich nejlépe splňuje jeho požadavky a dovede jej nejrychleji k cíli. Jakákoli nejistota týkající se výzvy k akci může způsobit, že se návštěvník rozhodne špatně, nebo ještě hůře – neklikne na žádnou z nabízených výzev k akci.
Tomuto stavu můžete zabránit tím, že uděláte tlačítka natolik intuitivní, aby uživatel neměl problém zjistit, které tlačítko je nejdůležitější. Když uživatel uvidí, která výzva k akci směřuje přímo k jeho cíli, může okamžitě jednat. Existuje několik UX technik, které můžete použít, abyste dosáhli většího rozdílu v intuitivnosti jednotlivých akčních tlačítek. Níže zmíněné úpravy nejenže usnadní návštěvníkovi orientaci na stránce, ale také zlepší konverzní poměr.
Správné uspořádání tlačítek
Běžným omylem návrhářů je, že hlavní výzvu k akci umístí co nejvíce nahoře, protože chtějí, aby si jí uživatelé všimli co nejdříve. To je ale zcela zbytečné, pokud je hlavní výzva k akci dostatečně vizuálně odlišena. Nejen to, hlavní výzva k akci, která je umístěna příliš brzy, většinou nezastihne návštěvníka v situaci, kdy je připraven kliknout. Pokud považuje za nutné získat další informace, sjede pohledem dolů, a teprve poté musí hledat akční tlačítko nahoře. Namísto nucení uživatelů, aby znovu procházeli stránku, umístěte tlačítko s hlavní výzvou k akci tak, aby se k němu uživatelé mohli jednoduše dostat skenováním tlačítek v jediném toku shora dolů. To je pro uživatele efektivní, jelikož se před kliknutím na výzvu k akci dozvědí všechny potřebné informace.
►Umístění výzvy k akci ve spodní části obrazovky je výhodné i kvůli lepší ovladatelnosti na obrazovkách mobilních telefonů, což dále zvyšuje její účinnost.
Zobrazování méně důležitých odkazů jako text
Další častou chybou v designu stránky je použití textového odkazu namísto tlačítka. Textové odkazy používají návrháři většinou u méně důležitých odkazů, které mají nižší prioritu. Je to však špatná volba, jelikož uživatelé mohou tyto nenápadné textové odkazy zcela přehlédnout. Samozřejmě chceme, aby uživatel klikl na hlavní výzvu k akci, ale pokud chce nejdříve kliknout na něco jiného, neměli bychom mu to znesnadňovat.
"Textové odkazy jsou nejenže hůře rozpoznatelné, ale jsou také menší, takže může být na obrazovce mobilního telefonu obtížnější se do nich trefit."
Chcete-li umožnit uživatelům snadnější kliknutí na tlačítka s nízkou prioritou a zároveň jim umožnit je na první pohled rozpoznat, umístěte textový odkaz do obrysu tlačítka v jiné, méně nápadné barvě, než je hlavní výzva k akci. Méně důležité odkazy se nyní budou zobrazovat jako tlačítka a zároveň nebudou konkurovat hlavní výzvě k akci.
Přidejte hlavní výzvě k akci kontrastní barvy
Barevné odlišení je nejjednodušším způsobem, jak identifikovat tlačítko s nejvyšší prioritou. Mělo by se jednat o tlačítko, které vede uživatele přímo k jejich cíli. Pokud si nejste jisti prioritou tlačítka, zvažte, která akce umožňuje uživatelům postupovat směrem k jejich cíli a která akce je vrací zpět.
Například tlačítko „koupit“ má vyšší prioritu oproti tlačítkům „pokračovat v nákupu“ nebo „zobrazit košík“, protože posunuje uživatele nejrychleji směrem k jejich cíli. Mělo by proto být vizuálně nejnápadnější a mělo by mít nejvyšší kontrast oproti pozadí stránky. Ovšem co s ostatními dvěma tlačítky „pokračovat v nákupu“ a „zobrazit košík“? Jakou jim nastavit prioritu?
Tlačítko „zobrazit košík“ uživateli zobrazí položky, které přidali do košíku, což vede blíže k pokladně. Akce „pokračovat v nákupu“ vrátí uživatele zpět na stránky e-shopu, dále od pokladny.
Na základě této logiky by tlačítko „zobrazit košík“ mělo mít střední prioritu, zatímco „pokračovat v nákupu“ by mělo mít prioritu nízkou. Tlačítko „zobrazit košík“ si proto zaslouží větší vizuální váhu a vyšší barevný kontrast než tlačítko „pokračovat v nákupu“.
►Poté co pochopíte cíle uživatele a zjistíte, jak jednotlivé typy akcí pomáhají uživatelům v pohybu směrem k jejich cílům, můžete nastavit prioritu každého jednotlivého tlačítka a dát mu správnou vizuální váhu.
Vyberte nejvhodnější barvu
Jedním z nejefektivnějších způsobů, jak označit tlačítka s vysokou prioritou, je barva. Kontrastní barva vyčnívá z běžného textu a upoutá pozornost uživatele. Nepoužívejte proto na svých tlačítkách výzvy k akci stejnou barvu, jako má váš text. Oslabuje to sílu vizuálního podnětu a ztěžuje jeho rozeznatelnost od okolního textu.
Ideální barvou pro výzvy k akci je modrá, protože výzkumy ukazují, že je nejpozitivněji vnímána většinou lidí napříč všemi pohlavími a věkovými skupinami. Je to také nejběžnější barva, která se používá pro odkazy na webových stránkách, takže uživatelé podvědomě vnímají, že jde o odkaz.
►Výzkumy také zjistily, že uživatelé cítí pocit důvěry, bezpečnosti a spolehlivosti, když vidí modrou. Uživatelé proto budou s větší pravděpodobností klikat na tlačítka, která vyvolávají tyto pocity.
Nepoužívejte stejnou barvu pro dvě různá tlačítka na jedné stránce, jelikož uživatelé nebudou vědět, které z nich má vyšší prioritu. Nepoužívejte ale také různé barvy, protože by uživatelé byli zmateni a nevěděli by, co která barva znamená.
Místo toho použijte stejnou barvu pro obě tlačítka, ale pro tlačítko se střední prioritou snižte sytost a zvyšte jas. Tím bude tlačítko střední priority světlejší než tlačítko s vysokou prioritou. Obě tlačítka si nyní nebudou konkurovat a bude jasné, které je důležitější. Výše uvedené platí samozřejmě pouze v případě, že jsou tlačítka na světlém pozadí. V případě, že je pozadí tmavé, postupujte obráceně a tlačítko s vyšší prioritou udělejte světlejší.
Změňte tučnost fontu
Využití stávajících technik postačuje k tomu, aby bylo možné rozlišit prioritu jednotlivých výzev k akci, ale můžete udělat i více. Čím intuitivnější uděláte každé tlačítko, tím méně bude muset uživatel přemýšlet. Použití stejně tučného písma na každém textovém odkazu dodává všem stejný důraz. Je však lepší zdůraznit jednotlivé textové popisky odlišně tučným fontem podle priority. Změňte tučnost textových popisků tak, aby tlačítka s vysokou prioritou byla nejtučnější a tlačítka s nízkou prioritou byla nejméně tučná. Výsledkem bude, že textové štítky budou vizuálně odrážet důležitost a prioritu každé akce.
Umístěte ikonu na tlačítko s nejvyšší prioritou
Při tvorbě designu stránky bychom neměli zapomínat ani na handicapované uživatele, například barvoslepé, kteří mohou mít potíže rozeznat důležitost tlačítek odlišených barevně. Tito uživatelé potřebují něco víc, než je barva, aby dokázali pohodlně odlišit důležitost jednotlivých akčních tlačítek.
Přidání ikony na tlačítko s vysokou prioritou (například ikona košíku, šipky a podobně) mu přidává zvláštní důraz a vizuálně ho lépe odlišuje. Ikona dá na první pohled najevo, které akční tlačítko je nejdůležitější, a zaručí, že bude přitahovat největší pozornost.
►Výzkum zaměřený na sledování očí ukázal, že vizuální prvky získávají více pozornosti než pouhý text.
Jsou vaše akční tlačítka intuitivní?
Pokud uživatelé tráví dlouhou dobu na obrazovce s výzvou k akci nebo pokud dosahujete nízké míry prokliku, znamená to pravděpodobně, že vaše akční tlačítka nejsou dostatečně intuitivní. Pokud je to i váš případ, použijte tyto techniky k soustředění pozornosti návštěvníků na tu správnou výzvu k akci. Uvidíte, že i malá změna v designu může znamenat velký rozdíl.
Zdroj: marketingland.com, facebook.com, cpcstrategy.com
Autor: Vlastimil Malík
Foto zdroj: pixabay.com
