Na webových stránkách s velkým počtem stránek může být jednoduché se ztratit. Drobečková navigace výrazně zlepšit orientaci uživatelů. Z hlediska použitelnosti drobečková navigace snižuje počet akcí, které musí návštěvník webu provést, aby se dostal na stránku vyšší úrovně, a zlepšuje nalezitelnost sekcí a stránek webu.

Nechte za sebou drobečky

Drobečková navigace je druh sekundárního navigačního schématu, který ukazuje polohu uživatele na webové stránce nebo ve webové aplikaci. Termín pochází z pohádky o Jeníčkovi a Mařence, ve které dvě děti nechávají na cestě drobky, aby vytvořily stopu zpět domů. Stejně jako v pohádce nabízejí drobečky v reálných aplikacích uživatelům způsob, jak sledovat cestu zpět k původnímu cíli.

Drobečky obvykle najdete na webových stránkách, které mají velké množství hierarchicky uspořádaného obsahu. Setkáte se s nimi také ve webových aplikacích, které mají více než jeden krok, kde fungují podobně jako ukazatel průběhu. V nejjednodušší podobě jsou drobečkové navigace vodorovně uspořádané textové odkazy oddělené symbolem „větší než“ (>); symbol označuje úroveň dané stránky vzhledem k odkazům na stránky vedle ní.

Kdy použít breadcrumbs?

Drobečkovou navigaci používejte u rozsáhlých webových stránek a stránek s hierarchicky uspořádanými stránkami. Výborným příkladem jsou webové stránky e-shopů, na kterých je velké množství produktů seskupeno do logických kategorií.

Drobečkovou navigaci byste neměli používat u jednoúrovňových webových stránek, které nemají žádnou logickou hierarchii nebo seskupení. Skvělým způsobem, jak zjistit, zda by pro webovou stránku byla drobečková navigace přínosná, je sestavit mapu webu nebo diagram znázorňující navigační architekturu webu a poté analyzovat, zda by drobečková navigace zlepšila schopnost uživatele pohybovat se v rámci kategorií a mezi nimi.

Drobečková navigace by měla být považována za doplňkovou funkci a neměla by nahrazovat efektivní primární navigační menu. Je to pohodlná funkce; sekundární navigační schéma, které umožňuje uživatelům zjistit, kde se nacházejí; a alternativní způsob navigace po webu.

Základní typy drobečkové navigace

Breadcrumbs založené na umístění

Breadcrumbs založené na poloze ukazují uživateli, kde se v hierarchii webu nachází. Obvykle se používají u navigačních schémat, která mají více úrovní (obvykle více než dvě úrovně).

Breadcrumbs založené na atributech

Drobečkové trasy založené na atributech zobrazují atributy konkrétní stránky. Například na e-shopech může drobečková navigace vypadat následovně:

Ženy > oblečení > zimní bundy > North Face

Stránka, na které se taková breadcrumbs navigace nachází bude zobrazovat dámské zimní bundy značky North Face.

Breadcrumbs založené na cestě

Breadcrumbs založené na cestě zobrazují uživatelům kroky, které učinili, aby se dostali na konkrétní stránku. Drobečkové navigace založené na cestě jsou dynamické v tom smyslu, že zobrazují stránky, které uživatel navštívil, než se dostal na aktuální stránku.

Výhody používání drobečkové navigace

Zde jsou jen některé z výhod používání drobečkové navigace.

Pohodlí pro uživatele

Drobečková navigace se používá především proto, aby uživatelé měli k dispozici sekundární způsob navigace po webových stránkách. Nabídnutím drobečkové stopy pro všechny stránky na rozsáhlém víceúrovňovém webu mohou uživatelé snadněji přecházet do kategorií vyšší úrovně. Navigace snižuje počet kliknutí nebo akcí pro návrat na stránky vyšší úrovně. Místo toho, aby uživatelé používali tlačítko „Zpět“ v prohlížeči nebo primární navigaci webu pro návrat na stránku vyšší úrovně, mohou používat drobečkovou cestu s menším počtem kliknutí.

