Co je třeba vědět o navigaci

Nacházíte se zde: Novinky » Články » Co je třeba vědět o navigaci

Úvod

Navigace je základním stavebním kamenem každé webové prezentace. Je-li navigace dobrá, umožňuje návštěvníkovi rychlou orientaci v obsahu, snáze prochází jednotlivými úrovněmi, jednodušeji nachází hledané informace.

Je-li navigace špatná, uživatel tápe — v lepší případě mu hledání zabere delší dobu, v horším případě se poohlédne po alternativách. Ať tak nebo tak, ve výsledku má z webu špatný dojem.

Obsah

Základy kvalitní navigace

Typologie navigace

Čeho se vyvarovat

Co mít na paměti

Základy kvalitní navigace

Stálost navigace

Návštěvník od navigace očekává její stálost. I pokud se kliknutím přesune přes několik úrovní, stále očekává, že základní navigace bude tam, kde byla předtím. Vyjímky jsou pouze dvě — úvodní stránka a stránka s objednávkovým formulářem. Úvodní stránka má svá specifika a proto může být základní navigace provedena odlišně (dle mého názoru je ale lépe, pokud je i zde stejná).

U stránky s objednávkou uděláte lépe, pokud nebudete uživatele nijak rozptylovat. Veškerou navigaci shrňte pouze pod odkaz „zpět“. Sice to sem nepatří, ale vyvarujte se i reklamních bannerů a další spolehlivých rušičů pozornosti — ve vlastní zájmu.

Pružnost navigace

Pružností navigace se míní její přizpůsobení aktuálním požadavkům. Týká se to především vyššího „zanoření“ v obsahu. Navigaci proto uzpůsobte i pro nižší úrovně (2., 3. atd.):

Jakmile se na mnoha serverech dostanete pod druhou úroveň, navigace se zhroutí a stane se z ní navigace ad hoc. Proč k tomu dochází? Myslím že proto, že dobrou víceúrovňovou navigaci je vůbec těžké vymyslet — vzhledem k omezenému místu na stránce a počtu položek, které je nutné sem vměstnat. Dalším důvodem je, že designéři zpravidla nemají dostatek času pořádně promyslet ani první dvě úrovně.

Steve Krug, „Nenuťte uživatele přemýšlet“, str. 51

Typologie navigace

Základní (všeobecná)

Základní typ navigace obsahuje 95% webů. Nejčastější provedení bývá vertikální panel, u kratších seznamů horizontální pruh. Pro vertikální panel platí, že jej návštěvník intuitivně očekává po levé straně (umístění po pravé straně však rozhodně není chybou, schválně si přečtěte Levostranná navigace -- má opodstatnění? (Martin Kopta, Sova v síti, 24.5.2003)). Co se organizace týče, menší počet odkazů řaďte podle jejich důležitosti, u delších seznamů použijte abecední řazení (viz např. web World Wide Web Consortium).

Mějte na paměti, že základní navigace je nejdůležitějším prvkem pro orientaci na webu, nenechte ji „zapadnout“.

Panel s povedenou navigací, na stránce televize CNN
www.cnn.com — ukázka zdařilé navigace. Všechny významné rubriky jsou v horní části stránky umístěné ve zvýrazněném panelu. Zřetelně je odlišena aktuální sekce.

Hierarchická (stromová)

Tento typ navigace se používá výhradně v katalozích (např. Seznam), princip je zřejmý — obecné rubriky se dělí na konkrétnější a ty se postupným procházením jednotlivých úrovní neustále upřesňují (např. Automobily » Osobní » Evropské » BMW apod.).

Výhoda této navigace spočívá v její intuitivnosti. Nevýhoda spočívá v tom, že daný odkaz může být svým významem ve více rubrikách najednou (je potřeba to ošetřit), rovněž je nevýhodou velký počet podsekcí (delší načítání, velké zanoření » větší pravděpodobnost svedení na špatnou větev).

Pro malé a střední weby nemá tato navigace význam.

Kontextová (doplňková)

Z názvu vyplývá, že obsah této navigace se mění vzhledem k obsahu dané stránky. Časté provedení bývá ve formě tzv. „relevantních“ článků — tedy odkazů, které se vztahují k danému tématu a doplňují jej, nebo prostě s tématem souvisí.

