Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

6 základních stylů navigace

Marek Prokop, vydáno/aktualizováno: 3.12.2001/09.12.2001

Jak lze usoudit z množství souvisejících odkazů dole pod článkem, není to poprvé, kdy v Sově nacházíte článek o navigaci. Určitě to není ani naposled, neboť na celkovém návrhu stránek se navigace podílí nemalou měrou. Tentokrát jsem se však rozhodl pojednat téma jinak, než jak jste u mne asi zvyklí — nebudu vám radit, nebudu mentorovat, nebudu varovně vztyčovat prst. Místo toho vám nastíním stručný a jasný přehled šesti základních stylů navigace, které se na webových stránkách vyskytují.

Všechny dále uvedené styly lze použít samostatně (některé jen výjimečně), nebo v libovolných kombinacích. Všechny mají své výhody a nevýhody, na které krátce poukážu. Jakou navigaci však zvolíte pro své stránky, to už nechám na vás.

1. Hierarchická navigace

Bývá odvozena ze struktury webu, ať již skutečné, nebo jen logické. Stránky se člení do skupiny, skupiny do podskupin, poskupiny se mohou dále členit ve více úrovních. Tomuto členění odpovídá navigace. Na vstupní stránce uživatel nalezne seznam skupin, kliknutím na titulek skupiny dostane seznam příslušných podskupin, atd.

Konkrétní provedení může mít tradiční podobu, kterou znáte např. z Yahoo či Seznamu (dvou, či vícesloupcový seznam skupin/podskupin), nebo podobu modernějšího stromového menu (skupiny/podskupiny se postupně rozbalují a zobrazují jako složky v Průzkumníku Windows).

Druhá varianta má tu výhodu, že samo menu názorně ukazuje, kde se uživatel zrovna nachází. První variantu je vhodné doplnit o tzv. adresní, či navigační řádek ve stylu: Kořen > Skupina > Podskupina. Všechny položky tohoto řádkového seznamu s výjimkou poslední (nejvíc vpravo) pak slouží zároveň jako odkazy na vyšší úrovně.

Výhodou hierarchické navigace je její srozumitelnost a přehlednost i v případě velmi rozsáhlých webů. Zvláště pravidelní návštěvníci si strukturu rychle zapamatují a orientují se pak na takovém webu jako doma.

Nevýhodou je úzká svázanost se strukturou webu. Pokud ten nemá pevnou, logickou hierarchickou strukturu, bude uměle naroubované hierarchická navigace uživatele spíše mást. Nehodí se tedy pro velmi malé weby (s obvykle lineární strukturou) a weby s volným, spíše asociačním uspořádáním.

Další nevýhodou může být příliš dlouhá cesta z jedné větve webu do jiné. Pokud nejsou jednotlivé větve optimálně navrženy pro různé a relativně uzavřené skupiny uživatelů, bývá vhodné tuto nevýhodu kompenzovat kombinací s dalšími styly navigace, zejména s kontextovou navigací a s vyhledávačem.

2. Globální navigace

Zpřístupňuje všechny sekce/stránky celého webu naráz formou menu, které je stále viditelné. Nejčastější provedení využívá svislé menu v levém (či pravém) pruhu na okraji každé stránky, používá se však i vodorovné menu v záhlaví či v zápatí (často obojí) stránek. Velmi často se vyskytuje v kombinaci s rámci.

Místo, kde se uživatel právě nachází může být vyznačeno buď tím, že daná položka menu není v daném kontextu odkazem, nebo je nějak graficky zvýrazněna. Pokud je ovšem tento styl kombinován s jinými, může být takové zvýraznění značně zavádějící.

Vzhledem k omezenému rozsahu stále viditelného menu s se v čisté podobě používá pouze pro malé weby (cca. do 10 stránek). Mnohem častěji se kombinuje s dalšími styly navigace, např. slouží jako nejvyšší úroveň hierarchické navigace.

Základní nevýhoda již byla zmíněna — v čisté podobě pojme jen velmi málo, cca. 10 odkazů. To je ovšem zároveň i výhodou, neboť v přehlednosti tento styl jednoznačně kraluje. Pro velmi malé, konzervativně pojaté weby bývá často jedinou rozumnou volbou.

3. Lokální (kontextová) navigace

Lokální, neboli kontextové navigaci jsem už věnoval celý článek[2], takže jen stručně. Jedná se o krátký seznam odkazů umístěný obvykle pod hlavním textem stránky. Odkazy mívají popisné titulky a nabízejí uživateli směr dalšího postupu. V některých případech může mít i podobu malého svislého, či vodorovného menu kdesi nahoře na stránce.