Obvykle nezabírají místo na obrazovce

Protože jsou obvykle orientovány vodorovně a mají jednoduchý styl, drobečkové navigace nezabírají na stránce mnoho místa. Výhodou je, že nemají téměř žádný negativní dopad z hlediska zahlcení obsahem a při správném použití převáží případná negativa.

Snižují míru odchodu

Drobečkové trasy mohou být skvělým způsobem, jak přimět návštěvníky, kteří si web prohlížejí poprvé, aby si jej prohlédli i po zobrazení vstupní stránky. Řekněme například, že uživatel přijde na stránku prostřednictvím vyhledávání Google, zobrazení drobečkové navigace ho může navnadit na kliknutí na stránky vyšší úrovně, aby si prohlédl související témata, která ho zajímají. To následně snižuje celkovou míru odchodu z webu.

Chyby při využívání breadcrumbs

Používání drobečkových stezek je poměrně jednoduchá záležitost a existuje pouze několik zásad, které je třeba zvážit, než se rozhodnete je na webu implementovat. Pojďme se podívat na některé časté chyby, kterých je třeba se vyvarovat.

Používání breadcrumbs, když to není potřeba

Častou chybou při implementaci drobečkových tras je jejich používání v případech, kdy z nich není žádný užitek. Toto může nastat zejména v případě, že drobečkovou navigaci umístítě na webové stránky, které jsou samy o sobě jednoduché, případně jejich umístění blízko hlavního rozcestníku.

Používání breadcrumbs jako primární navigace

Jak již bylo uvedeno, breadcrumbs používejte jako volitelnou navigační pomůcku. Není vhodné je používat jako hlavní navigační prostředek.

Používání drobečkových stezek, když mají stránky více kategorií

Drobečkové stezky mají lineární strukturu, takže jejich použití bude obtížné, pokud vaše stránky nelze zařadit do přehledných kategorií. Rozhodnutí, zda drobečkové navigace používat, do značné míry závisí na tom, jak jste navrhli hierarchii svých webových stránek. Pokud je (nebo může být) stránka nižší úrovně zařazena do více než jedné nadřazené kategorie, jsou drobečkové stezky neefektivní, nepřesné a pro uživatele matoucí.

Úvahy o návrhu breadcrumbs

Při navrhování schématu drobečkové navigace mějte na paměti několik věcí. Podívejme se na některé otázky, které mohou při práci s drobečkovými navigacemi vyvstat.

Čím by měly být odděleny položky odkazů?

Obecně přijímaným a nejrozpoznatelnějším symbolem pro oddělení hypertextových odkazů v drobečkových trasách je symbol „větší než“ (>). Obvykle se znak > používá k označení hierarchie, například ve formátu

Nadřazená kategorie > Podřízená kategorie.

Dalšími používanými symboly jsou šipky směřující doprava, pravoúhlé uvozovky („) a lomítka (/).

Volba závisí na estetice webu a typu použité drobečkové navigace. Například u drobečkových navigací založených na cestě, ve kterých odkazy nemusí být nutně ve vzájemném hierarchickém vztahu, nemusí použití symbolu „větší než“ přesně vyjadřovat jejich vztah.

Jak velká by navigace měla být?

Nechcete, aby drobečková navigace dominovala stránce. Drobečková navigace funguje pouze jako pomůcka pro uživatele (usnadnění); její velikost by to měla uživatelům sdělit, a proto by měla být alespoň menší nebo méně nápadná než primární navigační nabídka.

Dobrým pravidlem, kterým je vhodné se řídit při určování velikosti drobečkové cesty, je, že by neměla být první položkou, která upoutá pozornost uživatele při příchodu na stránku.

Umístění breadcrumbs

Breadcrumbs se obvykle zobrazují v horní polovině stránky, pod primární navigační nabídkou, pokud je použito horizontální rozložení nabídky.