Pod doplňkovou navigaci spadá i tzv. „drobečková“ navigace (angl. Breadcrumb Navigation). Jedná se o odkazy v řádku (95% řešení), ukazující titulky nadřazených sekcí, kterými jste prošli/nebo je přeskočili např. Automobily » Osobní » Evropské » BMW. V praxi používá drobečkovou navigaci cca 45% větších webů.

Drobečková navigace má význam opět jen u stránek s větším počtem úrovní (alespoň 3). Její zpracování by mělo vypadat nějak takto:

Nacházíte se zde: Automobily » Osobní » Evropské

Ukázka drobečkové navigace na stránkách firmy FranklinCovey
www.franklincovey.com — drobečky na svém místě.

Důležité jsou dvě věci, tou první je separátor — oddělovač, použijte šipku (přejedete-li okem po řádku, názorně zobrazuje procházení strukturou). Nepoužívejte dvojtečku, tím méně pak svislou čárou, naprosto tím popřete celý význam — z drobečkové navigace se rázem stane navigace základní!

Podle studie Breadcrumb Navigation (Web Design Practices), provedené na 75 amerických webech, se šipka, jakožto oddělovač používá v 65% případů.

Druhá důležitá věc je zvýraznění poslední položky (aktuální stránky), použijte nejlépe změnu šířky (font-weight:bold, či lépe strong) a hlavně pamatujte na to, že tato položka nesmí fungovat jako odkaz! Malou poznámku si zaslouží také úvod před drobečky, použijte frázi typu: „Zde se nacházíte“ apod.

Aby drobečková navigace měla smysl, umístěte ji co nejblíže začátku stránky.

Pod doplňkovou navigaci dle mého názoru patří i navigace pomocí elementu link, tento element je ve specifikacích HTML již od verze 4.01, přesto jej za tu dobu implementovaly pouze alternativní prohlížeče (Mozilla, Opera) — škoda, z toho důvodu mu zde nebudu věnovat větší pozornost. (Navigace pomocí elementu link Jan Dudek, Interval, 14.5.2003)

Mapa webu (angl. Site Map)

Někde jsem kdysi četl vtipnou poznámku, že mapu webu dělají webmasteři pro své nadřízené, aby viděli, jak velký už ten jejich web je. Ačkoliv to bylo myšleno s nadsázkou, určitě to tak není. Význam mapy webu je často podceňovaný, pro zoufalého návštěvníka tápajícího v „útrobách“ webu je však mnohdy poslední nadějí.

Úkol mapy webu je zprostředkovat návštěvníkovi vizuální pohled na strukturu celého webu. Rychle by se tak měl dozvědět, pod jakou rubrikou se hledaná stránka nachází. Stránka s mapou webu by měla být co nejjednodušší — co nejvíce textová.

Mapa webu nemá význam pro stránky s malým rozsahem a jednoduchou strukturou (malý počet sekcí, málo úrovní), Odkaz na ni se často umisťuje do patičky stránky.

Přečtěte si Site Map Usability (Jakob Nielsen, useit, 6.1.2002).

Rejstřík (angl. Site Index)

Rejstřík má obdobnou funkci (i zpracování), jako mapa webu, liší se jen v tom, že řadí odkazy abecedně. Nebere tedy v potaz strukturu webu. Jedná se pouze o mechanický seznam odkazů.

Přečtěte si Sitemaps and Site Indexes: What They Are and Why You Should Have Them (Chiara Fox, Boxes and Arrows, 8.9.2003).

Interní vyhledávač

Různé testy často dokazují, že se na internetu pohybuje skupina uživatelů (tzv. „hledači“), kteří základní navigaci zcela ignorují a ihned po vstupu na stránku hledají „něco, kam se dát psát“, aby zadali vyhledávací dotaz. Pro tuto část uživatelů (a nejen pro ni) je neodpustitelná absence interního vyhledavače.

Vyhledávání má opět smysl pro větší weby. Co se umístění vyhledávacího formuláře týče, klasicky má své místo v horní polovině stránky, nejlépe vpravo.

Důležitější, než umístění bývá ale zpracování, šířka vstupního pole by měla být alespoň 15-20 znaků (u fulltextových vyhledávačů samozřejmě více). Před vstupní pole nemusíte psát zprávu: „Vyhledávání:“ apod. — bohatě postačí strohá úprava — vstupní pole a tlačítko s nápisem „Hledat“.