Zvláštní variantou kontextové navigace jsou odkazy na další/předchozí stránku v určité pevně dané sekvenci. Používá se u delších, vícestránkových článků, sekvenčních prezentací (tzv. slideshow) a dlouhých, stránkovaných seznamů či tabulek (např. výpisů z databáze).

Kontextová navigace je ideální zejména pro nové návštěvníky, které tak lze provést "za ručičku" přímo k jejich cíli. Nevýhodou je nesystematičnost a nepřehlednost. Častým návštěvníkům tedy nijak výrazně nepomáhá k tomu, aby si web zapamatovali a dostali "do ruky". V úvahu je třeba vzít i pracnost návrhu — musíte velmi dobře vědět, co budou vaši návštěvníci hledat a jak to budou hledat.

Perfektní je v kombinaci se systematičtějším styly, zejména s hierarchickou navigací. Tímto způsobem lze vytvořit navigaci, která je paralelně vhodná jak pro nové, tak pro zkušené návštěvníky a navíc jí lze zkrátit některé často používané cesty napříč hierarchickou strukturou rozsáhlých webů.

4. Odkazy v textu

Odkazy volně roztroušené v textu jsou základem hypertextového konceptu a jako takové a tedy představují nejstarší model navigace na Internetu. Dnes se ovšem již jednoznačně jedná o styl pouze doplňkový.

Výhodou je přirozenost, s jakou lze uživateli nabídnout související či rozvíjející informace. Nevýhodou je anarchie a ztráta orientace, ke které vede nadměrné či nevhodné použití.

Sama o sobě tato navigace nenabízí žádnou informaci o tom, kde se návštěvník nachází. Nemá-li se proto návštěvník zcela ztratit, musí být buď kombinována s dalšími styly, nebo použita jen pro ty nejmenší weby (do 3-4 stránek).

5. Mapa webu

Mapa webu, neboli "site map", není vlastně nic jiného, než seznam všech stránek. Podle dovednosti tvůrců její grafické uspořádání lépe, či hůře vystihuje strukturu webu a významové souvislosti mezi stránkami.

Nevýhodou je nepřehlednost a pro skutečnou navigaci nízká použitelnost. Výhodou je všem vyčerpávající pohled na celý obsah webu, který skutečně ocení tak jeden uživatel z tisíce.

Podle mnoha průzkumů je nízká obliba map webu mezi uživateli srovnatelná snad jedině s nadšením, které jim věnují tvůrci zejména rozsáhlých webů. Osobně mám dokonce podezření, že webmasteři tvoří tyto mapy hlavně pro své nadřízené, aby ukázali, co všechno už na tom webu je.

Abych však webmasterům nekřivdil, mapa webu může ve skutečnosti pomoci právě jim, když už začínají zapomínat, co kde mají. Navíc se do ní dobře skryjí odkazy, které mají nalézt vyhledávače (a návštěvníci raději ne).

6. Lokální vyhledávač

Posledním modelem navigace je lokální (tj. omezený jen na daný web) vyhledávač. Obvykle funguje na principu fulltextového vyhledávaní, tj. hledá stránky obsahující zadaný text. V takovém případě je vhodné, aby byly výsledky prezentovány setříděné podle relevance (tj. míry vztahu k hledanému textu). U velkých webů pak je kvalita rozpoznání relevance (relavance ranking) alfou i omegou použitelnosti vyhledávače.

Specifické postavení mají vyhledávače zpřístupňující obsah, který je jinými prostředky nedostupný. To je časté u webů operujících nad rozsáhlou databází, ze které si uživatel vyhledávačem data vybírá podle určitých kritérií.

Klasický lokální fulltextový vyhledávač stojí obvykle spíše stranou zájmu běžných uživatelů a slouží tedy spíše jako doplněk pro fajnšmekry. Jeho hlavní výhodou je tedy poskytnutí maximálního komfortu zkušeným uživatelům, kteří tak získají z vašich stránek dobrý dojem (a občas i něco najdou). Další výhody jsou popsány v článku[7].

Závěr

Až budete příště navrhovat nové stránky, či se zamýšlet nad redesignem vašich stávajících, vzpomeňte si na těchto 6 základních modelů navigace. Sepište si je na papír, nebo si je promítněte v hlavě a zvažte, který z nich, či jaká jejich kombinace, nejlépe odpovídá vašemu cíli. Smysl tohoto článku tím bude naplněn.

Související odkazy

  1. Základy správné navigace
  2. Kontextová navigace
  3. Levostranná navigace - má opodstatnění?
  4. Jak na vyšší účinnost odkazů
  5. Navigace v rámcích pomocí JavaScriptu
  6. Javascript napříč okny prohlížeče
  7. Atomz - fulltextový vyhledávač pro vaše stránky

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.