Pro jednoduchost se v tomto článku zaměříme pouze na hlavní navigaci, která je umístěná vertikálně, tedy v levém nebo pravém sloupci na webu.
Kdo je za to odpovědný?
I když se to nezdá, většina práce a tedy i odpovědnost je neprávem hozena na grafiky. Málokterý odborník na návrh webů a použitelnost při návrhu webu nebo tvorbě wireframů přesně navrhne, jak má vypadat menu do x-té úrovně (v horším případě jen naznačí, kde to menu má být), jak od sebe položky v menu odlišit a na co si dát pozor. Tahle práce pak zbude na graficích, kteří s použitelností často nemají takové zkušenosti a nejsou tak schopni se s nelehkým úkolem poprat.
Vzájemná spolupráce všech, kteří se na tvorbě webu podílejí, je tak podmínkou pro přehlednou a dobře fungující navigaci a tím i dobře použitelný web.
Co od menu vyžadujeme, a jaký na to má vliv právě stylování menu?
Menu by nám mělo říci,
- kde na webu se právě nacházíme,
- co všechno nám web nabízí,
- kam odtud můžeme jít dále (jaké jsou další podsekce).
Z toho pro realizaci menu vyplývá:
- Text v jednotlivých položkách má být přehledný a dobře čitelný.
- Jednotlivé úrovně menu by měly být od sebe vhodně vizuálně odlišeny.
- Aktuální položka v menu (stránka, kategorie kde se nacházíme) by měla být odlišena od ostatních.
Na grafika tak čeká docela obtížná práce. Musí vymyslet grafický vzhled pro každou úroveň menu (většinou se setkáme s dvouúrovňovou navigací), zvýraznit v ní aktuální položku (stránka nebo kategorie, kde se právě nacházíme) a ještě navrhnout hover efekty (zvýraznění položky po najetí myši). Vše tak, aby to bylo co nejlépe přehledné a poskytlo návštěvníkům odpovědi na jejich otázky, a to ještě často s předem daným složením barev z grafického manuálu firmy. Jo a musí to celé být samozřejmě strašně pěkné.
Nemůžeme se pak divit, že výsledky nejsou dokonalé.
Ukázky na příkladech
Podívejme se tedy na několik příkladů. Začneme těmi, co se příliš nepovedly.
Na obrázku číslo 1 vidíme první příklad z webu www.dsl.cz. Menu je pěkně graficky vyvedené. Ale poznáte na první pohled, která položka je aktuálně zobrazena? Je to položka „Diskuse“ nebo „Rychlost připojení“? Dokážete poznat, jestli patří „Rychlost připojení“ v hierarchii webu na stejnou úroveň jako „Diskuse“, nebo spadá pod ní? Pokud jste se museli nad odpovědí aspoň na chvíli zamyslet, menu není tak přehledné, jak by být mělo.
Dalším příkladem je vertikální menu na obrázku číslo 2 z webu www. elektrowin.cz. Oproti předešlému příkladu je graficky velice jednoduché. Pozornost poutají najednou hned tři zvýrazněné položky černou barvou s tučným písmem a ještě další dvě, zvýrazněné jen černou barvou. Jediné, čím odlišíme jejich vzájemné postavení v hierarchii webu, je menší odsazení a malinkaté šipičky v první úrovni menu. Největším problémem je zde málo místa mezi položkami a jejich vzájemné oddělení, zvlášť když jsou texty dlouhé a zalamují se na dva řádky. Výsledek je tak nepřehledný a velice špatně čitelný.
Třetí obrázek a třetí příklad je z webu www.fax.cz. V tomto menu je hlavním problémem podivné předsazení textu podkategorie „Odesílaní faxů“, které je velice rušivé. Chybí zde i zvýraznění nadřazení aktuální kategorie, ve které se nacházíme (Odesílání faxů).
Posledním příkladem na obrázku číslo 4 je web www.gemoney.cz. Odlišení vnořených úrovní menu je opět minimální a téměř tak splývá aktuální nadřazená položka menu se svými položkami.
Pro inspiraci si ukážeme i několik poměrně zdařilých menu.
Na následujícím obrázku je levé menu z webu www.czechinvest.org. Menu je přehledné a i když nemá v tomto stavu zvýrazněnou nadřazenou sekci (Rádce), je díky odsazení dobře rozpoznatelné.
Následující dva příklady z webů www.ceskapojistovna.cz a www.aaron.cz mají dobře zvýrazněnou podkategorii. Škoda jen, že aktuální položka není zvýrazněná více, než jen tučnějším písmem.
Na obrázku číslo 8 najdete přehledně zpracované menu o třech úrovních z webu www.ecm.cz. Stejně tak další obrázek s menu z webu www.cez.cz s rozbalenou čtvrtou úrovní.
Na co si dát ještě pozor
I když menu na první pohled splňuje výše uvedené, je ještě dobré si dát pozor na některé případy, kdy z přehledného menu vyrobíme oříšek pro uživatele.
První je zvýraznění konkrétní položky s úmyslem ji zviditelnit na úkor těch dalších. Následující příklady mají poměrně přehledně zpracované menu, ale díky zvýraznění jedné položky v něm dochází k nepřehledným situacím.
V první příkladu na obrázku číslo 10 z webu www.sw.cz asi jen těžko poznáte rozdíl mezi prvními dvěma položkami. Proč jsou obě dvě zvýrazněné?
Nejlépe je tento problém vidět na dalším příklad z webu www.kafe.cz na následujícím obrázku. Tady se nám do hry zapojilo ještě další zvýraznění u nové sekce a červený nadpisu dalšího bloku. Takže kde to vlastně jsme?
Ne vždy je také dobré celé menu nadepsat nějakým titulkem.
Nadpisy typu „menu“ jsou zcela nevhodné (z menu musí být přece jasné i bez popisu, že se jedná o menu). Často jsou ale nahrazovány jinými nadpisy, u kterých je díky špatnému odlišení těžko vidět, zda se jedná o nějakou položku v menu, nebo ne. Poznáte u následujících třech příkladů (příklady jsou z webů: www.megapixel.cz, www.ceskapojistovna.cz a www.aaron.cz) , která z horních položek je jen nadpis a která je klikacím odkazem?
Když už nadpis nad menu musí nutně být, je potřeba ho vizuálně dostatečně oddělit, aby nedocházelo k záměně s položkami menu. Následují příklady (web www.pongo.cz a www.cornis.cz), kdy jsou nadpisy nad menu poměrně dobře odlišené.
Závěr
Jak je z příkladů vidět, design webu není jen o tom, aby se líbil. Musí být také použitelný. Je škoda, když úsilí nad výrobou a hromady práce zničí graficky nepřehledná navigace. Dávejte tedy pozor nejen na kvalitní návrh webu, jeho strukturu a navigaci, ale i na její konečnou grafickou podobu a nenechávejte všechnu odpovědnost za to na graficích.
Samozřejmě někdy přehlednost menu neovlivní ani dobrý grafik, ale to už je zase téma na jiný článek.
