6 důležitých aspektů dobře fungující drobečkové navigace

Na začátek

Stále má svůj význam

Během rozsáhlého testování použitelnosti výzkumnou společnosti Baymard Institute bylo zjištěno, že drobečková navigace je stále prvkem s vysokým významem, především pak na mobilních zařízeních, a to zejména ze dvou důvodů:

1. Aktuální "poloha" uživatele v rámci informační struktury webu je na mobilních zařízeních méně zřejmá, neboť hlavní navigace je obvykle skrytá.

2. Použití hlavní navigace na mobilních zařízeních vyžaduje více úsilí ve srovnání s desktopovou verzí, kde hlavní navigace je trvale viditelná a uživatelé mohou přistupovat k jednotlivým kategoriím a podkategoriím jediným kliknutím či pomocí hover interakce.

Přesto nejnovější benchmark společnosti ukazuje, že z webů, které drobečkovou navigaci mají, 36 % z nich nezahrnuje celou hierarchii kategorií do její struktury. Toto opomenutí může vést k tomu, že uživatelé na mobilních zařízeních nemusí vědět, kde se zrovna na webu nacházejí a navigace v celkové hierarchii webu je tak ztížena.

V konečném důsledků se tak uživatelé mohou cítit ztraceni a nevědí, jak najít hledaný produkt.

Problém s neúplnou drobečkovou navigací

Může být výzvou implementovat drobečkovou navigaci na viewport mobilních zařízení, zvláště pokud web užívá vertikálně vysoké kategorizace.

1. Drobečková navigace není implementována

L. L. Bean nemá vůbec implementovánu drobečkovou navigaci.

Nejhorším přístupem je nemít implementovánu drobečkovou navigaci vůbec, tomu bych se obloukem vyhnul - jako v ukázce výše.

Testování skutečně ukázalo, že drobečková navigace je důležitá, zvláště pro mobilní zařízení, kdy asistuje uživatelům webu a pomáhá jim pochopit, kde se v hierarchii stránky nacházejí. Mimo to jim také poskytuje přístup k dalším vrstvám v rámci samotné hierarchie.

Přesto z testovacího vzorku společnosti Baymard Institute vychází zajímavá mini-statistika:

• 20 % webů nemá drobečkovou navigaci v desktopové verzi webu,

• 65 % webů nemá drobečkovou navigaci v mobilní verzi webu.

To výrazně snižuje použitelnost webu ve vztahu k aspektům, o kterých jsem psal výše.

2. Vypuštění vrstev hierarchie navigace

Alternativní metodou, kterou některé weby utilizují, je vypuštění některých vrstev (odkazů) hierarchie drobečkové navigace, aby byla zkrácena její délka. Tím, že vynecháme některé vrstvy, riskujeme, že uživatel nepochopí, jak jsou produkty uspořádány, kde se (opět) v rámci hierarchie webu nachází, což může vést k dezorientaci a náročné ovladatelnosti webu - celkový zážitek tak není spíš o nakupování, ale o klikání na displej.

Riziko špatných navigačních rozhodnutí můžeme též zvýšit tím, že drobečková navigace nebude obsahovat všechny základní úrovně hierarchie kategorií a subkategorií, neboť uživatelé si nejsou vědomi toho, že to, co vidí v rámci drobečkové navigace, není úplná struktura webu.

To může vyústit v to, že uživatelé přeskočí v hierarchii výše, než by sami chtěli, např. při prohlížení ostatních relevantních položek v rámci kategorie, a pak se musí pracně vracet zpět do původní kategorie. To vede k obtížné a časově náročné navigaci webem.

3. Zobrazení pouze nadřazené kategorie či subkategorie

Dalším způsobem řešení drobečkové navigace, se kterým se na mobilních zařízeních můžeme setkat, je zobrazení pouze nadřazené kategorie či subkategorie, do které aktuálně prohlížený produkt patří.

Tento způsob implementace zvolil například obchod Crate&Barrel. Pojďme si rozebrat, jaká úskalí tento způsob s sebou nese.

Dalším řešením může být zobrazení pouze nadřazené kategorie či subkategorie, do které aktuálně prohlížený produkt patří, na mobilních zařízeních. Například zobrazíme pouze "Nábytek" či "Pohovky" místo celé hierarchie "Nábytek > Obývací pokoj > Pohovky".

Toto do jisté míry podporuje běžný vzorec navigace "o krok zpět", pro uživatele však představuje určité problémy, se kterými se musí potýkat:

• zobrazení pouze nadřazené kategorie či subkategorie dává uživatelům velmi malý přehled o tom, kde se aktuálně nacházejí v hierarchii webu,

• uživatel nemusí porozumět celé šíři kategorizaci produktů, jak jsou kategorizovány a kde se nacházejí ve vztahu k celkové struktuře,

