Jak vytvořit správně tlačítka na webu?

Možná si říkáte, že vytváření tlačítek je přece naprosto jednoduchá věc. Ti z vás, co mají MioWeb nebo jinou šablonu na podobné bázi, to mají dost jednoduché. Přidají tlačítko, nastaví barvu, odkaz a je to. Podobné je to i u programování, vytvoříte obdélník, dovnitř vnoříte text a máte hotovo. Jenže nejde o to, jak se tlačítka vytváří, ale jak je vytvořit, aby byla správně použita.

Některá tlačítka nám totiž odkazují na důležité věci a jiná na méně důležité věci a právě toto je potřeba odlišit pomocí designu tlačítek. Pojďme si tedy vysvětlit, jak tlačítka přizpůsobit tak, aby každé plnilo účel, pro který je vytvořeno.

Primární tlačítka – Call to action CTA

Call to action (dále CTA) tlačítka jsou tlačítka, která vyzývají návštěvníky k akci. Mohou to být například tlačítka určená k zakoupení produktu („Chci koupit“) nebo tlačítka pro registraci do aplikace („Registrovat se“) Tyto tlačítka jsou stěžejní, protože cílem celého webu je to, aby právě na tyto tlačítka návštěvník klik.

Sekundární tlačítka

Sekundární tlačítka naproti tomu nemají tak důležitý cíl. Většinou nesou odkazy na více informací, odkazy na reference a tak dále. Jednoduše návštěvníky pouze přesouvají po webu, ale neplní hlavní roli.

Barvy tlačítek

Když jsme si vysvětlili oba druhy tlačítek, je potřeba jim zvolit vhodný design. Logicky potřebujete lákat především na CTA tlačítka. Těmto tlačítkům tedy dáte velký důraz na viditelnost a zvolíte ze dvou možností při výběru barvy:

  • Barva webu – Tuto možnost použijete, pokud máte za barvu webu takovou barvu, kterou nepoužíváte příliš často a tlačítko tak dokáže na webu vyniknout.
  • Kontrastní barva – Naopak, pokud víte, že vaše barva je například červená a web s ní pracuje ve velké míře (ikony, boxy, čísla a další), je lepší zvolit kontrastní barvu pro CTA tlačítka. V praxi to vypadá tak, že pokud je barva webu oranžová, zvolíme pro hlavní tlačítko zelenou, jelikož s touto barvou zbytek webu nepracuje a bude tudíž dostatečně vidět. Stejně tak to máme i na našem webu v menu https://klucivpraxi.cz/ .

Sekundární tlačítka volte přesně naopak. Pokud je vaší barvou webu třeba modrá a na webu jí často používáte, i sekundární tlačítka mohou být modrá. V praxi to znamená, že sekundární tlačítka klidně mohou splynout lehce s ostatní grafikou. Samozřejmě ne úplně, ale nepotřebují být extrémně viditelná jako CTA tlačítka.

Na obrázku vidíte, jak tyto dva typy tlačítek mohou fungovat v praxi. Realitnímu týmu připravujeme webové stránky, které v převážné většině pracují s bílou barvou a odstíny šedi. Jelikož v jejich logu se nachází červená, barvou webu je tedy tato barva. Jelikož s červenou ve zbytku webu nepracujeme, bylo jasné, že pro CTA tlačítka použijeme právě červenou.

Jak vidíte, tlačítka jsou jasně vidět, nijak nezanikají a návštěvník si jich ihned všimne. CTA tlačítka jsme zvolili pro tři hlavní služby týmu. Jelikož ale náš klient nemá jen tyto služby, je potřeba dát vědět návštěvníkům, že tím jejich nabídka nekončí a mohou se podívat na další služby. Ty už pro ně však nejsou tak primární a proto tlačítko na ně už je bráno jako sekundární. Cílem stránky je totiž to, aby klikli na první tři zobrazené služby.

Myslete jako váš klient

V popisu výše jasně vidíte, že nestačí jen zvolit barvy, ale je potřeba si dobře rozmyslet, co s tlačítky zamýšlíte. V žijte se do role vašeho klienta a zkuste si představit, zda by ho CTA tlačítko dostatečně nalákalo nebo zda by ho bez povšimnutí přešel. CTA tlačítkem zachycujete pozornost klienta a vyvoláváte v něm pocit toho, že „musí jít do akce“.

Princip tlačítek

Na závěr jsem pro vás připravil princip použití těchto tlačítek.

  • Vlevo se nachází část, která nerozlišuje tlačítka CTA a ani sekundární tlačítka. Zkuste najít správné CTA tlačítko.
  • Vpravo je část, která pracuje s CTA tlačítkem. Čeho jste si všimli jako první?

 

Jak vytvořit správně tlačítka na webu?
5 (100%) 3 Hodnocení
Honza Tipmann
Grafik, webař a UX designér. Grafika mě jednoduše baví a pokud jí smícháme ještě s psychologií, jsem ve svém živlu :)
Komentáře

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře.