Navigace na webových stránkách Tato kapitola navazuje na kapitoly o přístupnosti, použitelnosti a optimalizaci webových stránek a podrobněji popisuje tvorbu informační architektury webových stránek, zejména problematiku navigace. Vhodně navržená architektura webu, realizovaná pomocí vhodných navigačních prvků je základem uživatelsky přístupného webu. Klíčové pojmy: Informační architektura, navigační prvek, stromová struktura webu, základní navigace, globální a lokální navigace, záložky, rozbalovací menu, drobečková navigace, kontextová navigace, mapa stránek.
Informační architektura Informační architektura je obor zabývající se designem a organizací informačních systémů s cílem zjednodušit a zpřístupnit informace. Uplatňuje se všude tam, kde je zapotřebí zpracovávat, třídit, vyhledávat a prezentovat informace. Významné místo tedy má i při tvorbě webových stránek, kde je budování informační architektury začleněno do tvorby navigačního systému. Hlavními úkoly informační architektury webu jsou: Návrh hierarchie informací na webu (tzv. taxonomie webu) Rozdělení informací na jednotlivé stránky (struktura webu) Návrh vztahů mezi jednotlivými stránkami (vytváření odkazů – linků) Nalezení nejvhodnějších názvů celků, kapitol, stránek Návrh uspořádání informací na jednotlivých stránkách Nalezení vhodných způsobů navigace a její začlenění do jednotlivých stránek Případné umístění fulltextového vyhledávání na webu Návrh uspořádání jednotlivých prvků stránek (layout) Z vyjmenovaných úkolů je jasné, že informační architektura úzce souvisí s jednotlivými kroky při tvorbě webu, tedy s grafickým návrhem, copywritingem, optimalizací, a také s vlastnostmi webu jako je použitelnost a přístupnost.
Význam navigace Průzkumy a statistiky přístupů ukazují, že přehledná a jednoduchá navigace webových stránek je jedním z nejdůležitějších faktorů, které rozhodují o tom, zda uživatel na navštívené (např. nalezené) stránce zůstane nebo ji opustí. Je-li pro
9.5.2012
Navigace
1
uživatele příliš složité, nalézt na webu to, co hledal, nepokusí se většinou nalézt informaci ani s využitím dostupného fulltextového vyhledávání a stránku opouští. Pomocí navigace by si měl uživatel být schopen vytvořit již předem úsudek o základní struktuře stránek, navigace by měla v každém okamžiku umožnit uživateli přejít na jiné místo ve struktuře a zároveň uživatele informovat, kde se právě nachází. Při vytváření informační architektury webu musíme vycházet z potřeb a požadavků uživatelů. Čím více se přiblížíme způsobu, jakým se uživatel na našich stránkách pohybuje, tím lepší navigační systém jsme vytvořili. Nejúspěšnější webové stránky respektují a vycházejí z běžného chování uživatelů na webu, rychle se načítají a poskytují variabilní, mnohonásobné cesty k téže informaci. Navigace na webu by měla splňovat tyto základní úkoly: Pomoci uživateli najít požadovanou informaci Poskytovat uživateli informaci, kde s právě nachází a jak může pokračovat Poskytovat uživateli zpětnou vazbu Nepřekvapovat a nemást uživatele Pomoci uživateli vstřebat z webu co nejvíce informací Měla by být stálá a přitom pružná – zůstávat stále na stejném místě a přitom se přizpůsobit aktuálnímu stavu zobrazení Základní požadavky, které by měla navigace na webových stránkách splňovat jsou shrnuty v Pravidlech přístupnosti webových stránek v položkách Kapitoly D: Navigace musí být srozumitelná a konzistentní a na všech webových stránkách (orgánu veřejné správy) obdobná. Od ostatního obsahu webové stránky musí být zřetelně oddělena. Každá webová stránka (kromě úvodní webové stránky) musí obsahovat odkaz na vyšší úroveň v hierarchii webových stránek a odkaz na úvodní webovou stránku. Pokud se jedná o rozsáhlejší webové stránky, musí být kromě navigace k dispozici rovněž vyhledávání nebo odkaz na mapu webových stránek. Odkaz na mapu webových stránek nebo vyhledávací formulář musí být k dispozici na každé webové stránce. Každá webová stránka musí mít výstižný název odpovídající jejímu obsahu. Každý formulářový prvek musí mít popisek vystihující požadovaný obsah. Jak již bylo několikrát zmíněno, tato pravidla jsou povinná pouze pro orgány veřejné správy. Pokud však chceme vytvořit kvalitní a uživatelsky příjemný web, je více než vhodné tato pravidla dodržovat. Chceme-li si ověřit, zda navigace našich stránek splňuje pravidla přístupnosti, stačí si vyzkoušet jejich ovládání za ztížených podmínek. Natočíme-li monitor proti slunci, můžeme zjistit, zda jsou jednotlivé položky navigace bez problémů čitelné i za zhoršených světelných podmínek, zvětšením velikosti písma pomocí prohlížeče 9.5.2012
Navigace
2
můžeme zjistit, zda je písmo čitelné i při zvětšení a zda navigační panely v tomto případě nepřesahují šířku monitoru. Po odpojení myši můžeme vyzkoušet, zda je navigace bez problémů přístupná pomocí klávesnice (tabulátor, šipky), zda pomocí klávesnice můžeme ovládat rozbalovací menu, zda se snadno pomocí klávesnice dostaneme na odkazy na stránce, na údaje v zápatí stránky atd. Na závěr můžeme pomocí mobilního telefonu, PDA nebo jiného malého mobilního zařízení zjistit, jak dobře nebo špatně se zobrazuje a ovládá navigace stránek z jiného zařízení než stolního počítače.
Stromová struktura webu Při vytváření webových stránek a členění obsahu na jednotlivé stránky je vhodné web rozdělit na základní logické celky. Tyto celky mohou obsahovat podcelky, ty opět další podcelky atd. Tímto členěním vzniká stromová struktura webu s hierarchickým členěním, přičemž každá stránka webu spadá do jisté větve a vede k ní alespoň jedna cesta vycházející z hlavní stránky webu. Hlavních logických celků (sekcí, oblastí) by mělo být maximálně 7-9. Lidský mozek není schopen větší množství položek zpracovat najednou a utvořit si v mysli celkový obraz webu. Stejné pravidlo (7-9) platí i pro podcelky hlavních celků, žádný logický celek by neměl obsahovat více než 7-9 podcelků. Toto pravidlo se projeví i při vytváření navigačního menu, kdy žádné menu nemá obsahovat více než 7-9 položek, ať již ve statické nebo rozbalovací podobě. Vizuální podobou struktury webu je (zejména u větších projektů) mapa webu, která uživateli umožňuje jednodušeji se zorientovat ve struktuře a vzájemné provázanosti jednotlivých stránek.
Typy navigace Navigační prvky se dají rozdělit do několika základních skupin, pro každou skupinu existují standardy, které se týkají obsahu i umístění navigačního prvku. Základní navigace Hierarchická navigace Doplňková, např. drobečková navigace Kontextová navigace Mapa webu Vyhledávání Dalšími navigačními prvky na stránce může být logo – odkaz na úvodní stránku, URL adresa, související se strukturou webu, chyba 404 (stránka nenalezena), obsahující odkaz na nejdůležitější část(i) webu případně kontakt na administrátora. 9.5.2012
Navigace
3
Základní navigace Základní navigace je (jak již název napovídá) hlavní navigační strukturou každé stránky. Měla by být identická na každé stránce (s případným odlišením místa ve struktuře stránek, kde se právě nacházíme). Nejčastěji má podobu horizontálního (vodorovného) pruhu v hlavičce stránky. V případě třísloupcového layoutu může být základní navigace umístěna také do levého vertikálního (svislého) pruhu. Počet položek v základní navigaci by neměl přesahovat 9 a měl by odrážet členění webu na základní logické celky. V případě rozsáhlejšího webu může každá položka základní navigace být rozbalovací (vysouvací) a obsahovat odkazy na jednotlivé podcelky hlavního celku a případné jejich další podcelky. Tak můžeme v případě členitého webu rychle a jednoduchým způsobem přejít na stránku třetí nebo i čtvrté úrovně v hierarchickém uspořádání. Tato vysouvací nebo rozbalovací menu tvoří přechod mezi základní (hlavní) navigací a navigací hierarchickou. Další možností u rozsáhlého webu je rozdělit hlavní navigaci na globální a lokální. Globální navigace slouží k přecházení mezi hlavními logickými celky webu a mívá podobu horizontálního pruhu, lokální navigace pak slouží jako navigace mezi jednotlivými stránkami nebo oddíly daného celku a bývá umístěna do levého vertikálního pruhu. Zvláští podobou hlavní navigace jsou záložky. Jejich největší výhodou je intuitivnost (vysoká použitelnost), nevýhodou je, že zabírají velkou plochu.
Lokální navigace
Globální navigace kontextová navigace
obsah stránky kontextová navigace
Hierarchická navigace Někdy se též nazývá stromová navigace, vychází ze stromové struktury webu, tedy z rozčlenění webu na jednotlivé větší či menší celky a podcelky. Pomocí tohoto typu navigace uživatel prochází web od hlavní stránky směrem k nižším celkům a v každém celku si vybírá, kterým podcelkem chce pokračovat při procházení stránek. Tento typ navigace najde uplatnění zejména v katalozích nebo v případě, že je zapotřebí postupně zpřesňovat hledanou informaci (nápověda). 9.5.2012
Navigace
4
Výhodou hierarchické navigace je její srozumitelnost a intuitivní ovládání, problémy může způsobovat potřeba začlenit stránku do více větví, případně přecházení mezi větvemi. Tyto nevýhody se dají lehce odstranit přidáním dalších typů navigace (hlavní navigace, kontextová navigace, fulltextové vyhledávání apod.).
Drobečková navigace Drobečková navigace je typem navigace, který má uživatele informovat o tom, kde ve struktuře webu se právě nachází, případně jakou cestou se tam dostal. Existují tři základní typy drobečkové navigace: 1. pozice – tento typ navigace znázorňuje aktuální pozici ve struktuře webu, která je nezávislá na cestě, kterou se uživatel na stránku dostal. Vychází ze stromové struktury webu. 2. Cesty – tento typ drobečkové navigace znázorňuje jakou cestou se uživatel na danou stránku dostal, je tedy pro každou webovou stránku relativní, závislý na konkrétní přístupové cestě 3. Vlastností – tento typ drobečkové navigace nespadá zcela pod navigaci na webových stránkách. Slouží k zobrazení základních informací o produktu (název, cena, značka, kategorie), používá se v e-shopech. Hlavními důvody proč umístit drobečkovou navigaci na webové stránky je usnadnění orientace uživatele (kde jsem, odkud jsem přišel, kudy odsud) a zjednodušení možnosti přesunu na jinou stránku (jedním klepnutím na položku v drobečkové navigaci se mohu přemístit např. o dvě úrovně výše v hierarchii webu). Drobečková navigace může sloužit jako rozšířená alternativa tlačítka zpět. Umístění Drobečková navigace bývá většinou umístěna v horní části stránky, pod záhlavím nebo horizontální navigací. Ukázka drobečkové navigace z http://moodle.sspbrno.cz
Vytvoření Redakční systémy (Drupal, Joomla,...) často umožňují automatické vytvoření drobečkové navigace. Vytváříme-li ji ručně, můžeme pro jednotlivé položky navigace použít např. nečíslovaný seznam. Pro oddělení jednotlivých položek se jako oddělovač používá nejčastěji symbol „>“ nebo různé podoby symbolu šipka.
9.5.2012
Navigace
5
Kontextová navigace Pod pojmem kontextová navigace si můžeme představit jakoukoli doplňkovou navigaci, která má vztah k informacem na dané stránce. Může být umístěna v levém vertikálním pruhu, může mít podobu odkazů připojených na konci stránky, případně jinou formu. Kontextovou navigaci mohou tvořit i odkazy, které jsou přímo součástí textu stránky. Úkolem kontextové navigace je rychle poslat uživatele přímo k informaci, která by jej v souvislosti s textem stránky mohla dále zajímat, a to nezávisle na hlavní navigaci a na struktuře stránek. Kontextová navigace tak dokáže ideálně skloubit uživatelovy potřeby i obchodní cíle webu. Kontextová navigace tvorbou vnitřních odkazů navíc přirozeně optimalizuje stránky pro vyhledavače. Největší nevýhodou kontextové navigace je náročnost jejího vytváření, je zapotřebí vědět, jakým způsobem uživatelé webu vyhledávají informace a jak spolu vyhledávané informace souvisí. Mezi kontextovou navigaci bývá někdy řazena i navigace drobečková.
Mapa webu Mapa webu najde své uplatnění zejména na webech většího rozsahu. Jedná se o hierarchicky uspořádaný přehled všech důležitých stránek webu. Většinou je mapa webu přístupná ze zápatí stránky, uživatel tedy bez nutnosti rolovat zpět nahoru získává možnost přesunout se na webu na jiné místo. Mapa webu je navíc důležitým prvkem pro vyhledávací roboty, na jednom místě zde najdou přehledně uspořádané odkazy na další stránky webu. Mapa webu má uživateli přiblížit celkovou strukturu stránek, ukázat mu, jaké další stránky na webu ještě může najít. Mapa webu by měla být jednoduchá a přehledná, nejlépe v textové podobě a měla by mít stejnou logickou strukturu, jako mají ostatní navigační prvky webu (hlavní navigace, drobečková navigace).
Vyhledávání na stránkách (fulltext) Jako doplňkový navigační prvek může na webových stránkách sloužit i integrované fulltextové vyhledávání, které porovná zadané slovo nebo frázi s databází frází, vyskytujících se na daném webu a přemístí uživatele na místo výskytu zadané fráze. Tento typ navigace je účelný zejména v případě, že uživatel přesně ví, jaké klíčové slovo na stránkách hledá, ale netuší, v jakém logickém celku stránek by jej měl hledat.
9.5.2012
Navigace
6
Podoba navigace podle potřeb uživatelů Víme již jaké typy navigačních prvků máme k dispozici, zbývá vyřešit otázku jakým způsobem vytvořit hierarchii webu, tedy podle jakého klíče rozčlenit informace na webu do jednotlivých logických celků. Známe-li potřeby uživatelů našeho webu (zjistíme je například analýzou log souboru nebo jinými metodami viz. kapitola SEO), můžeme jim vhodnou volbou navigace vyjít vstříc. 1. Vím co chci (ukázka z webu KB pojišťovny) http://www.kb-pojistovna.cz/ Uživatel často na web přichází s jasně specifikovaným cílem, ví co chce, ale nezná název konkrétního produktu nebo výrobku, který hledá. Tento druh navigace pracuje s uspokojením potřeby uživatele.
2. Vím kdo jsem (ukázka z webu Samira.cz) http://www.sperky-zlate-stribrneocelove.cz/sperky-pro-muze/c-989/ Uživatel volí kategorii, se kterou se ztotožňují jeho cíle na webu, např. muž/žena, domácnost/firma, maloobchod/velkoobchod, nový/stávající zákazník... Uživatel se rychle dobere informací, které ho zajímají, informace, které se jej netýkají nemusí procházet. 3. Různá kritéria (ukázka z webu Atlas rostlin) http://colee-rostliny.ic.cz/ Uživatel má možnost vybírat z více různých kritérií, více cest může vést k témuž cíli.
4. Rychlá navigace (ukázka z webu komíny Schiedel) http://www.schiedel.cz/ Do této navigace umístíme nejčastěji hledané položky webu. Uživatel pak neztrácí čas hledáním informace v některé z kategorií, které jsou na výběr, ale pokračuje přímo na stránku, kde se hledaná informace nalézá. Musíme předem vědět, které jsou nejhledanější položky našeho webu.
9.5.2012
Navigace
7
Nejčastější chyby navigace
Nevhodné členění webu na logické celky (struktura webu) Navigace není konzistentní Odkazy nejsou zřetelně odlišené (podtrhané) Stránka odkazuje sama na sebe (např. klikací položka drobečkové navigace) Nerespektování přístupnosti (JavaScript, roletkové menu, obrázková navigace bez textové alternativy...) Chybí zřetelný odkaz na hlavní (úvodní) stránku V navigaci není označena aktuální položka (kde se nacházím) Umístění navigace na nevhodné místo Ujíždějící vysouvací menu Příliš drobné písmo, nečitelné písmo Ikony v navigaci bez vysvětlení Nevhodné pořadí položek v navigaci (neodpovídá důležitosti)
Shrnutí: Informační architektura se zabývá designem a organizací informačních systémů s cílem zjednodušit a zpřístupnit informace. Tvorba informační architektury v sobě zahrnuje návrh struktury webu, jeho členění na jednotlivé logické celky a stránky, přístup k těmto logickým celkům, vhodnou formu navigace a další kroky. Zároveň úzce souvisí s dalšími kroky při tvorbě webu, tedy s grafickým návrhem, copywritingem, optimalizací, a také s vlastnostmi webu jako je použitelnost a přístupnost. Přehlednost a intuitivnost navigace je jedním z klíčových faktorů webu, které rozhodují o spokojenosti návštěvníka webu. Navigace by měla splňovat kritéria přístupnosti, pomoci uživateli rychle najít požadovanou informaci na webu, pomoci uživateli orientovat se ve struktuře webu a také pomoci vstřebat co nejvíce informací z webu. Navigace na webu může mít různou podobu, vždy by měla být k dispozici hlavní navigace, nejčastěji umisťovaná do horizontálního pruhu v horní části stránky (globální navigace), na větších webech může být navíc přítomna lokální navigace, nejčastěji jako vertikální pruh na levé části stránky vedle vlastního textu stránky. Jako doplňková navigace se dále používá drobečková navigace, která slouží k informování uživatele o aktuální pozici ve struktuře stránek, kontextová navigace například v podobě odkazů v textu, vedoucích na další stránky webu, na větších webech se může uplatnit mapa webu nebo fulltextové vyhledávání. Navigace by vždy měla vycházet z potřeb uživatelů webu, konkrétní podoba navigace a struktura webu by měla potřeby uživatelů splňovat.
9.5.2012
Navigace
8
Kontrolní otázky: 1. Vysvětlete pojem Informační architektura 2. Jak Informační architektura souvisí s navigací? 3. V čem spočívá význam navigace na webu? 4. Jaké podmínky by měla dobře navržená navigace splňovat? 5. Jakých forem může navigace na webu nabývat? 6. Jak vypadá a kde může být umístěna hlavní navigace? 7. Jak se liší globální a lokální navigace? 8. Co je to drobečková navigace? 9. K čemu slouží kontextová navigace? 10. Kde se uplatní mapa webu a jak by měla vypadat? 11. Vysvětlete význam fulltextového vyhledávání začleněného do webových stránek. 12. Jakých podob může nabývat navigace vycházející z potřeb uživatelů? 13. Jmenujte nejčastější chyby navigace.
Zdroje informací: Gregor Jan: Jak na navigaci na webových stránkách 1., Interval, [9.10.2001], on-line, dostupné z: http://interval.cz/clanky/jak-na-navigaci-na-webovych-strankach-1/, [cit. 05/2012] Informační architektura, on-line, dostupné z: http://www.adaptic.cz/znalosti/efektivni-web/informacni-architektura/, [cit. 05/2012] Informační architektura, on-line, dostupné z: http://www.symbio.cz/slovnik/informacni-architektura.html, [cit. 05/2012] Informační architektura, on-line, dostupné z: http://www.weto.cz/clanky-owww/informacni-architektura, [cit. 05/2012] Dvořák Petr: Tradiční layouty webových stránek, on-line, dostupné z: http://joshis.iprofil.cz/clanek-2-tradicni-layouty-webovych-stranek, [cit. 05/2012] Česká pravidla přístupnosti, on-line, dostupné z: http://www.pristupnost.cz/ceskapravidla-pristupnosti/#kapitola-d, [cit. 05/2012] Kuna Martin: Webová grafika, struktura webu a navigace, použitelnost a přístupnost, on-line prezentace, dostupné z: http://www.vkol.cz/data/soubory/rf/web_grafika.pdf, [cit. 05/2012] 9.5.2012
Navigace
9
Elsnerová Ludmila: Drobečková navigace, co, proč, jak?, [1.2.2011], on-line, dostupné z: http://www.elsnerova.cz/blog/2011-02/drobeckova-navigace-co-procjak.html, [cit. 05/2012] Šíla Josef: Zbytečné chyby navigace, [10.5.2007], on-line, dostupné z: http://www.symbio.cz/clanky/zbytecne-vady-navigace.html , [cit. 05/2012]
9.5.2012
Navigace
10
