Homepage UX: první dojem, který prodává
Homepage nemusí prodat konkrétní produkt. Musí ale během pár vteřin říct, co prodáváte, proč u vás a kudy dál. Ukážeme, co na ní funguje a co jen zabírá místo.
Homepage je vstupní hala e-shopu. Zákazník přes ni nemusí projít vždy, protože z vyhledávání a reklam často přistane rovnou na kategorii nebo produktu. Když ale přijde přes homepage, rozhoduje se rychle. Během pár vteřin si odpoví, jestli je na správném místě, jestli tu mají, co hledá, a kudy dál.
Baymard Institute uvádí v benchmarku Homepage & Category Navigation z roku 2025, že 58 % předních amerických a evropských e-shopů má tuto oblast na desktopu v „průměrném" nebo horším stavu. Na mobilu je to 67 %. Homepage přitom nejčastěji nekazí chybějící funkce, ale snaha na ni dát všechno.
Co má homepage udělat
Nielsen Norman Group dlouhodobě shrnuje úkol homepage jednoduše: říct, co je web zač a co na něm návštěvník může udělat, a pak ho poslat dál. U e-shopu to znamená čtyři věci:
- Sdělit, co prodáváte. Ne slogan, ale srozumitelnou nabídku. „Outdoorové vybavení pro turistiku a lezení" řekne víc než „Vaše dobrodružství začíná tady".
- Ukázat šíři sortimentu. Aby zákazník nepředpokládal, že věc, kterou hledá, nemáte.
- Dát důvod nakoupit u vás. Doprava, vrácení, hodnocení, osobní odběr, specializace.
- Nabídnout rychlé cesty dál. Navigace, vyhledávání, hlavní kategorie.
Všechno, co k těmto čtyřem úkolům nepřispívá, je kandidát na odstranění nebo přesun níž.
Šíře sortimentu: zákazník soudí podle toho, co vidí
Baymard v testech zjistil, že noví návštěvníci odhadují, jaký typ obchodu to je a jak široký má sortiment, hlavně podle hlavní navigace a obsahu homepage. Kdo na homepage nevidí svůj typ produktu, často usoudí, že ho e-shop nemá, a odejde. Podle jejich benchmarku 22 % e-shopů ukazuje na homepage nedostatečný rozsah sortimentu. Z testování Baymard vychází doporučení ukázat na homepage alespoň 40 % typů produktů.
Prakticky to znamená:
- Dlaždice hlavních kategorií s fotkou a názvem, ne jen tři akční bannery.
- Pestrost v ukázkách produktů. Když všechny „novinky" patří do jedné kategorie, e-shop působí úžeji, než je.
- Kategorie v navigaci viditelné i na mobilu. Schovat všechno do hamburgeru je pohodlné pro design, ne pro zákazníka.
Jak navrhnout strukturu kategorií, rozebíráme v článku Navigace a struktura kategorií. Odkazy z homepage mají zároveň váhu pro SEO: stránky, na které homepage odkazuje, jsou pro vyhledávač i uživatele důležitější. Víc v hesle interní prolinkování.
Hero a první obrazovka
Nielsen Norman Group ve studii z roku 2018 zjistil, že uživatelé strávili nad ohybem stránky zhruba 57 % času prohlížení a 74 % v prvních dvou obrazovkách. Lidé scrollují, ale pozornost s každou další obrazovkou výrazně klesá. První obrazovka je nejdražší místo na webu.
Co do ní patří:
- Logo, vyhledávání, košík a navigace ve stavu, který zákazník zná z jiných e-shopů. Tady se originalita nevyplácí.
- Jedno hlavní sdělení, ideálně s konkrétním produktem nebo kategorií a jedním tlačítkem.
- Lišta s výhodami: doprava zdarma od určité částky, lhůta na vrácení, hodnocení obchodu. Krátce, v jedné řadě.
Co do ní nepatří: automatický slider s pěti bannery. NN/g upozorňuje, že automaticky se posouvající karusely uživatele obtěžují, snižují viditelnost obsahu a jsou problém pro přístupnost. Lidé s horší motorikou nestihnou kliknout, pomalejší čtenáři nestihnou dočíst. Uživatelé navíc karusely často přeskočí. Pokud karusel máte, ať se neposouvá sám, má viditelné ovládání a první snímek nese to nejdůležitější. Pohyb na stránce je i téma přístupnosti.
Vyhledávání a navigace
Část zákazníků přesně ví, co chce. Pro ně je homepage jen cesta k vyhledávacímu poli. To má být viditelné jako pole, ne jen ikona lupy, hlavně na desktopu. Na mobilu je častým kompromisem pole pod hlavičkou.
Navigace má používat slova zákazníků, ne interní názvy oddělení. „Péče o pleť" místo „Dermokosmetika Premium". Kvalitu vyhledávání řešíme v článku Filtrace a vyhledávání.
Důvěra: proč nakoupit právě u vás
Nový návštěvník vás nezná. Homepage je místo, kde mu dáváte důvody k důvěře:
- Hodnocení obchodu z ověřitelného zdroje, s počtem hodnocení.
- Kontakt a skutečná firma: telefon, e-mail, případně kamenná prodejna nebo výdejna.
- Konkrétní výhody: „odesíláme do 24 hodin", „30 dní na vrácení", pokud to tak skutečně je.
- Srozumitelné platební a dopravní možnosti jako ikony nebo krátký přehled.
Důvěryhodnost nekazí jen chybějící prvky. Kazí ji i přeplněná stránka, kde se přes sebe překrývá cookie lišta, pop-up se slevou a chat. Co zákazník potřebuje v prvních vteřinách, popisujeme v článku Onboarding nového e-shopu.
Rychlost homepage
Homepage bývá nejtěžší stránka e-shopu. Velké bannery, několik karuselů, videa, widgety recenzí, sledovací skripty. Výsledkem je pomalé načtení a skákání obsahu, tedy horší Core Web Vitals. Google považuje za dobrou hodnotu LCP do 2,5 sekundy.
Nejčastější opravy: hlavní obrázek ve správném formátu a velikosti a bez odloženého načítání, ostatní obrázky načítat až při scrollu, rezervovat místo pro bannery a widgety, aby obsah neposkakoval, a omezit skripty třetích stran. Víc v článku Core Web Vitals pro e-shopy.
Tabulka: prvky homepage podle priority
| Prvek | Priorita | Poznámka |
|---|---|---|
| Hlavička: logo, vyhledávání, košík, účet | Nutné | Standardní rozmístění |
| Hlavní navigace s kategoriemi | Nutné | I na mobilu snadno dostupná |
| Jedno hlavní sdělení (hero) | Nutné | Konkrétní, s jedním tlačítkem |
| Lišta výhod (doprava, vrácení, hodnocení) | Silně doporučené | Jen pravdivé a ověřitelné údaje |
| Dlaždice kategorií | Silně doporučené | Ukázat šíři sortimentu |
| Výběr produktů (bestsellery, novinky) | Doporučené | Pestře napříč kategoriemi |
| Recenze obchodu | Doporučené | S počtem hodnocení a zdrojem |
| Obsah a inspirace (blog, rádce) | Volitelné | Níž na stránce |
| Automatický slider | Nevhodné | Nahradit statickým hero |
Personalizace: až když funguje základ
Homepage se dá přizpůsobovat návštěvníkovi, například vracejícímu se zákazníkovi ukázat naposledy prohlížené kategorie. Dává to smysl, ale až ve chvíli, kdy statická verze plní svou roli. Personalizace nespraví nejasnou nabídku ani pomalou stránku. Možnosti popisujeme v článku AI personalizace homepage a kategorií.
Jak na to prakticky: checklist homepage
- Pozná nový návštěvník během pár vteřin, co prodáváte?
- Ukazuje homepage šíři sortimentu, ne jen jednu akci?
- Je vyhledávání viditelné jako pole?
- Je na první obrazovce jedno jasné sdělení místo slideru?
- Vidí zákazník hned hlavní výhody nákupu u vás a jsou pravdivé?
- Je hlavní navigace srozumitelná a dostupná i na mobilu?
- Nepřekrývají obsah současně cookie lišta, pop-up a chat?
- Je LCP homepage do 2,5 sekundy i na mobilu?
- Víte z analytiky, kolik lidí přes homepage vstupuje a kam z ní pokračují?
Když si nejste jistí, co z homepage odstranit a co posílit, začněte UX auditem, který máme hotový do 10 dnů. Pokud homepage potřebuje víc než úpravy, navazuje redesign. Kompletní redesign obvykle trvá 6 až 10 týdnů a děláme ho tak, aby nepoškodil konverze ani SEO.
Potřebujete s tím pomoct?