Hlavní navigace

Základní navigaci uživatelé ignorují

Martin Kopta

Se zadáním vyhledat na webu ČNB kurzovní lístek české koruny se během experimentu popralo 22 webdesignérů, většina úspěšně. Na výsledcích pokusu ve spojení s plošným výzkumem českého webu se pokusíme zjistit, s jakými úskalími se uživatelé potýkají u navigace, a vyvodit doporučení pro úspěšný navigační design.

Vzhled navigace na webových stránkách obvykle určuje grafik, který vytváří její úpravu. Není předem dáno, který typ navigace se použije. V mnoha případech zůstává na grafikovi i rozdělení nebo naopak sdružování navigačních odkazů. Takové pojetí webdesignu odpovídá představě, že vzhled prodává. Návrh navigace (navigation design) by přitom měl vycházet už ze struktury webu a odrážet funkčnost jednotlivých odkazů. Výtvarník by už na výraznější přeskupování stránkových komponentů neměl mít příliš prostoru.

Zastoupení typů navigace na domovských stranách (typologie podle Nielsena)
Typ Zastoupení (%)
Sloupec vlevo 72
Vodorovné panely 54
Textová dole 20
Seznam uprostřed 22
Sloupec vpravo 4
Ikony 4
Jiná 4

Data pocházejí ze vzorku 100 českých webů.

Typologie navigace
Z hlediska informační architektury (information architecture) můžeme rozlišit šest typů navigace a dva speciální:

Základní navigace (global navigation)
Základní navigace zpřístupňuje výchozí navigační body, hlavní informační uzly.
Místní navigace (local navigation)
Místní navigace odkazuje na potomky aktuálního uzlu.
Doplňková navigace (supplementary navigation)
Doplňková navigace propojuje aktuální uzel s dalšími uzly mimo přímou linii informační hierarchie.
Případová navigace (contextual navigation)
Případová neboli také kontextová navigace zpřístupňuje uzly relevantní k dané informaci. Jinak se nazývá také související či relevantní odkazy (inline navigation).
Zvyková navigace (courtesy navigation)
Zvyková navigace odkazuje na stálou výbavu webu mimo jakoukoli informační hierarchii (například na informace o ochraně osobních údajů).
Externí navigace (remote navigation)
Externí navigace slouží k přesunu uživatele na zdroje umístěné na jiném webu (například z Lupy na Root).
Mapa serveru (site map)
Mapa serveru představuje vizualizaci tematické struktury informací obsažených na webu. Obvykle obsahuje dvě až tři úrovně struktury serveru.
Abecední rejstřík (index)
Abecední rejstřík shrnuje důležité termíny obsažené na webu a doplňuje je přímými odkazy k výskytu.

Ze seznamu je patrné, že jednotlivé typy odkazů mají zcela odlišné využití, a přesto se běžně setkáváme s chybou – odkazy s různou funkcí jsou sdružovány do jednoho navigačního nástroje. Běžně pospolu najdeme odkazy ze základní a zvykové navigace (například: Digitální fotoaparáty, Vyhledávání) nebo odkazy z navigace místní a doplňkové (Olympus, Sony, Objektivy).

Pokud nejsou jednotlivé typy navigace striktně označeny, snižuje se použitelnost (usability) webu. Běžný uživatel pozná, že cosi s návrhem webu není v pořádku, pokud například v roletovém menu s hlavními uzly a poduzly narazí na položku, která žádnou roletu nevysune. V takovém případě si uživatel může myslet, že u dané položky roleta nefunguje, a tudíž nebudou fungovat ani ostatní součásti stránky.

Dalším aspektem odlišení typů navigace je zjednodušení orientace na stránce i na webu. Jak vyplývá z určitých předchozích dílů seriálu Studie o českém webu, některé typy nástrojů bývá zvykem umísťovat na stálá místa na stránce, kde je potom uživatelé také už podvědomě očekávají. Pakliže například nenajdete odkaz na kontakt na úplném konci stránky, nejspíš se ještě pokusíte hledat ho v menu v blízkosti informací o provozovateli. V případě, že na konci stránky nenaleznete informace o ochraně osobních dat, jinde už je nehledáte.

Zastoupení typů navigace na domovských stranách (typologie podle Garretta)
Typ Zastoupení (%)
Základní 96
Místní 40
Doplňková 66
Případová 20
Zvyková 36
Externí 40
Rejstřík 0
Mapa serveru 2

Data pocházejí ze vzorku 100 českých webů.

Pro každý typ navigace je vhodné zvolit jinou vizuální podobu. Nejběžnějším způsobem zobrazení základní navigace, jak se můžeme přesvědčit z první tabulky, je sloupec s odkazy vlevo ( left-hand navigation) nebo panely odkazů u horní hrany stránky ( tabbed navigation), případně s roletkami ( pull-down menu). Naopak pro zvykovou navigaci (kam můžeme zařadit i obvyklé nástroje, jako je nákupní košík) se nejlépe hodí vizuální metafory – ikony, nebo prostý textový řádek s oddělovači položek. Více se o tom dočtete v knihách o použitelnos­ti webu.

Uplatnění jednotlivých typů navigace
Nasazení jednotlivých typů navigace závisí na struktuře informací v rámci webu a aktuálním uzlu. Jelikož v tabulkách prezentuji data, která se vztahují k domovským stránkám, je zastoupení jednotlivých druhů navigace odlišné od běžných stránek hlouběji ve struktuře. Na všech typech stránek by se měla objevit základní a zvyková navigace. V každém uzlu, který obsahuje poduzly, se objevuje navigace místní, která může být doplněna suplementární navigací. Přímo v doprovodu informací na daném uzlu pak najdou uplatnění související odkazy.

I na titulní straně se však vedle základní mohou vyskytovat i jiné druhy navigace. Dobrým příkladem je třeba současný web České národní banky.

826

Vlevo (A) najdeme sloupec s navigací po hlavních uzlech, po klepnutí na položku se rozbalí místní menu (B) k danému uzlu. Horní hranu © lemuje zvyková navigace s běžnými nástroji jako změna jazyka, příprava tiskové verze, kontakty… Pod zvykovou navigací objevíme dva typy navigace doplňkové. Ta v prvním případě (D) zpřístupňuje většinu důležitých informací z nitra webu formou tří roletových nabídek rozdělených podle charakteru uživatele. V druhém případě (E) jsou vytaženy skutečně nejdůležitější informace, které asi uživatelé nejčastěji hledají. Rozdělení navigace na domovské straně ČNB patří k nejlepším, s jakými jsem se na webu vůbec setkal. Trochu problematická je tu práce s plochou a kontrastem, ale o nich dnes nebude řeč.

Využití alternativních navigačních prostředků
Abychom zjistili, jaký význam na webu ČNB má doplňková navigace a jaký navigace základní, požádal jsem členy Konference o webdesignu o účast na experimentu se sledováním cest uživatele ( user tracking). Podle zadání měli testovací uživatelé vyrazit z domovské stránky ČNB a jakýmkoli způsobem se dostat na stránku s aktuálním kurzovním lístkem. Experimentu se zúčastnilo 22 mužů, až na dvě výjimky se středoškolským nebo vysokoškolským vzděláním a velkou zkušeností s webem (přeci jen byli to webdesignéři). Nikdo z nich nebyl pravidelným uživatelem webu ČNB, jen jeden pracuje ve finančním sektoru, jeden studuje VŠE.