• je výrazně snížena možnost, jak daleko se mohou uživatelé dostat pomocí jednoho kliknutí v rámci hierarchie, vždy totiž mohou postupovat jen o jednu úroveň výš.

Tyto problémy jsou potom umocněny, pokud uživatel přijde na stránku nelineárním způsobem, ale například skrze organické vyhledávání či proklik reklamy. Uživatel totiž neprošel postupným "filtrováním" skrze hierarchii webu, kdy by se proklikl skrze kategorie a subkategorie až k samotnému produktu a určitým způsobem "poznal" strukturu webu.

Potenciálně ještě více škodlivé pro uživatele může být riziko nejistoty, kam je tato jediná zobrazená kategorie či subkategorie vezme. Specificky, jedná se o "hierarchický" odkaz drobečkové navigace, který vezme uživatele do nadřazené kategorie subkategorie, nebo se jedná o "historický" odkaz, které se chová podobně jako tlačítko "Zpět" v prohlížeči, tedy že vezme uživatele do nadřazené subkategorie s případně použitými filtry vyhledávání a řazením?

V každém případě, chování webu nebude korespondovat s očekáváním uživatelům, což u některých povede k webové dezorientaci a frustraci.

4. Shrňme si to

Zobrazení kompletní hierarchické cesty, jako tomu je u společnosti Target, umožňuje uživatelům na mobilních zařízeních rychle a jednoduše přecházet z jedné kategorie produktů do druhé. Nicméně i tato implementace (na 2 řádky) má své mouchy, o tom ale až trochu později.

V drobečkové navigaci tak minimálně uvádějme všechny klíčové úrovně kategorií, optimálně však celou cestu cestu, která vede k aktuálně prohlíženému produktu.

Pamatujme na to, že zejména na mobilních zařízeních je pro uživatele obtížné si vytvořit a udržet přehled o celkové hierarchii a struktuře webu. Tím, že mu neposkytnu úplnou cestu v rámci drobečkové navigace, to dělám pro něj ještě těžším - a pokud by náhodou měli pocit, že se "opravdu" ztratili, nebo že najít produkt je až příliš obtížné, mohou web úplně opustit.

2 způsoby, jak se vyhnout příliš dlouhé navigaci

Mnoho stránek nezobrazí celou cestu drobečkové navigace z toho důvodu, že by byla jednoduše moc dlouhá. Přesto existují 2 způsoby, jak se s tím můžeme popasovat:

1. Vyhněme se nadměrné kategorizaci (překategorizace).

2. Vyjměme z drobečkové navigace odkazy/vrstvy na domovskou stránku a stránku aktuálně prohlíženého produktu

Nadměrná kategorizace

Nadměrná kategorizace logicky prodlužuje celkovou délku drobečkové navigace. Než-li jednoduše odstranit podkategorie, zkontrolujme samotnou hierarchii produktů, zda nevykazuje známky překategorizování. Jako příklad si uveďme záměnu funkce kategorie a filtrace: neřeší podkategorie to, co by mělo být raději v gesci filtrace? Nemohu ulevit kategorizaci tím, že částečně tuto funkci přenesu na filtraci a zjednoduším ji? Celkově až 50 % webů trpí tímto problémem.

Dále se také podívejme na popisky kategorií, zda-li nejsou příliš dlouhé, zda-li neexistuje prostor pro jejich zkrácení, zjednodušení či zpřesnění. Zvýšíme tak komfort uživatelům při "skenování", když hledají produkty, které je zajímají.

Vyjmutí odkazů na domovskou stránku a stránku produktu

HM zbytečně zobrazuje v drobečkové navigaci odkaz na domovskou stránku a stránku produktu. Odkaz na domovskou stránku je řešen pomocí loga s odkazem v hlavní navigaci. Odstranění těchto 2 odkazů by zkrátilo délku navigace a nemusela by tak být na 2 řádky, což, jak si za chvilku ukážeme, také není optimální.

Vyjmutí odkazů na domovskou stránku a stránku produktu zkrátí celkovou délku drobečkové navigace.

Na domovskou stránku se uživatelé mohou dostat kdykoliv klepnutím na logo webu, které je viditelné v hlavní navigaci většiny mobilních verzí webů. Vyjmutím odkazu na stránku aktuálně prohlíženého produktu, který je obvykle nejdelší ze všech, je pak nejpodstatnějším krokem k redukci délky navigace zvláště na mobilních zařízeních.

Testování odhalilo, že absence těchto odkazů či vrstev neměla žádný negativní dopad na uživatele při navigaci napříč webem.

Jak implementovat dlouhé drobečkovky?

Co bychom ale měli dělat v situaci, kdy jsme revidovali kategorizaci, názvy jednotlivých kategorií a podkategorií, odstranili odkazy na domovskou stránku a stránku produktu, ale drobečková navigace je stále příliš dlouhá? Testování odhalilo jeden pattern, který by mohl být použit - implementovat navigaci jako horizontálně swipovatelný/posuvný element.

