Zdroj: http://blog.stefanosdesign.cz/webarina/6-tipu-pro-funkcni-navigaci-webu  •  Vydáno: 25.7.2017 9:24  •  Autor: Štěpán Hlavatý

6 tipů pro funkční navigaci webu

6 tipů pro funkční navigaci webuNavigace webu je jednou z nejdůležitějších komponent, která se podílí na úspěchu webu a splnění jeho cílů. Velmi také ovlivňuje uživatelský prožitek a míru okamžitého opuštění webu. Asi jste taky měli choutky udělat navigaci webu "jinak", trochu jí opepřit. Navigace ale bohužel není zrovna to pravé místo pro velké experimenty a designérské výstřelky. Aplikujte následujících 6 pravidel, abyste dosáhli skvěle použitelné navigace!

Používejte logo jako link na domovkskou stránku

Dobrá navigace webu staví hodně na tom, na co si lidé zvykli a co se stalo "standardem". Přesně tak tomu je u loga webu, které zároveň slouží jako odkaz na domovskou stránku webu. Poskytněte lidem tuto funkcionalitu.

Umisťujte logo vlevo

Jasně, toto pravidlo také omezuje designerský rozlet, ovšem opět je podloženo pádným argumentem. V NN Group totiž zjistili, že pokud je logo umístěno uprostřed, 24 % lidí se není schopno dostat na 1 kliknutí na domovskou stránku webu. Kdežto u loga umístěného vlevo to na pravní kliknutí nezvládly pouze 4 % lidí. I u tohoto pravidla samozřejmě existují výjimky, např. pokud je design vašeho webu výrazně středově orientovaný.

umisťujte logo webu vlevo nahoru
Umisťujte logo webu vlevo nahoru a použijte jej jako odkaz na hlavní stránku

Že už máte na některých svých webech logo uprostřed? Nejste v tom sami... Taky jsem zákazníkovi vytvořil web s logem uprostřed. Ovšem za ostatními prvky designu si stojím.

Umístěte hlavní navigaci na obvyklé místo

Že navigace není místo pro velké experimenty jsem zmiňoval už na začátku. Takže zchlaďte hlavy a umístěte hlavní navigaci do hlavičky webu (pokud je horizontální) nebo vlevo nahoru (pokud je vertikální).

Pokud si stejně myslíte, že můžete s umístěním menu experimentovat, představte si třeba takové auto s volantem na dveřích místo na jeho obvyklém místě. Ovladací funkční prvky prostě mají své místo a můžeme zde hovořit o určité ergonomii či interakčním designu webu. Stejně jako v autě prvky samotné můžete odlišit svým designem, ale jejich umístění a funkčnost by měla být taková, jakou uživatel očekává.

Používejte popisné - vysvětlující položky v navigaci

Jaký obrázek si návštěvník webu udělá, když při pohledu na menu objeví položky jako "Produkty", "Naše služby", "O firmě" apod.? Žádný. Srovnejte s případem, kdy v menu najde třeba tyto položky: "Domácí dorty", "Zákusky na zakázku", "Rozvoz po Olomouci". Je mu hned jasné, co firma nabízí.

Používejte tedy konrkétní popisky položek v menu, které by měly říct, co po kliknutí návštěvník objeví, co mu web nabídne. To má také velký vliv na míru okamžitého opuštění a míru konverze.

A v neposlední řadě - pokud již v menu použijete názvy toho, co potenciální zákazníci hledají prostřednictvím vyhledávačů je to jistě lepší z hlediska SEO optimalizace než "Produkty" či "Služby". Hledali jste snad někdy na Googlu "produkt"?.

Mějte v navigaci maximálně 7 položek

A nejlépe pouze 5. Alespoň těch hlavních. Po rozkliknutí mohou být návštěvníkovi nabídnuty další položky. Pokud se ale u hlavní navigace vejdete do 7 položek, vězte, že tím návštěvníkovi usnadníte rychlou orientaci a také si bude schopen položky vaší navigace upamatovat v krátkodobé paměti. Ta je prý schopna uchovat právě těch 7 položek.

Tento tip souvisí s obecným pravidlem na webu - chcete-li dodat určité věci na webu větší důraz, snižte počet prvků nebo jejich intenzitu kolem tohoto prvku. Prostě nechte to, co má vyniknout, trochu dýchat.

Nejdůležitější položky umístěte na začátek a konec navigace

Setkal jsem se se zákazníkem, který si myslel a přesvědčoval mě, že položky, které budou v hlavní navigaci webu prostřed, získají největší pozornost návštěvníka. V tomto případě bylo menu podle zákazníka, i když jsem intuitivně cítil, že to tak není správně. Teď už bych zákazníka menu organizovat nenechal. Je totiž dokázáno, že největší pozornost návštěvník věnuje položkám na obou okrajích navigace. Ty uprostřed naopak přitahují jeho pozornost nejméně. To ilustruje následující obrázek (červená linka = pozornost návštěvníka).

největší pozornost v navigaci webu mají kajní položky
Ilustrace pozornosti návštěvníka věnované navigaci

Nepoužívejte "hamburger" menu a jinou skrytou navigaci

Některé weby tahají prvky přístupu "mobile first" i na jejich desktopové varianty. Jde často o tzv. "hamburger" menu nebo jiné formy skryté navigace. Na mobilních zařízeních si lidé na tyto formy navigace již zvykli a také menší obrazovka si vyžaduje řešit navigaci tímto způsobem. Na desktopu byste však měli hlavní prvky své navigace odhalit.

Pokud tak neučiníte a menu skryjete třeba za hamburger ikonku, vězte, že míra použití navigace se sniží o 21 procentních bodů oproti navigaci, která skrytá není. Zvýší se také doba za kterou se návštěvník na webu dostane tam, kam chce.

Na dektopu by tak vždy měly být viditelné alespoň hlavní prvky navigace. Ty ostatní so mohou návštěvníkovi zobrazit až po určité interakci.