Skupina „Praktické info“
ČNB – Česká národní banka : Kurzy devizového trhu
Skupina „Kurzy devizového trhu“
ČNB – Česká národní banka : Kurzy devizového trhu : Kurzy devizového trhu (#2)

Absolutní většina uživatelů přistupovala k webu ČNB ostražitě v očekávání nějakého chytáku. Pravděpodobně díky tomu cíle uživatelé dosáhli většinou velmi rychle. První skupina, čítající devět osob, využila přímou cestu k cíli přes roletovou nabídku Praktické info a zvolila položky Aktuální kurz CZK. Druhá skupina o stejném počtu osob nejdříve zaregistrovala ikonu se stoupajícím čárovým grafem a popiskem Kurzy devizového trhu a na další straně zvolila Aktuální devizové kurzy. Další čtyři uživatelé volili jiné cesty.

Uživatel A
ČNB – Česká národní banka : Výsledky vyhledávání : ČNB – Česká národní banka : Kurzy devizového trhu

Uživatel označený v přehledu výše jako Uživatel A si na domovské straně nevybral žádný odkaz a svěřil svůj požadavek internímu vyhledavači. Ten na dotaz kurzovní lístek nevrátí žádné výsledky. Poté se Uživatel A vrátil zpět na domovskou stranu, znovu zhodnotil své možnosti a úkol dokončil jako Skupina „Praktické info“. Z tohoto příkladu vidíme, že k cíli stejně jako u převládajících postupů pomohla právě vhodně zvolená doplňková navigace.

Chybou, které se dopustili designéři stránek, je neexistence synonymických řad v řízeném slovníku (controlled vocabulary, je-li vůbec pro ČNB nějaký použit). Vhodně upravený vyhledavač by měl umět na dotaz se synonymem vrátit odpověď týkající se termínu, který je použit na webu. Jednoduše řečeno: dotaz kurzovní lístek má slovník použitý v interním vyhledavači preformulovat na Kurzy devizového trhu.

Uživatel B
ČNB – Česká národní banka : Výsledky vyhledávání : Výsledky vyhledávání (#2) : Kurz české koruny : Finanční trhy : Kurzy devizového trhu : Kurzy devizového trhu (#2)

Uživatel B také nenašel na domovské straně vhodný odkaz a obrátil se se stejným dotazem i výsledkem jako Uživatel A na interní vyhledavač. Poté ovšem dotaz zúžil na kurz a z výsledků vybral Kurz české koruny, což se okamžitě ukázalo jako špatná volba. Teprve poté se uživatel obrátil na základní navigaci a přímou cestou se dobral až ke kurzovnímu lístku. Zde se objevuje problém s pojmenováváním. Uživatel je zmatený terminologií a místo standardních navigačních prvků se obrátí na vyhledavač, kde se setká s nevhodně vybraným názvem rozhovoru, z nějž není poznat, že se nejedná o informaci o aktuálních kurzech.

Pomohlo by, kdyby se tvůrci obsahu drželi zásady, že nadpisy mají být samopopisné a nemají kolidovat s jinými informačními uzly. V tuto chvíli už pochybuji, že web ČNB s nějakým řízeným slovníkem pracuje. Také je otázkou, zda by ČNB nemohla použít pro tuto pravděpodobně často hledanou stránku název, který by byl laikovi lépe srozumitelný.

Uživatel C
ČNB – Česká národní banka : Kurzy devizového trhu : Kurzy devizového trhu (#2) : ČNB – Česká národní banka : Devizové kutzy – denní historie : Devizové kurzy – denní historie (#2) : Kurzy devizového trhu
Uživatel D
ČNB – Česká národní banka : Kurzy devizového trhu : Kurzy devizového trhu (#2) : Finanční trhy : Aktuality o platidlech : ČNB – Česká národní banka : Finanční trhy : Forwardové kurzy : Forwardové kurzy devizového trhu

Problém s pojmenováváním se naplno rozvine u Uživatele C a Uživatele D. Oba začínají postupem Skupiny „Kurzy devizového trhu“, ale cílovou stránkou procházejí dále. Zatímco Uživatel C se vrací na domovskou stranu v domnění, že viděl křížové kurzy, a vydá se k cíli znovu přes položku Kurzy CZK – historie v roletové nabídce Praktické info, Uživatel D na serveru bloudí, až skončí na jiné stránce v domnění, že je u cíle.

Zde už je zcela bez diskuze patrné, že stránky webu ČNB jsou špatně pojmenované. Jednak na celém webu všechny stránky mají shodný obsah tagu TITLE, jednak jsou nadpisy na stránkách laikovi nesrozumitelné a nadto se opakují, takže neplní rozlišovací funkci. V případě ČNB lze určitě pochopit, že pokud je její web určen především finančníkům, vyjadřovací prostředky se tomu musí uzpůsobit. Přesto je právě u tohoto případu jasné, že příliš odbornosti někdy škodí.

Závěr: K cíli vede alternativní navigace
Vedle těchto poznatků je ovšem z experimentu nutno učinit závěr, že s výjimkou jednoho uživatele z 22 vždy k cíli vedla právě doplňková navigace. Také se nám podařilo testováním odhalit, že každá zvolená navigace musí být konzistentní. Někteří uživatelé ze skupin s majoritními cestami přiznávali, že před zvolením doplňkové navigace prošli na domovské straně nabídku poduzlů základní navigace. Všimněte si, že položka Finanční trhy, ačkoli má tři poduzly, nezpřístupňuje je v lokální navigaci.

Navigace je jedinou cestou k obsahu, proto by jí webdesignéři měli věnovat zvýšenou pozornost už od okamžiku návrhu struktury webového sídla. K ujasnění vztahů a rozčlenění na jednotlivé typy velmi pomůže vytvoření řízeného slovníku, kterým je pak třeba se řídit při tvorbě obsahu. Nejen vhodný typ navigace, ale také vhodně zvolené navigační texty jsou nutné pro úspěšné nalezení obsahu. V případě ČNB jsou vhodné termíny použity v doplňkové navigaci, avšak projevuje se tu nevýhoda roletových nabídek: její položky nejsou vidět.

Našli jste v článku chybu?

13. 3. 2003 22:51

Michal Kubeček (neregistrovaný)
Candela a sekunda ano, ale James Prescott Joule byl AFAIK muž. Na pochybách bych byl ovšem u jednotky Curie...

13. 3. 2003 22:28

Roj (neregistrovaný)
Ja si presto myslim, ze je to jako ten weblog. Amper, volt, ohm je taky muzskeho rodu. Snad jen candela, sekunda a joule to feminisujou :-)

BTW. Dnes zase spotovni redakce TV predvedla totalni neznalost Odolena Vody. Snad kazdej den rikaji VZDYCKY to zfusujou!

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Podnikatel.cz: V účtenkové loterii? 65 milionů ročně

V účtenkové loterii? 65 milionů ročně

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

120na80.cz: Rovnátka, která nejsou vidět

Rovnátka, která nejsou vidět

Podnikatel.cz: Alza.cz má StreetShop. Mall.cz více výdejních míst

Alza.cz má StreetShop. Mall.cz více výdejních míst

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Podnikatel.cz: Vládu obejde, kvůli EET rovnou do sněmovny

Vládu obejde, kvůli EET rovnou do sněmovny

DigiZone.cz: Perspektivy TV v roce 1939 podle časopisu Life

Perspektivy TV v roce 1939 podle časopisu Life

Podnikatel.cz: 3, 2, 1..EET startuje. Na co nezapomenout?

3, 2, 1..EET startuje. Na co nezapomenout?

Root.cz: Kamery Sony se dají ovládnout na dálku

Kamery Sony se dají ovládnout na dálku

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

DigiZone.cz: ČT má dalšího zástupce v EBU

ČT má dalšího zástupce v EBU

Podnikatel.cz: Na 3. prosince se chystá protest proti EET

Na 3. prosince se chystá protest proti EET

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Měšec.cz: Europlatby: někde bez poplatku, jinde i 350 Kč

Europlatby: někde bez poplatku, jinde i 350 Kč

Vitalia.cz: Spor o mortadelu: podle Lidlu falšovaná nebyla

Spor o mortadelu: podle Lidlu falšovaná nebyla

Měšec.cz: Za palivo zaplatíte mobilem (TEST)

Za palivo zaplatíte mobilem (TEST)

Podnikatel.cz: Zavře krám u #EET Malá pokladna a Teeta?

Zavře krám u #EET Malá pokladna a Teeta?