Navigace a struktura kategorií e-shopu: UX best practices

Zákazník přijde na e-shop se sportovním oblečením a hledá běžecké boty. V menu vidí „Pánské“, „Dámské“, „Značky“, „Výprodej“ a „Novinky“. Kam klikne? Pokud váhá déle než pár sekund, struktura kategorií nefunguje. A to i v případě, že produkt v e-shopu je a má skvělou cenu.

Baymard Institute ve svém benchmarku navigace a homepage pro rok 2025 hodnotí u 67 % předních amerických a evropských e-shopů výkon v této oblasti jako „průměrný“ až „špatný“. Největší prostor ke zlepšení vidí právě ve struktuře kategorií, hlavní navigaci a přechodových stránkách kategorií. V článku ukazujeme, jak na každou z nich.

Struktura kategorií: stavte podle zákazníka, ne podle skladu

Nejčastější chyba, kterou vidíme: kategorie kopírují interní členění dodavatelů nebo skladu. Zákazník ale nehledá „Sortiment B – doplňky“. Hledá „nabíječky k telefonu“.

Zásady, které se osvědčují:

• Název kategorie jazykem zákazníka. Ověřte si, jaké výrazy lidé zadávají do interního vyhledávání a do Googlu. „Mobilní telefony“ místo „Telekomunikace“.
• Kategorie podle typu produktu, vlastnosti do filtrů. Barva, velikost, materiál nebo cena nejsou kategorie. Když z nich uděláte podkategorie, strom se zbytečně rozroste a zákazník ztratí možnost kombinovat. Jak filtry navrhnout, popisujeme v článku Filtrace a vyhledávání.
• Jasně oddělené sourozenecké kategorie. Pokud zákazník nedokáže říct, jestli produkt patří do „Doplňků“, nebo do „Příslušenství“, je lepší obě kategorie sloučit.
• Produkt tam, kde ho lidé hledají. Stan může být v „Kempování“ i v „Outdoor vybavení“. Více umístění je v pořádku, jen musí mít produkt jednu hlavní kategorii.
• Žádné prázdné nebo téměř prázdné kategorie. Kategorie se dvěma produkty zákazníka spíš zklame.

Hloubka a šířka stromu

Neexistuje ideální počet úrovní. Existuje ale jednoduchý test: každé kliknutí musí zákazníkovi viditelně zúžit výběr. Pokud úroveň jen přeposílá na další úroveň s jedinou volbou, je zbytečná.

Pro orientaci podle velikosti katalogu:

Baymard doporučuje u větších katalogů takzvané přechodové stránky kategorií (intermediary category pages). Místo okamžitého výpisu tisíců produktů ukážou podkategorie s obrázky a pomohou zákazníkovi vybrat směr. Zároveň ale upozorňuje, že u malých katalogů, typicky u značkových DTC e-shopů, tyhle mezistránky jen přidávají kliknutí. Tam je lepší poslat zákazníka rovnou na výpis produktů.

Hlavní navigace a mega menu

Na desktopu se u většího sortimentu osvědčuje mega menu, tedy velký panel s více sloupci. Nielsen Norman Group uvádí, že mega menu dobře zvládne dvě až tři úrovně navigace. Pravidla pro dobré mega menu:

• Jednoduchost. To, že se do menu vejde všechno, neznamená, že tam všechno patří.
• Jasně odlišené skupiny s nadpisy, které jde také proklikat.
• Každý odkaz jen jednou. Duplicitní položky vedou k otázce, jestli jde o totéž, nebo o něco jiného.
• Stabilní otevírání. Menu se nesmí zavřít, když myš sjede o pár pixelů mimo, ani otevírat při každém letmém přejetí.
• Ovládání klávesnicí a přístupné značení, aby menu fungovalo i bez myši.

Do hlavní navigace nepatří marketingový šum. „Novinky“, „Výprodej“ nebo „Tipy na dárky“ mají své místo, ale neměly by vytlačit hlavní produktové kategorie.

Navigace na mobilu

