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

Ideální tlačítka jsou ta, kterými se návštěvníci webu nenechají rozptylovat, ale neustále na ně klikají. Dobré tlačítko by mělo vypadat přirozeně a organicky, aby jej uživatel nehodnotil na vědomé úrovni, ale automaticky následoval uvedenou výzvu k akci. Z tohoto článku se dozvíte, jaká by měla být ideální tlačítka na webu.

Dmitrij Dementij
Datum zveřejnění: 14. července 2014

Redakční rada Dmitry Dementiy Texterra

Kdy použít tlačítka místo odkazů

Téměř na každém zdroji najdete více odkazů než tlačítek. Tlačítka jsou obrázky, jejichž vytvoření vyžaduje určité úsilí. A odkaz lze vytvořit během vteřiny. Odkazy a tlačítka přitom řeší téměř stejné úkoly. Kdy je nutné použít tlačítka a kdy lze použít odkazy? Pokud stránka používá příliš mnoho tlačítek, bude se načítat pomalu. Kromě toho může být uživatel zmaten, když vidí více výzev k akci. Použijte proto tlačítka, když potřebujete povzbudit uživatele, aby provedl akci, která je pro vás důležitá: nákup, stažení, registrace atd. Ve všech ostatních případech postačí odkazy.

Jak odlišit důležitou akci od méně důležité? Zeptejte se sami sebe: „Ovlivní navrhovaná akce moji firmu nebo můj web?“ Důležité akce obvykle vyžadují aktivní úsilí ze strany uživatele. Musí se registrovat, komentovat, objednávat atp. Méně důležité akce nevyžadují aktivní úsilí. Uživatel se pohybuje ze stránky na stránku a konzumuje obsah.

Rozvineme vaši firemní identitu

Jak správně používat přechody

• Tlačítko, které je nahoře osvětlené a dole ztmavené, člověk vnímá jako vypouklé.
• Člověk vnímá tlačítko, které je dole osvětlené a nahoře ztmavené, jako vyduté nebo stlačené.

Uživatel by měl vidět zvednuté tlačítko, dokud jej nestiskne. Pokud uživatel stiskne tlačítko, měl by jej vidět jako konkávní. Tohoto efektu lze dosáhnout pomocí přechodů.

Jak udělat tlačítko přesvědčivým

Tlačítka téměř vždy obsahují výzvu k akci, ale ne vždy na ně uživatelé kliknou. Chcete-li zvýšit míru prokliku, musíte tlačítka přesvědčovat. Co to znamená z hlediska použitelnosti?

• Použijte přechody, stíny a zaoblené rohy, aby tlačítko vypadalo realisticky.

Čím realističtěji tlačítko vypadá, tím častěji na něj uživatelé klikají. Efektu 3D tlačítka můžete dosáhnout pomocí přechodů, stínů a zaoblených rohů. Člověk během dne automaticky mačká desítky tlačítek: zavolá výtah, zapne televizi nebo klimatizaci, přijme telefonní hovory atd. Čím autentičtěji tlačítko vypadá na webu, tím větší je šance, že na něj uživatel automaticky klikne.

Kontrastní barva přitahuje pozornost uživatele. Ideální barva je taková, při které si návštěvník tlačítka okamžitě všimne. Vezměte prosím na vědomí, že barva tlačítka by měla kontrastovat jak s pozadím webu, tak s barvou textu na samotném tlačítku.

• Udělejte tlačítko dostatečně velké, ale ne nepřirozeně velké.

U knoflíků na velikosti záleží. Čím větší tlačítko, tím snáze upoutá pozornost uživatele. Když tlačítko zvětšíte, nezapomeňte úměrně zvětšit velikost písma CTA. Nepřehánějte to s velikostí. Tlačítko by nemělo vizuálně pohlcovat obsah.

• Používejte slova, která vytvářejí naléhavost

Nyní, dnes, okamžitě, jedním kliknutím – tato a další slova vytvářejí efekt naléhavosti. Použijte je v textu tlačítka, abyste podpořili kliknutí.

Uživatelé mohou vaši nabídku odmítnout z různých důvodů. Například považují produkt za příliš drahý a nechápou jeho hodnotu a podstatu. V tomto případě vám pomůže soft call to action. Nabídněte uživatelům demo verze, bezplatné zkušební období, příležitosti dozvědět se více o produktu atd.

• Správně používejte velká a malá písmena

Pokud jsou vaše CTA dvě slova, použijte obě velká. Velká písmena dělají text motivovanějším. Pokud vaše výzva k akci obsahuje tři nebo více slov, pište první slovo velkým písmenem a zbytek malými písmeny. V tomto případě je text vnímán jako dialog. Vzorce vypadají takto: tvrdá CTA = jedno nebo dvě slova + každé slovo velké; měkké CTA = tři nebo více slov + pouze první je velké.