Tento způsob implementace zvolila společnost BED BATH & BEYOND, kdy drobečková navigace je horizontálně swipovatelná/posuvná. Není tak rozdělena na více řádků a celá hierarchická cesta je zachována, což zvyšuje uživatelovu orientaci, kde se zrovna nachází včetně možnosti prokliku na jakoukoliv úroveň v hierarchii.

Implementace drobečkové navigace jako vodorovně swipovatelného/posuvného elementu šetří místo a zároveň dává uživatelům přístup ke kompletní či téměř kompletní hierarchii skrze standardizované gesto ovládání dotykových zařízení. Pokud se rozhodneme implementovat drobečkovou navigaci tímto způsobem, je nezbytné, abychom zajistili, že uživatel tuto interakci pochopí na první dobrou.

Zejména zkrácení navigace na začátku či na konci dává uživatelům signál, že mohou přejetím prstem doleva či doprava zobrazit další vrstvy hierarchie. Lze si též hrát s možností, kdy jeden konec navigace nerespektuje padding stránky, tedy též signalizuje, že navigace pokračuje "do strany".

Během testování si tyto stránky vedly dle zjištění Baymard Institute velmi dobře.

Dávejte si pozor na tzv. "wrapping" a "elision"

Následující vzory implementace drobečkové navigace by měly být implementovány pouze u webů s mělkou hierarchií a především opatrně a s rozumem:

1. Wrapping - drobečkovou navigaci "zabalím" do více řádků

2. Elision - některé mezivrstvy navigace skryji a nahradím výpustkou (třemi tečkami)

1. Wrapping

Zabalením drobečkové navigace do více řádků (nejčastěji 2) u webů s mělkou hierarchií může být vhodnou volbou, neboť skutečný výskyt případů, kdy je zabalení nutné, může být nízký.

Slabinou tohoto řešení může být situace, kdy uživatel má problém kliknout na jednotlivé odkazy navigace z důvodu jejich velikosti, nebo pokud nemají dostatečný prostor kolem sebe mezi ostatními odkazy. Typická minimální velikost oblasti, do které se uživatel trefuje prstem, je 7x7 mm s rozestupem mezi prvky o velikosti 2 mm - i tak se ale stále jedná o minimální velikost, která s sebou nese určitou úroveň obtížnosti.

Dále může také zabalení drobečkové navigace přispět k nepřehlednosti v horní části produktové stránky, zvláště pokud není vizuálně oddělena od ostatního obsahu, uživatel ji tak může snadno přehlédnout.

O tzv. wrappingu proto uvažujme pouze u hierarchicky mělkých webů, kde výskyt tohoto jevu je nízký či málo pravděpodobný.

Jak již bylo ukázáno, tzv. wrapping implementuje například obchod TARGET, kdy drobečková navigace je zabalena na 2 řádky.

2. Elision

Tento přístup implementovala společnost REI, kdy mezivrstvy navigace jsou nahrazeny výpustkou/třemi tečkami. Po klepnutí se zobrazí skryté mezivrstvy a uživatel tak vidí kompletní hierarchii. Tento přístup však může ztížit uživatelovu interakci s webem.

Eliminace mezivrstev/odkazů drobečkové navigace pomocí výpustky/tří teček může uživatele informovat o jejich existenci, aniž by zabíraly více prostoru obrazovky.

Současně tento přístup předpokládá, že:

1. uživatelé si výpustky všimnou,

2. rozumí očekávané interakci pro odkrytí skrytých mezivrstev navigace,

3. uživatelé tuto akci provedou, aby zjistili, kde na webu se nachází a pochopili, jaká je celková struktura.

Dá se říci, že eliminace mezivrstev přenáší poměrně velké úsilí na uživatele, čímž zvyšujeme pravděpodobnost, že část uživatelů navigaci přehlédnou či budou ignorovat.

V neposlední řadě to také násobí navigační úsilí, které musí uživatel vyvinout, protože pokud má uživatel v úmyslu procházet další vrstvy navigace, musí nejprve odkrýt skryté odkazy a teprve poté se prokliknout na příslušnou kategorii či subkategorii.

2 další tipy k implementaci

Ať už máme drobečkovou navigaci implementovánu jakkoliv, uživatelé, především na mobilních zařízeních, se stále mohou ztratit, pokud není navigace vhodně stylována, nemá dostatečnou velikost či pokud není dostatečně vzdálena od ostatních obsahových prvků.

Testování odhalilo 2 situace, při kterých došlo k přehlédnutí navigace uživateli na mobilních zařízeních. Pojďme si ukázat 2 způsoby, kterými tomu můžeme předejít.

