Homepage – umění přesvědčit a prodat hned v první sekci webu

Jak navrhnout úvodní sekci hlavní stránky webu? Jaké prvky by měla první část stránky obsahovat?

Lidé občas zápolí s tím, jak poskládat prvky do hlavičkové sekce hlavní nebo přistávací stránky webu. Co do sekce dát a proč? Jaké informace ukázat návštěvníkovi ještě před zlomem stránky (skrolováním)? Ukažme si základní prvky, které se napříč úspěšnými weby opakují a fungují.

Mějte na paměti, že ne všechny zmíněné prvky se musí v první sekci stránky objevit. Nemusí. Nesnažte se vytvořit „dokonalou“ sekci, která obsahuje vše. Řiďte se tím, jaký zákazník na stránku přichází, v jaké je nákupní fázi (je „ohřátý“ nebo „nový“?) a co a jakým způsobem mu chcete sdělit.

Zmíněné prvky berte jako pouze jako výchozí tipy, ne jako dogma. Máte jiné požadavky? Udělejte to po svém podle nejlepší úvahy.

Co tedy umístit do první sekce hlavní stránky, abychom zákazníka motivovali ke koupi?

Hlavní nadpis

Hlavní nadpis nebo výrazný odstavec textu je to, co uživatel na webu uvidí jako první. Dejte si na něm záležet a testujte různé verze.

Janě a stručně sdělení. Hned víte, o čem a pro koho web je.

Jasně a stručně sdělte, o čem web je nebo co nabízíte. To nejdůležitější napište jako první. Nečekejte a nedoufejte, že si uživatel projde celou stránku. Udělejte si 5vteřinový test a zjistěte, jestli návštěvník účel webu pochopí na první dobrou.
Vzbuďte zájem a zvědavost. Přinuťte návštěvníka webu číst dál. Zaměřte se na jeho emoce a vytvořte mu v hlavě otazník.
Poznejte, pro koho píšete. Koho chcete zaujmout? Účetního nebo ředitele společnosti? Miřte na ideálního zákazníka. Nebuďte příliš obecní. Zkuste konkrétně brnknout na strunu a motivovat číst dál.
Odhalte touhy nebo bolesti, které zákazník řeší a nabídněte řešení problému. Jaké výhody produkt přináší?
Použijte akční slovesa, které vtáhnou čtenáře do dění a přinutí k akci.
Buďte extra konkrétní. Každé prázdné nic neříkající slovo nahraďte konkrétním výrazem nebo číslem („Jak ušetřit peníze“ vs. „5 způsobů jak snížit o 20 % měsíční výdaje“).
Zapomeňte na slovní hříčky. Nesnažte se být příliš kreativní. Jednoduché věci fungují dobře. Pište jako pro prvňáka nebo vaši babičku.
Osekejte počet písmen. Prázdná slova vypusťte. Poskládejte větu tak, aby byla nejvýstižnější při minimálním množství slov. Tu nejdůležitější myšlenku nebo klíčové slovo zkuste dostat na začátek celé fráze.
Vizuálně zvýrazněte hlavní prodejní argument, benefit nebo jinou důležitou frázi či klíčové slovo. Použijte různá podtržení, podbarvení, kroužkování slov, apod.

Denně používám pro klientské práce vlastní rostoucí knihovnu dekoračních prvků. Dávám je do webů, aplikací i digitálních materiálů. Šetřím čas. Jsou upravitelné a dají se používat stále dokola. Snadno tak během 5 sekund oživím a zvýrazním klíčové informace.

Ukázka z knihovny prvků. Podtržení, kroužky, šipky a další prvky pro zvýraznění informací.

Podnadpis nebo doplňující text

Není podmínkou jej vždy použít. Stačí pro zaujmutí a sdělení účelu webu nadpis? Super. Získáte čisté rozložení sekce. Za každou cenu další text nepište. Pokud jste přesvědčeni, že vám nadpis pro sdělení myšlenek nestačí, přidejte pro hlubší vysvětlení i dodatkový odstavce textu. Jak by takový dodatkový text mohl vypadat?

Podnadpis doplňuje hlavní nadpis. Krátký odstavec nebo odrážkový seznam skvěle poslouží.

Zapomeňte na román nebo dlouhé odstavce. Platí stejná pravidla jako u nadpisu. Buďte jasní a struční. 1 až 3 řádky textu jsou víc než dost. Méně je více.
Neopakujte slova, fráze nebo myšlenky z nadpisu. Šetřete slova a místo. Navažte na nadpis a rozviňte ho.
Místo odstavce textu zvažte i odrážkový seznam. Odrážky se lépe skenují očima a čtou. Místo odrážek použijte klidně ikony nebo fajky.

Odrážkový seznam – fajky vizuálně zaujmou a evokují „potvrzení“.

Výzva k akci

Každá stránka webu by měla ideálně obsahovat jednu hlavní akci, kterou představuje hlavní tlačítko nebo odkaz. Umístěte ho i do první sekce stránky. Noví zákazníci tlačítko nebo odkaz pravděpodobně nevyužijí a nejprve prozkoumají celou stránku. Poslouží ale už „ohřátému“ potenciálnímu zákazníkovi, který se na web vrací.

Použijte co nejméně tlačítek. Jedno je lepší než dvě.
V textaci tlačítka/odkazu buďte konkrétní. Vyhněte se obecným frázím. Jasně popište, co se stane, jakmile na tlačítko kliknete. Zmínit můžete i benefit nebo argument, který „prodáváte“.
Použijte akční slovesa.

Vyvrácení obav

Lidé mají rádi jistotu. Odbourejte obavu z kliku na tlačítko. Motivujte kliknout. I když se to ve vašich očích zda „stupidní“ a jasné jako facka, výslovně napište, co se po kliku na tlačítko (ne)stane (např. „Bez registrace“), čeho se zákazník nemusí bát („Vyzkoušejte bez zadání platební karty“) nebo co naopak získá („Objednejte s dopravou zdarma“).

Doplňující text vnořte do tlačítka nebo jej umístěte nad, pod či vedle.
Vizuální tip: Text graficky „připojte“ k tlačítku šipkou nebo na něj ukažte jiným prvkem. Vraťte pozornost k akci.
Do textu zahrňte sociální důkaz, nabídněte garanci nebo použijte čísla, data apod. (např. „Využívá 1200+ uživatelů.“ tj. Stádový efekt).

Vizuálně vraťte pozornost zpátky na akční tlačítko.

Důkaz místo slibů

V první sekci webu si vyhraďte i malý prostor pro rychlý sociální důkaz. Krátké bodové shrnutí a důkaz toho, proč je nabízený produkt dobrý. Proč by měl uživatel dát produktu šanci a číst dál? Jste limitování místem, proto vyberte 1–3 nejsilnější důkazy.

Vypíchněte pár značek (loga), které váš produkt využívá.
Použijte čísla. Napište, kolik zákazníků váš produkt využívá, jak jste velcí nebo kolik let působíte na trhu. Čím je číslo konkrétnější, tím je důvěryhodnější. Tip: Použijte vizuální hodnocení v podobě hvězdiček. Vizuálně zaujmou a evokují to, že produkt pravděpodobně někdo vyzkoušel.
Výslovně sdělte, komu jste naposledy pomohli a odkažte třeba na případovou studii. Jedna konkrétní reference vydá za desítky obecných.

Vizuál

Lidské oko snadněji zpracuje obrázky než text. Cílem vizuálního prvku je zaujmout a zastavit návštěvníka webu a motivovat číst dál. Ačkoliv většina webů má v první sekci vizuál, není to podmínkou. Zastávám názor, že by měl vizuál přinést uživateli hodnotu navíc. Pokud je to „prázdný“ a nic neříkající obrázek, je kolikrát lepší vůbec ho nepoužít a energii věnovat do perfektního textového sdělení. Nesnažte se tvořit vizuál na sílu. Raději vezměte nadpis a odstavec textu a zarovnejte je na střed. Web bez vizuálu není ostuda.

