V pohádce Jeníček a Mařenka dvě děti upustí v lese drobečky, aby našly cestu domů.
V dnešní době pravděpodobně nezažijete příliš mnoho zážitků, kdy jste se ztratili v lese, ale vsadím se, že jste se na špatně navržených webových stránkách cítili frustrujícím způsobem dezorientovaní.
Drobečková navigace je v designu webových stránek způsob, jak uživatelům ukázat jejich polohu a jak se tam dostali (podobně jako Jeníčkovy drobečky). Pomáhá také uživatelům rychleji najít stránky vyšší úrovně, pokud se na váš web dostali z vyhledávání nebo hlubokého odkazu.
- Co je drobečková navigace?
- Tipy a příklady drobečkové navigace
- Drobečkovou navigaci používejte pouze tehdy, pokud dává smysl vzhledem ke struktuře vašeho webu.
- Nedělejte drobečkovou navigaci příliš velkou.
- V drobečkové navigaci uvádějte celou navigační cestu.
- Postup od nejvyšší úrovně k nejnižší.
- Udržujte názvy drobečkové navigace v souladu s názvy stránek.
- Buďte kreativní s designem.
- Udržujte ji čistou a nepřeplněnou.
- Zvažte, který typ drobečkové navigace má pro váš web největší smysl.
- Znáte své publikum.
Drobečková navigace je způsob, jak uživatelům vizualizovat jejich umístění na webu. Jedná se o sekundární navigační panel, který se obvykle zobrazuje jako horizontální textové odkazy oddělené symbolem „větší než“ (>). Drobečková navigace zlepšuje nalezitelnost vstupních stránek a pomáhá uživatelům dostat se rychleji na stránky vyšší úrovně, pokud váš web původně našli z vyhledávání nebo hlubokého odkazu.
Jakob Nielsen, spoluzakladatel společnosti Nielsen Norman Group, doporučuje drobečkovou navigaci již od roku 1995 a důrazně na ni poukazuje: „Jediné, co drobečkové navigace dělají, je, že uživatelům usnadňují pohyb po webu za předpokladu, že jeho obsah a celková struktura dávají smysl. To je dostatečný přínos pro něco, co v designu zabírá pouze jeden řádek.“
Pokud jsou webové stránky vaší firmy vícevrstvé, mohli byste zvážit zavedení drobečkové navigace, která vám usnadní orientaci na webu. Jako u každého designového prvku však existuje správný a špatný způsob, jak to udělat. Zde prozkoumáme devět tipů a příkladů, které vám pomohou zajistit, abyste pro své uživatele vytvořili co nejefektivnější drobečkovou navigaci.
Drobečková navigace má lineární strukturu, takže ji používejte pouze tehdy, pokud dává smysl vzhledem k hierarchii vašeho webu. Pokud máte stránky nižší úrovně, které jsou přístupné z různých vstupních stránek, použití drobečkové navigace pouze zmate čtenáře, kteří stále přistupují na stejné stránky z různých výchozích bodů. Navíc pokud je váš web relativně jednoduchý a má jen několik stránek, drobečkovou navigaci pravděpodobně nepotřebujete.
Drobečková navigace je sekundárním nástrojem k primárnímu navigačnímu panelu, takže by neměla být příliš velká nebo na stránce výrazná. Například na webových stránkách společnosti DHL je jejich primární navigační panel velký a rozpoznatelný, se sloupci jako „Express“ „Parcel & eCommerce“ „Logistics“ atd. Jejich drobečková navigace je menší část pod ní, která zní: „DHL Global | > Logistika | > Přeprava zboží“. Nechcete, aby si vaši uživatelé spletli drobečkovou navigaci s primárním navigačním panelem.
Na tuto vstupní stránku jsem se dostal přes Google „Elon University Non-Degree Students“, ale Elon je chytrý, že uvádí celou navigační cestu včetně „Home“ a „Admissions“. Pokud některé úrovně vynecháte, budete uživatele mást a drobečková cesta nebude působit tak užitečně. I kdyby uživatelé nezačali na domovské stránce, chcete jim poskytnout snadný způsob, jak prozkoumat váš web od začátku.
Postup od nejvyšší úrovně k nejnižší.
Je důležité, aby vaše drobečková navigace četla zleva doprava, přičemž nejbližší odkaz vlevo je domovská stránka a nejbližší odkaz vpravo je aktuální stránka uživatele. Studie společnosti Nielsen Norman Group zjistila, že uživatelé tráví 80 % času prohlížením levé poloviny stránky a 20 % prohlížením pravé poloviny, což je silný argument pro design zleva doprava. Navíc odkaz, který je nejblíže vlevo, se zobrazí jako začátek řetězce, takže chcete, aby to byla stránka nejvyšší úrovně.
Abyste předešli zmatkům, budete chtít zůstat konzistentní s názvy stránek a drobečkové navigace, zejména pokud se v těchto názvech zaměřujete na určitá klíčová slova. Chcete také jasně propojit názvy drobečkové navigace se stránkou. Pokud název drobečkové navigace neobsahuje odkaz, dejte to jasně najevo. Společnost Nestlé efektivně označuje své názvy drobečků tak, aby odpovídaly názvům stránek. Například „Oblasti dopadu & závazku“ se čte stejně v drobečkové navigaci jako na stránce.
Nestle také dobře rozlišuje odkazy od neodkazů pomocí různých barev – odkazy jsou modré, zatímco neodkazy zůstávají šedé.
Buďte kreativní s designem.
Tradiční drobečková navigace vypadá takto: Domů > O nás > Kariéra. Nemusíte se však držet tradiční cesty, pokud máte pocit, že by jiné provedení mohlo vaše publikum více oslovit nebo by na vašem webu vypadalo lépe.
Například společnost Target používá drobečkovou navigaci na svých produktových stránkách (protože kdo by se neztratil v sekci virtuálních bot?), ale používá symboly „/“ a jednoduchý černošedý text. V tomto případě má jemná designová variace smysl pro estetiku jejich webu.
Udržujte ji čistou a nepřeplněnou.
Drobečková navigace je pouze pomůcka pro uživatele a v ideálním případě by si jí neměl všimnout, pokud ji nehledá. Z tohoto důvodu nechcete drobečkovou navigaci zahlcovat zbytečným textem.
Eionet by se například mohl obejít bez svého textu „Jste zde“. Ačkoli má být tento text užitečný, zahlcuje stránku. Při správném návrhu by měla být drobečková navigace dostatečně nápadná i bez úvodu.
Existuje několik různých typů drobečkové navigace, které můžete použít – na základě umístění, na základě atributů a na základě historie. Drobečková navigace založená na umístění ukazuje uživateli, kde se v hierarchii webu nachází. Drobečky založené na atributech ukazují uživatelům, do které kategorie jejich stránka spadá. A konečně drobečková navigace založená na historii ukazuje uživatelům konkrétní cestu, po které se dostali na aktuální stránku.
Bed Bath & Beyond používá drobečkovou navigaci založenou na atributech, aby uživatelům ukázala, do které kategorie spadá jejich produktová stránka, takže uživatelé mohou kliknout zpět na „Kitchen“ nebo „Small Appliances“ a prohlédnout si podobné položky. Tento typ drobečkové navigace je pro zákazníky společnosti Bed Bath & Beyond nejefektivnější. Při vytváření drobečkové navigace zvažte, co je pro návštěvníky vašeho webu nejužitečnější.
Znáte své publikum.
Nejlepší postupy v drobečkové navigaci nabádají webdesignéry, aby navigaci umístili do horní části stránky – Apple, jedna z nejhodnotnějších společností všech dob, však tuto logiku popírá a drobečkovou navigaci umisťuje do spodní části svého webu. Nakonec je velmi důležité, abyste znali své publikum. Zákazníci společnosti Apple jsou obvykle technicky zdatní a v případě potřeby by navigaci pravděpodobně našli. Zvažte potřeby svých zákazníků, a pokud si nejste jisti, proveďte A/B testování.
Drobková navigace je nakonec účinný nástroj, který vám usnadní orientaci na webu, ale chcete dodržovat osvědčené postupy při navrhování, abyste zajistili využití užitečnosti tohoto nástroje. Další rady týkající se UX naleznete v publikaci „The Ultimate Guide to UX Design“.
