Nejlepší postupy a příklady pro navigaci po chlebech

Při návrhu a vývoji je často přehlížena navigace s chlebem. Někteří lidé to mohou považovat za zbytečné, zatímco jiní se domnívají, že je to příliš velké problémy, co stojí za to. Faktem je, že navigace s chlebem výrazně zvýší použitelnost webové stránky.

Drobečková navigace dávají uživatelům alternativní metodu navigace, umožňují jim zjistit, kde stojí v hierarchii webových stránek, a sníží počet kroků potřebných k přechodu na vyšší úroveň v rámci webové stránky..

Zde jsou popsány různé typy navigace s chlebem, které jsou dnes používány, proč jsou důležité a jak by měly být nejlépe implementovány online. Zahrnuty jsou zde také vaše reference více než 30 příkladů, jak jsou dnes strouhanky používány online.

Nezapomeňte, že i když je pravděpodobné, že webová navigace nevytvoří nebo nezlomí webové stránky, bude to pro uživatele přínosem tím, že zvýší celkovou použitelnost a funkčnost webových stránek.

Druhy chleba

Cesta

Cesta založená na cestě označuje kroky nebo cestu, kterou uživatel přijal, aby se dostal na aktuální stránku webové stránky. Uživatelé navíc uvidí odkazy na stránky, které dříve navštívili, aby se dostali na aktuální stránku. Z těchto tří druhů navigace s trnovkou je navigace na trase založená na trase nejméně populární online. Důvod je v tom, že navigační cesta založená na cestě poskytuje podobnou funkcionalitu “Vpřed” a “Zadní” tlačítka v prohlížeči. Pro většinu webových stránek nabízí navigace na místě založená na atributech a atributech založená na atributech lepší funkčnost.

Umístění

Lokátorka založená na poloze označuje uživateli, kde aktuální stránka stojí v hierarchii webu. Tento typ navigace s chlebem je nejčastěji zobrazován na webových stránkách s více než dvěma úrovněmi hloubky nebo obsahu. Po přesunu dále do stránek jsou uživatelům poskytnuty odkazy na stránky nebo kategorie, které fungují jako “rodič” nebo o úroveň výš od stránky, kterou právě prohlíží. Uživatel může být například na “Mluvit” stránka, nicméně “Co děláme” stránka je rodičem “Mluvit” stránku, zatímco “Domov” stránka je rodičem “Co děláme” stránka.

Clearleft Ltd

Atribut

Objekty založené na atributech označují uživateli atributy nebo kategorie přiřazené aktuální stránce v rámci webové stránky. Na webových stránkách elektronického obchodu se často produkty nemusí dostat pouze do kategorie, nýbrž také pod určitými atributy. Například, vozidlo může být kategorizováno jako SUV, pak mají atributy, že jsou černé a uvolněné v roce 2010.

Cars.com

Proč používat strouhanku?

• Velká použitelnost

  Drobečková navigace poskytuje další prostředky, pomocí kterých mohou uživatelé snadno procházet webovou stránku. Pokud uživatel přistane na interní stránce na vašich webových stránkách z jiného zdroje, umožní uživateli přesně zjistit, kde stojí v hierarchii webu. Uživatel má také možnost přesunout se na vyšší úroveň webové stránky v libovolném čase bez jakýchkoliv potíží.

• Snadné Backtrack

  Primární navigace nejsou navrženy tak, aby byly sledovány směrem dozadu. Vzhledem k tomu, backtracking je velmi populární on-line poskytuje trochu další pomoc může jít dlouhou cestu.

• Odstraňte další kliknutí

  Drobečková navigace umožňuje uživatelům přeskočit z jedné úrovně webové stránky na druhou, aniž by museli používat “vpřed” nebo “dozadu” v prohlížeči. Navíc strouhanka eliminuje potřebu, aby se uživatelé neustále uchýlili k hlavní navigaci.

• Zobrazuje hierarchii uživatelů

  Primární navigace na webu neodráží hierarchii každé stránky v rámci webu. Umožnění uživatelům, aby si střídali uživatele, umožní jim zobrazit hierarchii stránky v rámci webové stránky.

• Vizuálně Potěšující

  Nejen, že strouhanka poskytuje uživatelům další použitelnost, dělají tak, aniž by zabírali mnoho místa nebo místa na stránce. Drobečková navigace se snadno implementuje do vizuálního designu vašich webových stránek a poskytuje uživatelům velký užitek.

• Poskytuje další nápovědu

  Je zcela možné, že někteří uživatelé nemusí pochopit, jak funguje primární navigace na webu a v některých případech nemusí uživatelé ani vědět, co hledají. Umožnění uživatelům zobrazovat celkový pokrok a strukturu webových stránek, což jim umožní lépe se orientovat na webových stránkách..