Zpravodajství zpravy.idnes.cz, po vyhledávacím poli ani památky
zpravy.idnes.cz — ukázka špatně umístěného vyhledávacího formuláře.
Vstupní pole je daleko pod ohybem stránky (i při rozlišení 1024x768).
Na obrázek se bohužel nevešlo.

Odkazy v textu

Nejjednodušší formou webové navigace je prostý odkaz, umístěný v textu (tzv. „hyperlink“). Jeho význam vyvstává ze samotné podstaty World Wide Web — provázání dokumentů tak, aby mezi nimi bylo možné jednoduše přecházet.

Z řady hledisek (např. optimalizace pro vyhledavače) je tvorba promyšlených odkazů nesmírně důležitá. Nejzákladnější rady v tomto směru jsou, používejte jasná a nezaměnitelná slova. Nepoužívejte odkazy, které sami o sobě nemají žádnou informační hodnotu (do textu odkazů nepatří slova: „kliknutím“, „zde“ apod.). Nemíchejte v jednom menu slova v češtině a angličtině — používejte české ekvivalenty (např. Guestbook = kniha návštěv apod.).

Snažte se dodržovat přiměřenou délku odkazů, příliš dlouhé odkazy nikdo nečte, na příliš krátké nikdo nekliká (není zřejmé, co daná stránka nabízí).

Panel aktuality ze serveru Novinky neodlišuje barevně odkazy a text
www.novinky.cz — Panel „Aktuálně“ u Novinek neodlišuje text a odkazy.
Že se jedná o odkaz poznáte až když přejedete kurzorem. Forma vítězí nad funkcí…

Odlište barevně odkazy od okolního textu, jinou barvu použijte pro navštívené a nenavštívené odkazy.

Čeho se vyvarovat

Proč jsou rozbalovací menu špatná

Rozbalovací menu (příkazy select a option) mají jednu velkou výhodu (a zřejmě proto jsou u některých tvůrců oblíbené), lze totiž pomocí nich ušetřit hodně prostoru. Z mnoha hledisek přístupnosti jsou však zavržení hodné:

Pro čtenáře, kteří musejí používat pomocné technologie (např. screen-reader), je tato nabídka většinou nedostupná proto, že ten objekt stránky, na který je nutno klepnout myší pro jeho rozbalení nabídky, se nijak navenek netváří jako takto aktivní prvek.
Zdroj: Blind Friendly Web: Dokumentace zásad přístupnosti

Z citátu je patrné, že pro nevidomé čtenáře, používající čtečky (tzv. „screen-readery“) jsou rozbalovací nabídky nepřístupné.

800Flowers.com, polovina navigace je v rozbalovacím poli
www.800flowers.com — polovina navigace řešena obrázkovými odkazy, druhá polovina shrnuta do rozbalovacího menu — důvod je jasný, nedostatek místa na stránce.

Proč jsou JavaScriptové odkazy špatné

JavaScript je v mnoha ohledech velice užitečná technologie. Její účelné využití však končí u kontroly formulářů a funkcí, které nemají na funkčnost dokumentu vliv — je tedy jasné, že pro odkazy jsou nepoužitelný.

JavaScript má nevýhodu v tom, že lze pomocí prohlížeče zakázat (z bezpečnostních důvodů), prvky na něm závislé tak mohou být rázem nefunkční (v lepším případě omezené). Vyvarujte se proto otevírání odkazů do nových oken pomocí window.open.

Proč jsou image-mapy a obrázkové odkazy špatné

Móda grafických orgií, kdy se i odkaz na e-mail dělal obrázkem (dnes se to dělá spíš kvůli spam-robotům) již doufám pominula, přesto se často pro odkazy používají grafické prvky (obrázky, nebo tzv. „image-mapy“). Toto řešení nezavrhuji (třebaže mám mnohem raději prvky nesoucí informaci, v textové podobě), důležité je však neopomenout doplnit obrázky o atributy alt a title (title se týká i odkazů), které alternují jejich obsah pro prohlížeče s vypnutým zobrazováním grafiky, nebo již zmíněné čtečky obrazovky.

Jak na to, jsem již popisoval ve svém článku Odlišení významu atributů alt a title.

Co mít na paměti

Logo odkazuje na úvodní stránku

Je nepsaným pravidlem (v kruzích webdesignérských však již dávno uznávaným), že logo (zpravidla umístěné vlevo nahoře) funguje zároveň jako odkaz na úvodní stránku. Těžko říct, kde se tato „tradice“ vzala, ale uživatelé si prostě zvykli na tento „intuitivní klik“ — mějte to na paměti. Znám odborníky, kteří absenci klikacího loga berou jako významnou chybu (a mají pravdu).