Na mobilu je hlavní menu skoro vždy schované. Nielsen Norman Group ve své studii zjistil, že skrytá navigace je výrazně hůř objevitelná než viditelná. Proto na mobilu:

• popište ikonu menu slovem a nechte viditelné vyhledávací pole,
• v menu ukažte na první úrovni produktové kategorie, ne účet, kontakty a blog,
• podkategorie otevírejte postupně s jasným tlačítkem zpět,
• na stránce kategorie ukažte podkategorie nahoře, třeba jako vodorovně posuvné štítky.

Víc o mobilu v článku Mobilní UX pro e-shopy.

Drobečková navigace a vazba na SEO

Drobečková navigace ukazuje, kde se zákazník nachází, a umožní mu jedním klepnutím přejít o úroveň výš. Baymard doporučuje na detailu produktu kombinovat dva typy: hierarchickou drobečkovou navigaci (Úvod › Sport › Běh › Běžecké boty) a odkaz „Zpět na výsledky“, který zákazníka vrátí do výpisu, ze kterého přišel, včetně nastavených filtrů.

Struktura kategorií je zároveň základem SEO:

• Kategorie jsou často nejsilnější vstupní stránky z vyhledávání. Jejich názvy a texty by měly odpovídat tomu, co lidé hledají.
• Menu, drobečková navigace a odkazy na podkategorie tvoří kostru interního prolinkování. Stránka, na kterou nevede žádný odkaz z navigace, má u vyhledávače slabou pozici.
• Drobečkovou navigaci doplňte o strukturovaná data BreadcrumbList podle Schema.org. Google v dokumentaci doporučuje, aby drobečky odpovídaly typické cestě uživatele, ne nutně struktuře URL.
• Produkt ve více kategoriích by měl mít jednu hlavní adresu, případně s canonical odkazem, aby nevznikal duplicitní obsah.

Samostatnou kapitolou jsou filtry a jejich indexace. Jak z nich udělat vstupní stránky a přitom nezahltit index, rozebíráme v článku Faceted navigation a SEO.

Jak strukturu ověřit dřív, než ji nasadíte

Změna struktury kategorií je zásah do UX i SEO najednou. Proto ji doporučujeme ověřit předem:

1. Analýza dat. Co lidé hledají v interním vyhledávání, kde odcházejí z kategorií, které kategorie mají nulový nebo minimální prodej.
2. Card sorting. Účastníci sami třídí karty s produkty do skupin a pojmenovávají je. Nielsen Norman Group doporučuje u card sortingu aspoň 15 účastníků.
3. Návrh stromu. Z výsledků vznikne jedna až dvě varianty struktury.
4. Tree testing. Lidé hledají konkrétní produkty jen v textovém stromu kategorií, bez vlivu designu. Ukáže, kde bloudí.
5. Plán přesměrování. Každá změněná URL kategorie potřebuje 301 přesměrování na novou adresu, jinak přijdete o pozice ve vyhledávání.
6. Měření po spuštění. Sledujte použití navigace, vyhledávání, konverzi z kategorií a organickou návštěvnost.

Jak na to prakticky: checklist navigace

• Odpovídají názvy kategorií výrazům, které zákazníci opravdu hledají?
• Jsou vlastnosti jako barva, velikost nebo cena ve filtrech, ne v kategoriích?
• Zužuje každá úroveň stromu výběr, nebo jen přidává kliknutí?
• Je mega menu přehledné, bez duplicit a ovladatelné klávesnicí?
• Vidí zákazník na mobilu produktové kategorie hned na první úrovni menu?
• Má detail produktu hierarchickou drobečkovou navigaci i odkaz zpět na výsledky?
• Mají drobečky strukturovaná data a produkty jednu hlavní URL?
• Ověřili jste novou strukturu testem dřív, než jste ji nasadili?

Pokud si nejste jistí, kde zákazníci v navigaci bloudí, zjistíme to v rámci UX auditu, který máme hotový do 10 dnů. Když chystáte přestavbu struktury kategorií, pohlídáme i dopady na vyhledávání v rámci SEO, včetně plánu přesměrování.