Jan Štráfelda - Průvodce online -projektem
Praha/Mělník  |  776 678 044  |  jan@strafelda.cz  |  Pošlete mi poptávku

Drobečková navigace

Drobečková navigace (anglicky breadcrumb navigation) je známý seznam odkazů na nadřazené kategorie daného webu. Je to vlastně navigace pomocná, jde o speciální případ kontextové navigace. Může to vypadat například takto:

Ukázka drobečkové navigace

Název „drobečková navigace“ pochází z pohádky o perníkové chaloupce, kde si Jeníček a Mařenka odhazovali po cestě lesem drobečky, které jim měly umožnit cestu zpátky domů. Drobečková navigace totiž vznikala v době, kdy lidé na weby chodili jen přes úvodní stránku. Toto již dávno neplatí, návštěvníci příchází na konkrétní podstránku přes vyhledávače, ze sociálních sítí, z placené reklamy… Jak si ale ukážeme dále, důležitost drobečkové navigace to naopak zvýšilo.

K čemu slouží drobečková navigace

Úkolem drobečkové navigace je ukázat návštěvníkům, kde se v hierarchii webu právě nacházejí a umožnit jim jednoduše přejít na nadřazené stránky. Význam drobečkové navigace proto stoupá s rostoucím rozsahem a složitostí webu. Obecné pravidlo říká, že drobečkou navigaci bychom měli na web nasadit, pokud má web v hierarchii stránek tři a více úrovní.

Z výše uvedeného je zřejmé, že aby drobečková navigace dobře plnila svou funkci (tj. zvyšovala použitelnost webu), musí mít web jasně definovanou strukturu. To znamená:

Takto definovaná struktura se pak projeví i jinde, třeba v mapě stránek.

Jiná využití drobečkové navigace

Drobečková navigace také nemusí být použita jen v hlavičce webu. Lze po ní sáhnout všude, kde se potřebujeme odkázat na stránku a zároveň lze předpokládat, že uživatele zajímají i nadřazené kategorie této stránky. Typickým případem bývají výsledky vyhledávání:

Ukázka drobečkové navigace

Časté chyby kolem drobečkové navigace

  1. Chybné umístění

    Na desktopech by měla být drobečková navigace umístěna v hlavičce stránky. Má-li web horizontální hlavní navigaci, tak až pod ní. Ideálně také poblíž hlavního nadpisu. Říká se, že lépe fungují drobečkové navigace umístěné pod hlavním nadpisem (než nad ním), ale konkrétní web může fungovat odlišně.

  2. Poslední položka

    Důležité také je, aby poslední položka drobečkové navigace odpovídala názvu stránky (a nebyla to nadřazená kategorie). Velkou chybou je poslední položku vynechat. Tato položka také nesmí být odkazem – stránka nemá nikdy odkazovat sama na sebe. A pokud položky nepodtrháváme a z drobečkové navigace tedy není vidět, že poslední položka je odlišná, pomáhá zobrazit ji odlišně, barvou textu, tučně apod.

  3. Oddělovací znaménka

    Dobře fungují znaky „je větší“ ( > ), šipky (→), případně ještě lomítka (/). Ostatní znaky jsou chybou. Drobečkovou navigaci oddělenou tečkami nebo dokonce svislítky (znakem |) budou uživatelé webu pravděpodobně vnímat jako pomocné menu, tzn. neuvidí mezi položkami hierarchické vztahy (podřízenost).

  4. Vynechání úvodní stránky

    Úvodní stránku nikdy z drobečkové navigace nevynecháváme. Někdy však může být užitečné ji pojmenovat názvem webu. Na začátku také dobře funguje ikonka domečku nebo text typu „Zde se nacházíte“.

  5. Příliš kreativní řešení drobečkové navigace

    Drobečková navigace by neměla být moc výrazná. Je to typická struktura, snadno se okem rozpoznává, i když je méně nápadná. Neměla by tedy stránce dominovat, nemá stejnou důležitost jako hlavní navigace.

  6. Nekonzistentní používání

    Jako u všech druhů navigace na webu platí, že i drobečková navigace by se měla napříč webem chovat stejně. Chybou proti použitelnosti webu také je ji na některých stránkách zobazit a jinde nikoliv. Výjimkou z tohoto pravidla je pouze úvodní stránka, zde ji můžeme schovat.

  7. Na více řádků

    Uživatele také mate drobečková navigace, která se v prohlížeči rozpadne na více řádků. Na mobilních zařízeních se proto obvykle drobečková navigace úplně schovává, nebo z ní bývá zobrazena pouze poslední nadřazená položka.

Drobečková navigace v e-shopech

Kritická je drobečková navigace zejména u e-shopů, které často mívají mnoho úrovní kategorií. Zároveň obvykle nadřazené kategorie návštěvníka zajímají. Pokud mě detail produktu nepřesvědčil ke koupi, kliknutím na odkaz v drobečkové navigaci se rychle dostanu na přehled dalších produktů.

To je klíčové zejména ve chvíli, kdy jsem na detail produktu nepřišel z nadřazené kategorie, ale odjinud (například z vyhledávání, ze sociálních sítí nebo z newsletteru). V takovém případě totiž nemohu v prohlížeči použít tlačítko „Zpět“ (které by mě odvedlo z webu pryč), ale musím na stránce rychle najít odkaz na nadřazenou kategorii. Drobečková navigace tak snižuje míru okamžitého opuštění stránky (Bounce Rate), kterou lze jednoduše měřit v Google Analytics.

Zařazení produktu ve více kategoriích

Častou otázkou bývá, jak se má drobečková navigace chovat, pokud je produkt zařazen do více kategorií. Třeba se nachází ve stromu kategorií podle určení produktu a podle výrobce. To je u lépe zpracovaných e-shopů běžné, protože se e-shop snaží pokrývat různé kombinace hledaných frází.

My to v Adapticu řešíme tak, že produkt má dvě nezávislé stránky (s vlastními adresami). To znamená, že se pak v drobečkové navigaci vypisuje skutečná cesta, kterou uživatel na stránku přišel. Například přijdu-li na stránku tiskárny Epson 123 přes kategorii „Tiskárny“ a její podkategorii „Laserové tiskárny“, vidím v drobečkové navigaci „Tiskárny > Laserové tiskárny > Tiskárna Epson 123“. Přijdu-li ale přes kategorii „Epson“ a její podkategorii „Tiskárny“, vidím v drobečkové navigaci „Espon > Tiskárny > Tiskárna Espon 123“.

Takové řešení se nám osvědčilo, protože je pro návštěvníka pochopitelné, web se chová očekávaným způsobem. Uživatel na stránku přijde po nějaké cestě a právě tuto cestu přesně vidí v drobečkové navigaci. On totiž vůbec neví (a ani nepotřebuje vědět), že je produkt zařazený do více kategorií.

Nevýhodou pochopitelně je, že tak vznikají na webu duplicitní stránky, tj. že vyhledávače najdou dvě stránky s velmi podobným obsahem (liší se vlastně jen adresou a tou drobečkovou navigací). Je tedy třeba to ještě ošetřit pomocí meta elementu canonical. To znamená, že jednu z těchto dvou stránek si vybereme jako hlavní a u té druhé vyhledávači řekneme, že kopií té první důležitá. Vyhledávač pak sčítá zpětné odkazy na obě stránky a počítá je té hlavní, námi vybrané stránce.

Zaujal jsem vás? Přihlašte se do mailingu a mé další texty už vám neuniknou:

 

Zprávy posílám cca 8 × ročně. Odhlásit se můžete kdykoliv. Více informací.



Nezávazná poptávka

  (volitelné)