Logo firmy Quicken obsahuje malým písmenem ještě podtitulek HOME
www.quicken.com — logo na každé podstránce obsahuje ještě malý text „HOME“

Vhodná URL vypovídá o struktuře

Vhodná URL dokumentu napovídá mnohé o struktuře webu. Pro svůj weblog používám formát weblog/rok/mesic/prispevek — zkušenější uživatel se tak může zorientovat i podle adresy dokumentu.

Zkuste si malý test, porovnejte adresy a zkuste určit, kdy článek vyšel a na jaké téma je (adresy jsou plně funkční, nejedná se o imaginární příklady):

http://www.sptimes.com/2003/12/15/Worldandnation/Mad_about_meat.shtml
http://www.mb.com.ph/news.php?art=44363&sect=1&fname=MN03122544363h.txt

U dynamicky generovaných prezentací je udržení hezké URL obtížnější, ale ne nemožné. Přečtěte si How to Succeed With URLs (Till Quack, A List Apart, 12.10.2001). Zajímavé povídání o URL napsal také Chris Neppers: Making URLs clean up their Act (Usability News, 17.5.2003).

Stránka nesmí odkazovat sama na sebe

Navrhnout dokonalou navigaci je složité. U velkých webů to může trvat týdny, u malých několik hodin (až dní). Pokud chcete „vychytat“ svou navigaci k dokonalosti, pamatujte na to, že žádný aktivní odkaz by neměl vést na stránku samotnou — jednoduše řečeno, stránka by neměla odkazovat sama na sebe (týká se to zejména drobečkové navigace, kde je to jedna z nejčastějších chyb, na kterou se nachytávají weby bez rozdílu velikosti — zkuste třeba About.com Webdesign, drobečková navigace je v pravém horním rohu).

Více o tomto tématu: The Ten Most Violated Homepage Design Guidelines (Jakob Nielsen, useit, 10.11.2003), bod 10.

Ošetřete chybovou stránku 404: Stránka nenalezena

Propracovaná navigace počítá i s omyly, jedním takovým omylem je nenalezení stránky, příčin může být několik:

  1. Stránka byla přemístěna
  2. Uživatel zadal chybnou URL
  3. Technická závada na serveru

Pokud se uživatel dostane na chybovou stránku, nemělo by to pro něj znamenat konec. Navigace musí myslet i na tyto případy. Přečetl jsem na toto téma několik článků (doporučuji Useful "Page not found" error pages (Madhu Menon, Evolt, 18.12.2000)) a podle nich sestavil několik bodů:

Pes Pluto na chybové stránce Disneyho
www.disney.com — povedená „čtyřistačtyřka“. Mladí návštěvníci
jistě lépe pochopí význam obrázku, než zprávy 404…

  1. Nepřesměrovávejte uživatele automaticky na hlavní stránku.
  2. Zobrazte přátelštější chybovou hlášku, neomezte se na strohé: „Page Not Found“.
  3. Umístěte na chybovou stránku vyhledávač.
  4. Přidejte kontaktní email nebo formulář na webmastera (uživatelé rádi spolupracují a s ochotou hlásí chyby, tak toho využijte).
  5. Umístěte odkazy na nejdůležitější části webu (úvodní stránka, nejžádanější rubriky, mapa webu apod.)

Moje „čtyřistačtyřka“

Jak vypadá ideální navigace?

Nikdo ji přesně nedefinoval (a mnozí se domnívají, že ani neexistuje), na internetu je však k vidění celá řada propracovaných navigací (stejně tak jako odfláknutých zmetků). Můj ideál je (alespoň co se rozmístění týče) jasně daný (jedná se o návrh pro zpravodajský web, pro katalog by se asi nehodil ;-):

  1. Hlavní navigace v levém vertikálním panelu, plně textová
  2. Dostatečně široký vyhledávací formulář vpravo nahoře
  3. Drobečková navigace hned pod titulkem stránky (nebo článku)
  4. Relevantní odkazy na konci obsahové části
  5. Odkaz na mapu webu v zápatí

Vloženo: 1.1.2004, aktualizováno: 18.1.2004


Copyright © 2004 Vít Dlouhý, Všechna práva vyhrazena ®
XHTML 1.1, CSS 2.1, Dogma W4