• Nižší odskoky

  Typicky bude strouhanka poskytovat podrobnější navigaci než primární navigace. Uživatelé tak získají více možností, jak procházet webovou stránku. Dává jim možnost snadno sledovat několik úrovní v rámci webových stránek sníží míru odchodů.

• Staví zájem

  Když uživatel přistane na interní stránce kurzů webových stránek, jsou již na stránce zájmu. Drobečková navigace může poskytnout odkazy na další stránky a informace, o něž se uživatel také zajímá, aniž by je začal z náměstí.

Breadcrumb Best Practices

• Použijte Drobeček v horní části stránky

  Nejčastější a instinktivní umístění pro strouhanku je v horní části stránky. To umožňuje uživatelům najít strouhanku nekomplikovaným způsobem a využít je odpovídajícím způsobem.

• Používejte hrudky konzistentně

  Pokud se rozhodnete použít strouhanku, ujistěte se, že je používáte na celé webové stránce. Dávat uživatelům chleba na některých stránkách a nikoliv na jiných stránkách je jen zmást a zmařit. (Jedním z hlavních příkladů je Amazon, protože odstraňují strouhanky z jednotlivých stránek produktu.)

• Drobečková navigace by měla ladně ladit

  Drobečková navigace by měla vždy začínat na domovské stránce a degradovat na aktuálně zobrazenou stránku. Při tom musí vaše strouhanka přecházet z nejvyšší úrovně na nejnižší úroveň po jednom kroku.

• Stylizujte pečivo správně

  Chcete, aby vaše strouhanka byla vidět, ale nechcete, aby byly ústředním bodem. Také chcete, aby bylo zřejmé, že vaše strouhanka není součástí hlavního obsahu stránky, ale pouze další podpora. Najděte si šťastné médium, kde je vaše strouhanka znatelná, ale není příliš vysoká.

• Kategorizace stránek Jasně

  Pokud máte stránky, které spadají do dvou nebo více kategorií, možná nebudete chtít na svých webových stránkách používat strouhanku. Pokus o umístění stránky do dvou nebo více kategorií bude pravděpodobně produkovat pouze nejasné strouhanky a puzzle uživatele. Ujistěte se, že vaše webové stránky mají organizovanou hierarchii a jsou zobrazeny odpovídajícím způsobem prostřednictvím vaší strouhanky.

• Jasně oddělte každou úroveň

  Ujistěte se, že uživatelé jsou schopni rozlišit rozdíl mezi jednotlivými úrovněmi strouhanky. Nejběžnějším oddělovačem mezi úrovněmi je znak „větší než“ (>). Mezi další dobré oddělovače patří pravý dvojitý úhel (»), lomítka (/) a šipky (→). Pokud používáte znak prostého textu, použijte pouze jeden znak. (»Je přitažlivější a efektivnější než >>)

• Single Out Aktuální stránka

  Použijte jiný styl na poslední položce seznamu strouhanek, abyste zjistili, že se jedná o právě prohlíženou stránku. Toho můžete dosáhnout provedením položky tučně, změna barvy, nebo zdůrazňující to.

• Neprovádět aktuální stránku a odkaz

  Není třeba, aby poslední položka seznamu strouhanky obsahovala odkaz, protože se jedná o právě prohlíženou stránku. Vytvoření odkazu zde bude pouze zmást uživatele, zejména když na něj kliknou a nebudou převezeni na novou stránku.

• Nepoužívejte Drobeček jako nadpis stránky

  Používání poslední položky seznamu střídačů jako záhlaví aktuální stránky je neúčinné. Pokud se rozhodnete použít strouhanku, udělejte to s přidáním nadpisu stránky.

• Drobečková navigace Nenahrazuje primární navigaci

  Drobečková navigace se používá pouze jako podpora primární navigace, nikdy nenahrazuje primární navigaci úplně. Měli byste vždy poskytnout uživatelům primární navigaci, ze které mohou procházet webovou stránku, než začnou používat navigaci s posunem.

Skvělé příklady chleba

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia a Maggie

Intridea

Design lidí

Roxy

Blik

SitePoint

cílová

Walmart

1-800-Květiny

Nejlepší nákup

Amazon.com

Stodoly & Noble

Konec země

Jablko

Google

Pronásledovat

AbsolutePunk.net

Osvětlení

Guardian.co.uk

OBLAST 17

Wufoo

Skautky středního Tennessee

Kolektiv Glasgow

Prvorozený

Bell Canada

Grooveshark

Devlounge

O autorovi - Shay Howe je profesionální webový a uživatelský návrhář v současnosti žijící v Chicagu, IL. On píše o web design ve svém vlastním blogu na na letištích a rád by slyšel od vás na Twitteru. Prosím, neváhejte mu říct ahoj!