Tlačítka pro lepší konverzi

Tlačítka na webu výrazným způsobem ovlivňují konverzní poměr a tím i obchodní úspěšnost webu. Každá stránka webu by měla mít jasný účel a cíl a tlačítko by mělo vždy směřovat návštěvníky k tomuto cíli. Cílem může být např. odeslání kontaktního formuláře, žádost o kontakt, nezávazná poptávka, objednávka zboží či stažení demoverze produktu či např. katalogu výrobků. Může to být však také např. vytištění stránky, odeslání komentáře či přeposlání odkazu na stránku. Obrovskou výhodou webu je, že na něm můžete měřit každé kliknutí.

„Tlačítka pomáhají směřovat návštěvníky k cíli stránky či celého webu.“

Je samozřejmě možné, a často tomu tak je, či mělo by být, že web má hlavní cíl a jeden či více dalších, doplňkových cílů. Ty byste měli mít jasné, ještě než začnete navrhovat váš web. Až určíte, co je hlavním cílem webu a jaké jsou jeho doplňkové cíle, měli byste mu podřídit vše – obsah, vzhled a s tím související hypertextové odkazy i tlačítka.

Pravidla používání tlačítek na webu

Aby tlačítka byla skutečně efektivní, měla by dodržovat určitá pravidla:

  1. Každá stránka webu by měla vždy mít alespoň jedno tlačítko směřující k cíli stránky.
  2. Cílů může být několik, takže na stránce může být i několik tlačítek. Vždy by však měl být jeden hlavní cíl k tomu jeden či dva doplňkové cíle. Tlačítka by také měla být opticky odlišena prioritou cíle.
  3. Tlačítko hlavního cíle by mělo být opticky nejvýraznější (jasnější, kontrastnější barva, větší velikost). Tlačítka doplňkových cílů by v porovnání s tlačítkem hlavního cíle měla být opticky méně výrazná (méně výrazné a kontrastní barvy, menší velikost). Ukažme si příklady:

    Priorita tlačítek - 1. příklad
    Obr. 1: Rozlišení priority tlačítek – Nejvyšší prioritu má tlačítko Objednat, Upravit obsah košíku má nižší prioritu a Zpět do obchodu je formou prostého hypertextového odkazu, jež má v tomto případě nejnižší prioritu.

    Priorita tlačítek - 2. příklad
    Obr. 2: Rozlišení priority tlačítek – na tomto obrázku vidíte složitější dělení tlačítek podle jejich priorit.

  4. Tlačítka by měla být vždy grafická, ideálně s 3D efektem, aby bylo jasné, že to jsou tlačítka. Opticky pak působí jako tlačítka v reálném světě a uživatelé vědí, že na ně můžou kliknout.
  5. Tlačítko pro hlavní akci umísťujte vždy pokud možno nad přehyb stránky, aby bylo viditelné ihned po jejím načtení. Je to snadnější z hlediska uživatelů, kteří tak k němu nemusejí rolovat či posouvat stránku.
  6. Velmi vhodné je oživit tlačítka atypickým tvarem či přidání obrázku nebo ikony. O tom článek na webu GetElastic, který ukazuje možnosti využití různých tvarů tlačítek, stejně jako jejich grafického ztvárnění.
  7. Tlačítka musejí mít vždy jasný a srozumitelný textový popisek. Tlačítko pomocí něhož lze vložit zboží do košíku by mělo mít popisek Do košíku. Stejně jako tlačítka formuláře by měla být nadepsaná Odeslat formulář, Odeslat poptávku či Odeslat Objednávku.
    Stejně tak tlačítka během objednávkového procesu by měla být jasně pojmenovaná. Tlačítka mezi jednotlivými kroky by mohla být pojmenovaná Pokračovat, další krok či název další stránky (K pokladně, Vyplnit osobní údaje apod.). Finální tlačítko, jimž odešlete objednávku by mělo být pojmenováno Odeslat objednávku.

Shrnutí

  • Tlačítka musejí být zřetelně vidět ihned po načtení stránky.
  • Tlačítka musejí mít jasné popisky, aby uživatel věděl, co se stane po kliknutí.
  • Tlačítka musejí působit prostorovým dojmem - 3D efekt.

Další informace

Přečtěte si další zajímavé články:

 

1 komentář u Tlačítka pro lepší konverzi

  1. Petr Široký napsal:

    Ještě bych dodal, že je vhodné mít u každého tlačítka výrazný hover efekt a pojistit si kurzor myši (aby se objevila ručička, zvlášť v případě tlačítek dělaných přes input) css vlastností cursor: pointer.

    Ps. Ten předmět vážně není nutný.

Napsat komentář

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

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>