To lze provést pomocí ikon, šipek a dalších prvků. Dělají CTA přesvědčivější. Například šipka na tlačítku ukazuje uživateli, že po kliknutí na něj bude přesměrován na jinou stránku.

Vizuální změna tlačítka, když na něj najede kurzor, přesvědčí uživatele k akci. Co je potřeba změnit? Mohou to být přechody, změna barvy písma nebo změna vzhledu kurzoru. Například při najetí na tlačítko lze kurzor změnit z neutrální šipky na ruku v ukazovacím gestu.

Proč už nejsou OK tlačítka OK

Vývojáři rozhraní často používají tlačítka jako „OK“, „Zrušit“, „Ano“, „Ne“ atd. Pokud používáte počítač, tlačítka jako tato vidíte každý den.

Tato tlačítka nijak nesouvisí s akcí, kterou uživatel provádí. Chcete-li, aby vaše sdělení bylo jasnější a působivější, propojte svou výzvu k akci s požadovanou/zamýšlenou akcí uživatele.

Proč jsou tlačítka pro převod lépe umístěna v pravé dolní části stránky

Odpověď na tuto otázku lze nalézt studiem Gutenbergova diagramu.

Diagram ukazuje, že stránka je rozdělena na čtyři části. Šipky ukazují pohyb pohledu návštěvníka. Největší pozornost uživatelů získává levý horní a pravý dolní kvadrant stránky. Levému dolnímu kvadrantu je věnována nejmenší pozornost. Konverzní tlačítko je proto lepší umístit do pravé dolní části stránky.

Proč by mělo být požadované akční tlačítko v dialogových oknech vpravo?

V dialogových oknech fungují tlačítka požadovaných akcí („Koupit“, „Pokladna“, „Ano“, „OK“ atd., pokud jsou umístěna vpravo. Všimněte si prosím následujícího obrázku:

Pokud je požadované akční tlačítko vlevo, uživatel si jej všimne jako první. Nestiskne jej však, dokud neprozkoumá všechny dostupné možnosti. Návštěvník si všimne tlačítka požadované akce a poté obrátí svou pozornost na tlačítko alternativní akce. Aby zvolil možnost „Ano“, musí se jeho pozornost vrátit k tlačítku požadované akce.

Když je tlačítko požadované akce vpravo, cesta ke konverzi se zkrátí o jeden krok:

Když je požadované akční tlačítko vpravo, pozornost uživatele je nejprve upřena na sekundární možnost a poté na požadovanou možnost.

Když je požadované akční tlačítko vlevo, uživatel narazí na tři vizuální fixace na cestě ke konverzi. Když je požadované akční tlačítko vpravo, počet vizuálních fixací se sníží na dvě.

Jak vybrat požadované akční tlačítko

V dialogových oknech má smysl vizuálně zvýraznit tlačítko pro požadovanou akci. V tomto případě přitahuje a drží pozornost uživatele.

Chcete-li tlačítko převodu vizuálně zvýraznit, můžete použít následující metody:

Použití syté barvy pro tlačítko požadované akce a desaturované barvy pro tlačítko alternativní akce.

Proč by měly mít ikony průhledné pozadí?

Ikony zefektivňují používání rozhraní pro uživatele. Lidé vnímají vizuální vzory ikon desetitisíckrát rychleji než text. To platí, když jsou postavy zobrazeny na průhledném pozadí.

Když je pozadí ikon neprůhledné, rychlost vnímání informací uživatelem prudce klesá. Pozadí vytváří vizuální šum, díky kterému všechny ikony vypadají stejně. Místo okamžitého skenování vizuálních informací musí uživatel číst a interpretovat obrázky, což je typické pro práci s textem.

Použití neprůhledného pozadí pro ikony lze přirovnat k textu napsanému velkými písmeny: ztěžuje skenování vizuálních vzorů a zpomaluje rychlost vnímání.

Jak používat šipky a elipsy

Šipky na tlačítkách směřují uživatele k dokončení akce po přechodu. Například kliknutím na tlačítko může návštěvník zadat objednávku, vybrat produkt nebo se přihlásit k odběru newsletteru.

Šipky v nabídce označují dostupnost dalších možností.

Elipsy na tlačítkách a v nabídkách označují dostupnost dalších možností a nedokončení akce.

Šipky a elipsy činí tlačítka a nabídky intuitivní.

Tlačítka by měla být viditelná a působivá.

Aby toho dosáhli, musí návrháři zvolit správné umístění tlačítek, použít přechody a syté barvy, použít efekty přechodu, kontrasty a správné výzvy k akci. Efektivitu tlačítek zvyšuje použití šipek, elips a dalších vizuálních prvků. Tlačítka by měla být dostatečně velká, ale neměla by vizuálně zahlcovat okolní text.

Adaptace materiálů z webu UX Movement.

• Jak zlepšit web pomocí SEO a použitelnosti: 4 minipřípadové studie
• Jak zvýšit míru konverze: Plán krok za krokem
• 10 zajímavých řešení pro zvýšení konverze na komerčních webech