Použijte fotografie, které ukazují produkt v praxi. Ve fotografiích dobře fungují lidské obličeje, které přirozeně přitahují pozornost.
Vytvořte ilustrace, které podpoří myšlenku. Snažte se je maximálně zjednodušit a zabstraktnit. Složitá umělecká díla patří spíše do galerie.
Vytvořte animovaný vizuál, která dokáže lépe zachytit proces používání produktu. Pozor na technické zpracování. Formát .gif ztrácí kvalitu, video pro změnu nabírá na datové velikosti a brzdí web.
Použijte do pozadí sekce krátce sestříhané video, které navodí atmosféru produktu. Pokud však chcete ukázat jen záběr na oblohu při východu slunce, raději na video zapomeňte. Umisťujete-li text nad snímek videa, ujistěte se, že je vždy čitelný (záběry videa se mění).
Místo vizuálu použijte interaktivní prvek – např. kalkulačka, konfigurátor nebo jiná ukázka produktu, která umožní uživateli rovnou přejít k akci nebo vyzkoušet produkt.

Funkční věci jsou lepší. Využijte prostor efektivně. Použijte kalkulačku, konfigurátor nebo jiný interaktivní prvek, který přinese hodnotu.

Rozložení prvků

Je určitý zvyk, jak jsou prvky v první sekci stránky rozloženy. Většinou se půlí na dvě části. Na jedné straně je textový obsah a další prvky, na druhé bývá vizuál. Ale není to povinnost. Prvky na stránce poskládejte dle vaši chuti a účelu.

Co je důležité, je informační hierarchie. Uživatel, který na web přijde, by si měl prvky projít v určité logické souvislosti. Jak toho dosáhnete? Každému prvku musíte přiřadit vizuální váhu a upozornit na něj. Chcete aby si uživatel nadpis přečetl jako první? Musí být výrazný, musí „křičet“.

Výrazný neznamená velký. Výraznost se dá zařídit více způsoby. Použijte vlastnosti, jako jsou velikost, tučnost, barva nebo třeba množství prázdného místa okolo prvku, které na prvek upozorní.

Rozložení „obsah vlevo, vizuál vpravo“ vs. „středové rozložení s vizuálem na pozadí.“

Animace a interakce

Nejspíš jste se setkali s tím, že jste přišli na web a ten se začal celý animovat a skládat jako zběsilý. Tato „kreativní“ řešení nemají na prodejním webu své místo a nedoporučuji je používat, protože mají hodně úskalí.

Vy chcete, aby se obsah webu zobrazil do 5 sekund. Uživatel nechce čekat, než mu předvedete animující se web. Zákazník jde po informacích.

Využijte animace pouze v případě, že s jistotou více, proč a jak se má daný prvek animovat. Animací dokážete efektivně přesouvat pozornost z jednoho prvku na druhý. Ale upřímně toto je obor sám o sobě (animace/motion). Pokud nemáte s animacemi zkušenosti, raději je nepoužívejte tzn. jen proto, že to vypadá cool a má je i konkurence.

Další argumentem, proč se animacím vyhnout, je technické řešení. Udělat plynulou animaci na webu tak, aby se nesekala a byla přístupná pro všechny, je oříšek. Existují různá zařízení s různým výkonem, každý internetový prohlížeč se chová jinak apod. Málokdy docílíte toho, že animace uvidí všichni stejně a perfektně.

Rychlost načtení stránky webu

5 sekund a hotovo. Snažte se, aby stránka byla rychlá a uživatelsky přívětivá. Pomohou vám metriky Web Vitals. Nahrajte například komprimované obrázky, nespouštějte moc skriptů, odložte načtení prvků pod zlomem apod. Pro kontrolu a doporučení využijte např. PageSpeed Insights nebo pokročilejší český nástroj PageSpeed.cz.

Shrnutí

Ať už použijete jakékoliv prvky, vždy dbejte na to, aby byly maximálně stručné, jednoduché a pochopitelné. Nesmí vznikat otazníky. Každý následující prvek doplňuje myšlenku předchozího. Zbavte se duplicitních informací. Šetřete slovy i místem. Jen tak dokážete dostat na malý prostor maximální množství informací, které podpoří zájem zákazníka o produkt.