Drobečková navigace. Co, proč, jak?

1. 2. 2011

Poslední lednový den jsem dokončila web pro jednoho klienta. Struktura webu nebyla na samém počátku přesně daná, takže jsem na web již ze zvyku umístila drobečkovou navigaci. Nakonec až připomínka kolegy mě po finálním dokončení upozornila, že web má jen 2 úrovně a celkem 8 stránek, na což žádná podpůrná navigace potřeba není. Přimělo mě to k zamyšlení na téma co to vlastně drobečková navigace je a proč a jak jí používat...

Perníková chaloupka

Nebudu vám zde vyprávět pohádku o Perníkové chaloupce, protože tu z dětství asi všichni dobře znáte. U nás se však často vypráví ta verze pohádky, ve které Jeníček vyleze na strom a v dálce uvidí světýlko.

Na našem území méně známá verze pohádky vypráví o tom, že když tatínek vedl Jeníčka a Mařenku do lesa, Jeníček cestou drobil svůj bochník chleba, aby pak s Mařenkou našli cestu zpět.

A právě odtud, ze sypání drobečků po cestě, prý vznikl název této navigace.

Drobečky dle Instona

Pojem drobečkové navigace (případně drobečkové nápovědy) definoval Keith Instone, který také určil její tři typy. Každý typ této navigace popisuje rozdílné jinou situaci v závislosti na charakteristice webu.

  • Drobečky pozice (angl. location breadcrumbs) znázorňují pozici aktuální stránky v hierarchii webu nezávisle na cestě, kterou se na danou stránku návštěvník dostal. Tento typ drobečkové navigace je používán například na tomto webu.
  • Drobečky cesty (angl. path breadcrumbs) ukazují cestu, kterou se uživatel dostal na aktuální stránku. Stejný obsah webu tedy může mít různé drobečky, protože každý návštěvník mohl přijít jinou cestou.
  • Drobečky vlastností (angl. atribute breadcrumbs) nesou základní informace o produktu, jako je například značka, předmět, kategorie nebo cena. Používá se často v e-shopech.

V této podobě jsem Keitha Instona citovala již ve své bakalářské i diplomové práci.

Co to vlastně je?

  • způsob znázornění hierarchie webu
  • způsob zobrazení aktuální cesty na hlavní stránku
  • způsob znázornění aktuální pozice na webu
  • způsob zachycení historie
  • navigační prvek webu
  • „odkazovník“ na stránky umístěné v hierarchii nad aktuálně zobrazenou stránkou
  • možnost rychle se přesunout na některou stránku v hierarchii
  • možnost usnadnit pohyb po webu
  • alternativa k tlačítku „zpět“

...vše pochopitelně v závislosti na typu drobečkové navigace.

Proč je to důležité?

  • aby uživatel věděl, na jaké stránce v hierarchii webu se právě nachází
  • aby uživatel věděl, přes které stránky na zobrazenou stránku přišel
  • aby se uživatel neztratil
  • aby se uživatel rychle zorientoval, pokud se na vnořenou stránku webu dostane z výsledků vyhledávání

Jak začít?

Možností je pochopitelně mnoho a o tom, která varianta je nejlepší, bychom se mohli jen dlouze přít. Je zřejmé, že drobečkovou navigaci uplatníme jen na webech členitých a s opravdu dobrou hierarchickou strukturou.

Zažitým pravidlem je však zřejmě jen to, že poslední položka navigace nemá být odkazem. Stránka totiž nemá odkazovat sama na sebe a to jednak z pohledu SEO a také proto, že to mate uživatele.

Při tvorbě drobečkové navigace se naskýtá několik otázek a odpovědi na ně si většinou musíte najít sami:

  • Kam navigaci umístit? Nejčastější je to v horní části stránky pod záhlavím nebo horizontální navigací, ale stejně tak může být umístěna v dolní části stránky.
  • V jakém tvaru má být první odkaz navigace a který je lepší (třeba z hlediska SEO)? Je lepší například "Hlavní strana > Blog > 2010 - listopad > Klíčová slova pražských hotelů" nebo "Elsnerova.cz > Blog > 2010 - listopad > Klíčová slova pražských hotelů"?
  • Jaký má být oddělovník jednotlivých úrovní?

Jak to řešit?

Systémy pro správu obsahu (content management systém, CMS) nebo chcete-li redakční systémy jako je Drupal, Joomla nebo WordPress umí drobečkovou navigaci vygenerovat a je to tedy „bez práce“.

Jinak bychom měli řešit tento typ navigace pomocí seznamu. Často se používá seznam nečíslovaný (a dělám to tak i já), ale ten není příliš vhodný, protože jednotlivé položky navigace staví na stejnou úroveň a neznázorňuje nadřazenost a podřazenost.

Příklad mého řešení na jednom ze statických webů:



Komentáře

  1. Hlavní strana
  2. Blog
  3. 2011 - únor
  4. Drobečková navigace. Co, proč, jak?