Homepage je výloha vašeho webu. První dojem rozhoduje během milisekund – buď návštěvníka zaujmete, nebo ho navždy ztratíte.
Homepage je nejdůležitější stránkou každého webu. První dojem si děláme už během 50 milisekund, to je 0,05 sekundy. Počáteční úsudek nejvíce ovlivňuje vizuál. Nepíšu to rád, ale je to tak.
Cílem efektivního designu je mimo krásy taky funkčnost, která má přímý dopad na chování zákazníků. Pokud je správná, vede ke zvýšení prodejů.
Homepage musí sloužit jako navigační kotva (safe harbor) a rychle sdělit, kdo jste, co děláte a proč by si vás zákazník měl vybrat.
Ukážu vám ověřené UX postupy a principy vizuální hierarchie, které vám pomohou snížit míru opuštění homepage.
Udělejte dobrý první dojem
Vizuální hierarchie představuje základní princip dobrého designu domovské stránky. Jednoduše řečeno, jde o uspořádání prvků na stránce tak, aby se zvýraznilo jejich pořadí důležitosti – nejdůležitější informace jsou na prvním místě, ty méně kritické až nakonec.
Dobře udělaná vizuální hierarchie vede záměrně pozornost návštěvníků ke klíčovým prvkům. K těm patří samozřejmě výzva k akci (call-to-action, CTA). Jak má vypadat dobré tlačítko jsem psal.
Já říkám klientům na meetingu jedno: funkční homepage musí splňovat dvě základní věci:
a) udělat dobrý první dojem,
b) dostat uživatele co nejrychleji na další stránku – ideálně tu, kterou chcete.
Toho lze dosáhnout kombinací několika faktorů. Na ty se podíváme dole.
Čtyři faktory
Důležité dejte nad ohyb
Prvky umístěné co nejvýše (nad ohybem) získávají nejvíce pozornosti, protože návštěvníci tráví až 80 % svého času prohlížením obsahu v této viditelné části stránky. Vidím to denně v Clarity a Hotjaru.
Kritický obsah a výzvy k akci by měly být umístěny v této horní části. Ten rozhoduje, jestli uživatel udělá akci nebo ne.
Tlačítko musí být vidět
Velikost prvků pomáhá nastavit hierarchii a zdůraznit nejdůležitější části. Jestli chcete aby něco upoutalo pozornost, musí to být vidět.
Aby se maximalizovala pravděpodobnost kliknutí, CTA tlačítka by měla být ideálně velká a nápadná. Výrazná barva táhne oči, a velikost zvyšuje proklikovost (CTR). Není v tom věda: lidem zkrátka trvá méně času kliknout na větší cíle.
Držte se konvencí
Vizuály, jako je video, obrázky a ikony slouží k vedení pozornosti návštěvníků. Pohybující se objekty, jako je video, přitahují pozornost nejvíc.
Kvalitní obrázky a krátká videa komunikují sdělení rychleji než pouhý text. Obrázky lidí (hlavně tváře) mají jedinečnou sílu přitahovat pozornost a přímo korelují s konverzí.
Jak víme, při nákupu je zásadní důvěra a emoce. Žádná racionalita.
Doporučuji používat prototypické vizuály. Pro vyhledávání to je lupa, pro košík klasická ikona košíku. Nevymýšlejte nic nového, lidi budou zmatení. Zažité standardy pomáhají k okamžitému rozpoznání.
Dole je příklad z Heureky, ta to má hezky. Vlevo velké vyhledávací pole ošetřené ikonou lupy a tlačítkem Hledat. V pravém rohu je košík. Každý ví, co tyto prvky znamenají.
Kontrast (barva a bílé místo)
Kontrastem, barvou, bílým místem, velikostí písma určujeme prominentnost prvků a pomáháme uživatelům rychleji detekovat hlavní informace. Vlastně tím definujeme důležitost.
Tlačítka s výzvou k akci (CTA) by měla kontrastovat s pozadím. Doporučuji zvolit akční barvu pro všechna klikatelná místa, která se liší od pasivních barev značky. Hlavní tlačítko musí být vidět hned, nesmí zapadnout.
Nezapomínejte ani na bílé místo, prostor kolem jednotlivých prvků. Tento prostor není zbytečný, protože pomáhá ostatním důležitým prvkům vyniknout.
Hlavně snižuje kognitivní zátěž a zajišťuje, že se CTA tlačítko neztratí mezi balastem.
Dobrá homepage je nutnost
Homepage je navigační kotva – místo, kam se uživatelé vždy vrací, když se na webu ztratí. Proto na ní nesmí chybět jasná orientace a sdělení: kdo jste, co děláte a proč by si vás měl zákazník vybrat právě teď.
Pro většinu webů je homepage zároveň nejnavštěvovanější stránkou vůbec. Analýzy ukazují, že u e-shopů tvoří vstupy na homepage klidně 30–50 % všech návštěv.
I když návštěvy přijdou přes Google nebo reklamu na konkrétní produkt, často si ještě kliknou na domovskou stránku, aby si “ověřili značku”. Je to taková digitální vizitka, která rozhoduje, jestli u vás zůstanou, nebo odejdou jinam.
Myslete na to, že homepage je často i fallback bod – když uživatel neví kudy kam, klikne na logo vlevo nahoře a vrátí se na začátek. To je moment, kdy očekává pořádek a jasnou strukturu. Pokud ji nenajde, nákup nedokončí.
Navigace a vyhledávání
Až 94 % návštěvníků označilo snadnou navigaci za nejdůležitější funkci webu. Je to logické. Když se na stránce ztratíte, nekliknete na další produkt – prostě odejdete.
Navigace
Na desktopu funguje nejlépe mega menu. Umožňuje zobrazit celé kategorie a podkategorie přehledně na jedné ploše.
Oproti klasickým rozbalovacím menu eliminuje klikání do neznáma a dává uživateli jistotu, že vidí celý sortiment.
Na mobilu dominuje buď hamburger menu, které se stalo všeobecně známou ikonou, nebo spodní navigační lišta (tab bar). Tu používají například sociální sítě – a není náhoda proč.
Je blízko palci a usnadňuje pohyb po webu bez zbytečného posouvání prstů přes obrazovku.
Dole je příklad mega menu na Alze.
Vyhledávání
Vyhledávací pole je kritický prvek každé homepage. Zákazníci, kteří použijí vyhledávání, mají 3× vyšší pravděpodobnost, že dokončí nákup. Přesto je search na e-shopech často podceněný.
Doporučení je jednoduché: umístěte vyhledávání vždy nahoru a nešetřete na jeho funkčnosti. Automatické našeptávání, oprava překlepů a filtrování výsledků jsou dnes standard.
Pokud search nefunguje správně, uživatel získá pocit, že ani vy sami nevíte, co prodáváte.
V poslední době mám dobré zkušenosti s tímto řešením: Luigi’s Box.
Obsah a hodnotová nabídka
Podle Baymard Institute uživatelé stráví průměrně 10 sekund vyhodnocováním, zda web splní jejich očekávání.
Pokud v té době neuvidí jasné sdělení, odejdou. Proto musí být tato informace viditelná nad ohybem (foldem). Jedna věta, která shrne vaši podstatu – bez marketingového balastu.
Ukažte sortiment
Návštěvník potřebuje hned pochopit, co nabízíte. Proto se doporučuje ukázat široký průřez sortimentem – typicky bestsellery, novinky a tematické kolekce. Je optimální, když homepage pokryje vizuálně alespoň 40 % produktových typů, které e-shop nabízí.
Nezapomeňte na benefity a garance
Když zákazník váhá, rozhodují maličkosti: rychlé doručení, jednoduché vrácení, doprava zdarma. Tyto benefity musí být na homepage jasně viditelné, ideálně v horní liště nebo hned pod hlavním bannerem.
Data ukazují, že 91 % zákazníků je ochotno znovu nakoupit, pokud obchod nabízí dopravu zdarma. Neplatí to ale vždy a všude. Pokud máte nějaký echt benefit, který konkurence, nemá, bude lepší než doprava zdarma.
Emoce a důvěra
Lidé nekupují jen produkty, ale i příběh značky. Recenze, loga známých klientů nebo fotografie zákazníků pomáhají budovat důvěru.
Sociální důkazy jsou jedním z nejsilnějších spouštěčů rozhodování – až 70 % lidí důvěřuje recenzi od neznámého člověka stejně jako doporučení od svého známého.
Tuto problematiku ještě více rozeberu. Zaslouží si to.
Důvěra a sociální důkaz
Bez důvěry není nákup. A homepage je místo, kde musíte zákazníka přesvědčit, že jste solidní partner, kterému může svěřit peníze.
První krok je ukázat, že váš web je bezpečný. SSL certifikát, známé platební metody (Visa, Mastercard, PayPal, Apple Pay) nebo odznaky typu “Ověřeno zákazníky Heureka” jsou okamžitým signálem důvěry. Podle Baymard Institute je nedůvěra v bezpečnost platby jeden z nejčastějších důvodů, proč lidé opouštějí košík. A já to potvrzuji.
Také recenze fungují jako digitální doporučení. Jak jsem psal výše, až 70 % lidí věří online recenzi od cizího člověka stejně jako osobnímu doporučení od kamaráda. Zobrazte proto hodnocení přímo na homepage – ať už jde o hvězdičky u produktů, nebo krátké citace zákazníků.
Ještě silnější než textové recenze jsou fotky a videa přímo od zákazníků. Studie ukazují, že uživatelské fotografie produktů mohou zvýšit konverzi až o 29 %. Fotka reálného člověka s vaším produktem působí autentičtěji než sebelepší produktová vizualizace.
Klientům vždycky říkám, “Když vidím, že to má Mařenka, asi to bude dobré a já to chci taky”. Takto přemýšlíme od pravěku – a ještě nějakou dobu přemýšlet budeme.
Recenze jsou důležité stejně jako transparentnost. To je spíš úplný základ. Pokud je návštěvník na webu poprvé, potřebuje vědět, že za obchodem stojí skuteční lidé. Telefonní číslo, e-mail, fyzická adresa nebo chat snižují obavy a budují pocit bezpečí.
Uživatelské testy ukazují, že chybějící kontaktní údaje vyvolávají pochybnosti o důvěryhodnosti obchodu.
Chyby, kterým se vyhnout
I když víte, co má homepage obsahovat, snadno se dá sklouznout k řešením, které uživatelům spíše škodí. Tady jsou ty nejčastější, na které narážím denně.
Karusely a slidery
Rotující bannery na homepage působí dynamicky a někomu se prostě líbí. Ale data mluví jasně: statické obrázky získaly 40,53 % kliknutí, zatímco karusely jen 2,06 %. Také zpomalují web a odvádějí pozornost od důležitých prvků.
Pokud už slider použijete, měl by být manuálně ovladatelný a s jasným CTA.
Pokud mi ale dovolíte, já vám používání karuselů zakazuju. Garantuji vám, že na ně nikdo nekliká. Pokud mi nevěříte, nasaďte si na bannery UTM a další měsíc se podívejte do Google Analytics.
Najít e-shop s karuselem mi zabralo asi 15 sekund. Je to stále velký evergreen, i když nefunguje. E-shopové platformy je nabízí, tak je všichni využívají. Bez přemýšlení. Je to přeplácané, nahuštěné, k ničemu. Na mobilu je to úplná tragédie. Nepřečtete vůbec nic. A to se vsadím, že má tento e-shop drtivou většinu návštěv z mobilů. Jako ostatní.
Agresivní pop-upy a overlaye
Vyskakovací okna (pop-upy), která přerušují prohlížení, uživatelé vnímají jako spam. 59 % návštěvníků uvádí, že příliš agresivní reklama je důvodem, proč stránku opustili.
Google navíc varuje před tzv. “intrusive interstitials”, protože zhoršují uživatelský zážitek a mohou poškodit SEO. Na tohle téma jsem psal v rámci přístupnosti.
Nadbytečný design
Více prvků ≠ lepší web. Přehnaně složitý design zvyšuje kognitivní zátěž a snižuje přehlednost. Výzkum NNGroup ukázal, že weby s vysokou vizuální komplexností jsou hodnoceny jako méně atraktivní a lidé je rychleji opouštějí.
Dobrý design je ten, když už není co ubrat.
Moc informací najednou
Nesnažte se na homepage odkomunikovat všechno. Potřebujete uživatele navnadit, ne ho zahltit. Benefity napište, informace o vás vypíchněte, produkty ukažte, ale nepište jak jste nejlepší, co máte za sebou a co před sebou. Budete se divit, ale nikoho to nezajímá.
Skrytá navigace
Skrývání menu (např. jen za hamburger na desktopu) zhoršuje objevování obsahu. Testy ukázaly, že viditelná navigace má o 27 % vyšší zapojení než ta skrytá. Navigace musí být jasná, snadno dostupná a konzistentní napříč zařízeními.
Uživatelům musíte neustále ukazovat, co mají dělat. Jinak to dělat spíš nebudou.
Příklady dobrých homepage
- Amazon – jasná hierarchie a vyhledávání
Amazon ví, že uživatelé chtějí najít produkt co nejrychleji. Má výhodu, že značku všichni znají. Proto je search box dominantní prvek uprostřed stránky. Mega menu v záhlaví je přehledné a umožňuje okamžitě skočit do kterékoliv kategorie. Sociální důkaz (hodnocení, recenze) je přítomen v kategoriích a detailu produktů.
- Dropbox – bílý prostor a kontrast
Dropbox dlouhodobě sází na jednoduchost. Hodně místa, výrazné CTA a ilustrace, které komunikují, co produkt dělá. Jejich homepage je ukázkou, že méně je více – a že kontrast (modrá CTA tlačítka na světlém pozadí) opravdu funguje.
- Slack – kombinace benefitu a sociálního důkazu
Slack jasně říká, co dělá. Hned vedle velkého CTA najdete loga známých firem (OpenAi, Paramount, IBM). To je ukázkový příklad spojení value proposition (hodnotové nabídky) + sociálního důkazu.
Slovo závěrem
Homepage je jako výloha vašeho obchodu. Je to první místo, které zákazník uvidí, a často také to poslední, než se rozhodne, jestli u vás nakoupí.
První dojem rozhoduje – během pár desítek milisekund. Pokud se vám podaří zaujmout, máte šanci proměnit zvědavého návštěvníka v platícího zákazníka.
V článku jsem vám ukázal, že klíč k úspěšné homepage není jen v hezkém designu (i když ten je taky důležitý). Jde o srozumitelné hodnotové nabídky, intuitivní navigace, silné vizuály, rychlost a prvky důvěry. Pokud chcete zjistit, jak na tom vaše homepage reálně je, SEO audit odhalí jak technické problémy, tak chyby v obsahu. A nezapomeňte na kvalitní konverzní poměr – ten se odvíjí od všeho výše zmíněného.
Stejně důležité je vyhnout se častým chybám – od sliderů přes agresivní pop-upy až po přehnaně složitý design.
Podívejte se na svou vlastní domovskou stránku a zkuste si odpovědět jestli splňuje tyto principy.
zdroje a literatura:
vlastní zkušenosti při CX a UX testech
Psychology of UX Design: Psychological laws and effects od Aloka Kumara
https://baymard.com/blog/ecommerce-homepage-ux
https://www.nngroup.com/articles/ecommerce-homepages-listing-pages/
https://ecomm.design/ecommerce-homepage-best-practices/
https://onilab.com/blog/ecommerce-homepage-ux
https://www.outerboxdesign.com/articles/cro/best-practices-ecommerce-homepage-ux/
https://www.reconvert.io/blog/ecommerce-homepage-best-practices
https://dinarys.com/blog/10-best-practices-successful-ecommerce-homepage
https://www.orbitmedia.com/blog/web-design-tips/
https://www.networksolutions.com/blog/homepage-design/
https://arxiv.org/abs/1903.11997
https://erikrunyon.com/2013/01/carousel-interaction-stats/