Co je drobečková navigace?
Drobečková navigace pomáhá uživatelům lokalizovat jejich polohu na webu. Jedná se o sekundární navigační panel, který se běžně zobrazuje jako vodorovné textové odkazy oddělené lomítkem nebo šipkami. Zlepšuje dohledatelnost cílových stránek a pomáhá uživatelům, aby se rychleji dostali na stránky vyšší úrovně.
Drobečková navigace usnadňuje uživatelům pohyb na stránce za předpokladu, že její obsah a celková struktura dávají smysl. V případě, že jsou vaše stránky vícevrstvé, můžete zvážit implementaci drobečkové navigace, díky které se na nich budete lépe orientovat.
Jak nejlépe vytvořit pro váš web funkční drobečkovou navigaci?
Jako u každého designového prvku i tady narážíme na správný a špatný způsob, jak navigaci aplikovat. Drobečkovou navigaci používejte jen v případě, kdy to vzhledem ke struktuře vašeho webu bude mít smysl. Navigace má totiž pouze lineární strukturu. V případě, že máte stránky nižší úrovně, které jsou přístupné z různých vstupních stránek, tak její použití návštěvníka spíše zmate. Pokud tedy vlastníte relativně jednoduchou webovou stránku, je použití drobečkové navigace zbytečné.
Sekundární postavení drobečkové navigace
Drobečková navigace je sekundárním nástrojem primárního navigačního panelu, neměla by být tedy na stránce příliš nápadná. Cílem není, aby si uživatelé pletli drobečkovou navigaci s hlavním navigačním menu. Cílem je poskytnout čtenářům snadný způsob, jak si celkově projít web, i když se na něj nedostali přes domovskou stránku.
Je nezbytné, aby se drobečková navigace četla zleva doprava
Nejbližší odkaz vlevo je domovská stránka a nejbližší vpravo pak aktuální stránka uživatele. Výzkumníci z Nielsen Norman Group přišli se studií, že uživatelé tráví 80 % svého času prohlížením levé poloviny stránky a pouze 20 % té pravé. To je dost podstatný argument proto, abyste aplikovali zmíněný design zleva doprava. V řetězci vlevo by měla být stránka nejvyšší úrovně. Názvy drobečkové navigace by měly tematicky odpovídat obsahu stránky, měli byste tedy myslet na klíčová slova. Pokud navigace neobsahuje odkaz, uveďte jej.
Hrajte si s designem
Tradiční drobečková navigace vypadá takto Domů > O nás > Kariéra. Pokud ale máte pocit, že vymyslíte design, který čtenáře osloví více, směle do toho. Zamyslet se můžete například nad tím, čím budou jednotlivé položky odděleny. Nejběžnějším symbolem pro oddělování hypertextových odkazů v drobečkové navigaci je symbol „větší než“ (>). Tento znak se používá k označení hierarchie jako ve formátu Nadřazená kategorie > Podřízená kategorie. Dalšími používanými symboly jsou například šipky směřující doprava (») či lomítka (/).
Co drobečková navigace a redakční systémy nebo web na míru? Šéf našeho obsahového týmu vám poví víc
Milan Zeman
Drobečková navigace je skvělý prvek, který je webu ku prospěchu z více důvodů. Když usnadníte navigaci napříč webem, bude z toho mít radost nejen uživatel, ale i vyhledávač. Tedy tím podporujete nejen UX, ale i SEO. Většina redakčních systémů s drobečkovou navigací počítá – například ve Wordpressu je potřeba jen najít vhodný plugin a třeba Shoptet ji tvoří automaticky. Pokud se chystáte mít web vyvíjený na míru, pak je potřeba s ní počítat už při návrhu informační architektury, pak znovu u tvorby wireframu a nakonec ještě u webdesignu. Když na ni zapomenete, může být její zpětná implementace nepříjemná komplikace.
Dbejte na přehlednost
Navigace je pouhou pomůckou, které by si uživatel v lepším případě nemusel hned všimnout, protože je nenápadná, a najde ji jen tehdy, když ji sám hledá. Neměla by obsahovat příliš velké množství slov.
Vyberte vhodný typ drobečkové navigace
Možná jste si všimli, že existuje několik typů drobečkové navigace. Tyto tři typy jsou nejčastější:
1. Podle polohy – tento typ je nejběžnější. Prozradí vám, kde se v hierarchii webu nacházíte a kolik kroků je zapotřebí k tomu, abyste se dostali zpět na domovskou stránku. Může vypadat nějak takto: Domovská stránka > Blog > Kategorie > Pohádka o Jeníčkovi a Mařence.
2. Podle atributů – ukazuje, do jaké kategorie stránka spadá. Nejčastěji se zobrazuje, když uživatel navštíví online obchod. Drobečková navigace se pak skládá z atributů daného produktu. Domů > Kategorie produktu > Pohlaví > Velikost > Barva.
3. Podle historie – ukazuje konkrétní cestu, kterou se uživatel na danou stránku proklikal. Drobečková navigace založená na historii dělá tedy přesně to, co můžete vyčíst z názvu. Data jsou seřazeny podle toho, co jste v minulosti hledali na webu. Jedná se o vhodnou alternativu k liště internetové historie. Vypadat může nějak takto: Předchozí stránka > předchozí stránka > předchozí stránka > aktuální stránka.
Proč se drobečkové navigaci říká drobečková?
Název pochází z pohádky O Jeníčkovi a Mařence, ve které hlavní hrdinové vytvářejí stezku z drobečků, aby našli cestu zpět domů. Tyto drobečky se tedy staly vzorem pro ty, které dnes vidíme na webových stránkách.
Drobečková navigace se vyskytuje i ve výsledcích Google vyhledávání, čehož můžete využít, pokud používáte Yoast SEO, nebo ji můžete přidat na své stránky pomocí vhodně vybraných slov. Ve výsledcích vyhledávání drobečková navigace poskytuje uživatelům snadno srozumitelný přehled toho, kde se stránka na jejich webu nachází.
Google drobečkovou navigaci miluje
Nejen vaši návštěvníci budou drobečkovou navigaci milovat, také Google na ni rád narazí. Pro Google se jedná o další způsob, jak zjistit, jak je vaše webová stránka strukturovaná. Jak je uvedeno výše, Google drobečkovou navigaci může použít i ve skutečných výsledcích vyhledávání, což zaručuje, že bude vaše stránka pro uživatele atraktivní. Pokud tedy chcete, aby se navigace objevila na Googlu, přidejte strukturovaná data, jako to dělá Yoast SEO.
Weby se složitější strukturu se bez drobečkové navigace neobejdou
Drobečková navigace je jednoduchý nástroj, který usnadňuje navigaci na vašem webu. Pomáhá návštěvníkům webu lépe se v něm orientovat a případně se z něj jednoduše vrátit zpět. Spadá pod SEO. Čím rozsáhlejší a víceúrovňovou webovou stránku máte, tím spíše by měla drobečkovou navigaci obsahovat. Zaujal vás tento typ navigace natolik, že byste ho rádi viděli na svém webu, ale protože nejste zrovna vývojář, netroufnete si na to? Ozvěte se nám a my vám s tím rádi pomůžeme.