2 detaily implementace jsou klíčové pro to, aby uživatelé nepřehlédli drobečkovou navigaci:

1. Vyhněte se umístění drobečkové navigace do těsné blízkosti ostatních prvků v horní části produktové stránky.

2. Poskytněte vizuální stylizaci, které signalizuje možnost prokliku.

1. Těsná blízkost ostatních prvků

Vyhněme se umístění drobečkové navigace v těsné blízkosti ostatních obsahových prvků, zvláště pokud jsou to prvky s podobnou vizuální stylizací. Identifikace pak může být pro uživatele obtížná, mohou navigaci zaměnit za obsahovou část, která se již týká např. popisu produktu. Funkce navigace pak poté není naplněna.

Stylizujme navigaci tak, aby byla odlišitelná od ostatních prvků a dejme ji dostatek bílého prostoru kolem, aby se neztratila a plnila svůj účel.

2. Vizuální stylizace

Drobečková navigace by po stránce vizuální měla informovat uživatele o možnosti prokliku, např. do subkategorie. Když má uživatel k dispozici počítač a myš, může být tato proklikovost/interaktivnost signalizována vůči uživateli změnou barvy či podtržením při najetím kurzory myši (hover) na příslušný prvek navigace. Na mobilních zařízeních ale toto nefunguje z očividných důvodů. Je proto potřeba jiným způsobem signalizovat vůči uživateli, že se jedná o interaktivní prvek.

Pokud toto stránka neposkytuje, mohou si uživatelé v extrémním případě vypěstovat jistou averzi k neklikání na nic, co nevypadá jako odkaz či prokliknutelný element. To může vést k tomu, že přijdou o cenné informace a celkově se ztíží jejich navigace na webu, pokud musí hledat alternativní cesty navigace.

Je tak velmi důležité stylizovat drobečkovou navigaci tak, aby bylo na první dobrou jasné, že se o ni jedná, a že na její jednotlivé prvky lze kliknout.

Jednotlivé prvky/odkazy navigace by měly být podtržené, aby signalizovali odkaz, možnost prokliku, jednotlivé oddělovače mezi prvky navigace by měly být konvenčního charakteru, tedy znaky jako ">" či "/", vložené mezi každý prvek navigace. Tyto dvě jednoduché rady zlepší rozpoznatelnost navigace na mobilních zařízeních.

Pokud se podíváme na GymBeam, nejenže je teda navigace přes 4 řádky, ale také nejsou vizuálně stylizovány jednotlivé prvky navigace tak, aby signalizovaly proklikovost pro uživatele na mobilních zařízeních.

Na závěr: Pomáhejme uživateli pochopit hierarchii vaší stránky

Pokud jste dočetli až sem, moc vám děkuju! Je to první článek na novém webu, tak doufám, že byl pro vás užitečný, i když se jedná o tak malý element jako je drobečková navigace. Pojďme na shrnutí:

Pokud je drobečková navigace těžko rozpoznatelná, či až nenalezitelná, nebo neposkytuje celou hierarchickou cestu k produktu, narušuje to její primární účel - informovat uživatele o tom, kde se přesně nachází a asistovat přechodu do vyšší úrovně hierarchie skrze klepnutí na prvek navigace.

V rámci testování společnosti Baymard Institute byli uživatelé úspěšnější, pokud byla navigace kompletní (nebo téměř kompletní), přesto data ukazují, že 36 % webů, které mají navigaci implementovánu, ji nezobrazují kompletně. A 65 % webů nezobrazuje navigaci na mobilní verzi webu vůbec.

Abychom se vyhnuli příliš dlouhé navigaci, mysleme na tyto body:

1. vyhnout se přílišné kategorizaci,

2. vyjmout odkazy na domovskou stránku a stránku produktu ze struktury navigace,

Pokud je i přesto drobečková navigace příliš dlouhá, měla by být implementována jako horizontálně swipovatelný/posuvný element, zatímco k tzv. "wrappingu" a "elision" bychom měli přistupovat opatrně, zpravidla u hierarchicky mělkých webů.

A v neposlední řadě, aby byla navigace snadno nalezitelná a identifikovatelná, tak:

1. by měla být stylizována jinak než ostatní textové prvky stránky,

2. mít kolem sebe dostatek bílého prostoru,

3. obsahovat konvenční vizuální oddělovače a

4. její prvky by měly být ve výchozím stavu podtržené, aby indikovaly proklik.

Snadno dostupná drobečková navigace, která ukazuje celou hierarchickou cestu, umožňuje uživatelům, především na mobilních zařízeních, si udržet přehled o tom, kde se v celkové hierarchii webu aktuálně nacházejí, a rychle se dostat tam, kam potřebují či k tomu, co zrovna hledají. To ve finále zlepšuje celkový uživatelský zážitek na vašem e-shopu.