Header, Navigation
Obsah
Intro
Účel
Hlavním účelem navigace na webu je usnadnit uživatelům orientaci a přístup k různým částem obsahu. Navigace slouží jako strukturovaný rozcestník, který:
- organizuje obsah
- usnadňuje orientaci
Kde se používá
Komponenta se používá jako hlavní navigace na stránce pro účely přechodu na jednotlivé stránky. Zároveň je možné využít:
- akce pro vyhledávání na webu
- změnu režimu zobrazení webu
- změnu jazykové mutace
Varianty
Navigace pro weby s větším množstvím stránek, které jsou následně zobrazeny ve formě druhého řádku menu. První řádek menu představuje logo, přístupné vyhledávací pole a akční tlačítka pro specifické interakce na webu jako je přihlášení, změna jazyka či změna režimu zobrazení.
Pořadí odkazů v navigaci či jednotlivé akční tlačítka je možné libovolně měnit.
Využívá se pro weby s malým množstvím stránek, které jsou následně zobrazeny ve formě jednoho řádku menu.
Pořadí odkazů v navigaci či jednotlivé akční tlačítka je možné libovolně měnit. Vyhledávací pole je možné skrýt (není-li vyhledávání k dispozici), zobrazit s využitím ikony lupy (pro účely webů s potlačením vyhledávání) nebo zobrazit obdobně jako pro default verzi v rozbalené podobě (pro weby s větším množstvím obsahu).
Subnavigace je dostupná pro položky v menu s ikonou šipky. Zvolením této položky je zobrazena subnavigace.
Pořadí či počet odkazů v subnavigaci je možné libovolně měnit. Počet jednotlivých sloupců je možné omezit/rozšířit (viz varianty) od 1 do 8 sloupců.
Znázornění maximální verze subnavigace s využitím 4x2 sloupci s jednotlivými kategoriemi obsahu.
Pořadí či počet odkazů v subnavigaci je možné libovolně měnit. Stejná forma vizualizace pro verzi default i simple.
Znázornění nejmenší verze subnavigace s využitím 1 sloupce bez souhrnného názvu sloupce. Subnavigace je zarovnána s okrajem položky menu pro které je zobrazena.
Počet odkazů v subnavigaci je možné libovolně měnit. Stejná forma vizualizace pro verzi default i simple.
Mobile specifika
- Responzivní zobrazení: Dle velikosti zařízení je responzivně zobrazována položka k zobrazení menu:
- Pro menší rozlišení: pouze ikona hamburger menu.
- Pro větší rozlišení: ikona hamburger menu společně s popisem menu.
- Submenu: Zvolením ikony menu je zobrazena první úroveň navigace. Položky s ikonou šipky následně otevírají/zobrazují druhou úroveň menu (subnavigaci).
- Uzavření menu: Ikona křížku slouží k uzavření/skrytí subnavigace.
Doporučení
Upřednostněte čitelnost položek v navigaci
Používejte jednoduchý bezserifový typ písma a zajistěte odpovídající rozestup kolem položek, abyste se vyhnuli nepřehlednosti. Využívejte malé písmena namísto verzálek/kapitálek. Upřednostněte jednořádkové názvy položek navigace.
Označení aktuálního umístění uživatele
Vždy zvýrazněte odkaz v hlavním menu, který odpovídá stránce, na které se nachází uživatel (výjimkou je pouze homepage). Pokud je aktuální stránka v podnabídce, zvýrazněte nadřazenou položku v hlavní navigaci.
Defaultní zobrazení vyhledávacího pole
Vyhledávací lišta umožňuje uživatelům rychle najít to, co potřebují, pokud to nemohou najít v nabídce. Je to užitečný nástroj pro větší webové stránky se spoustou stránek.
Jasné označení položek se subnavigací
Zobrazení ikony šipky pomáhá rozlišovat mezi hlavními navigačními položkami, které expandují do podnabídky, a těmi, které vedou přímo na stránku.
Prioritizujte položky hlavní navigace
Nejdůležitější stránky si zařaďte na první místo v navigaci. To pomůže uživatelům rychle najít nejužitečnější informace. Omezte počet položek navigace na maximálně šest, pro lepší čitelnost a orientaci na webu.
Omezení/Seskupení velkého množství položek subnavigace
Máte-li velké množství stránek, které chcete zobrazit v rámci subnavigace, definujte prioritní stránky a zbytek umístěte pod položku + Další. Zvolením této položky se zobrazí rozcestník se všemi stránkami.
Zarovnání subnavigace
4 a více položek
Pokud má subnavigace 4 a více položek, zarovnejte ji na střed obrazovky pro všechny Menu Itemy.
Méně než 4 položky
Pokud má subnavigace méně než 4 položky, zarovnejte ji zleva k odpovídajícímu Menu Itemu. Pokud subnavigace nelze zarovnat zleva (např. Menu Item je příliš blízko pravému okraji), zarovnejte ji zprava k okraji celé navigace první úrovně. Pokud je Menu Item ve středu navigace, zarovnejte subnavigaci na střed pod tímto Menu Itemem.
Minimální množství položek
Pokud má subnavigace minimální počet položek v jednom sloupci bez nadpisu, zarovnejte ji s levým okrajem odpovídajícího Menu Itemu. Pokud se nevejde (Menu Item je příliš vlevo), zarovnejte ji zprava na okraj celé navigace první úrovně.
Další doporučení
Přechod na homepage skrze logo
Pro přechod na homepage/úvodní obrazovku z jakékoliv stránky na webu použijte logo nebo název webu namísto položky Domů v navigaci.
Uživatelsky přívětivé názvosloví
Udržujte názvy štítků jednoduché a popisné, aby uživatelé hned věděli, co při prokliku najdou. Čím jasnější je kopie, tím rychleji uživatelé najdou to, co potřebují.
Umožnění změny režimu zobrazení
S rostoucím rozšířením dark mode režimu zvažte pro zajištění uživatelského komfortu umístění přepínače režimu zobrazení přímo do navigace.
Poskytněte zafixovanou navigaci
Zafixované/Sticky menu udržuje důležité odkazy vždy na dosah, takže uživatelé nemusí pro jejich nalezení posouvat zpět nahoru. Tato funkce zlepšuje navigaci a pohodlí uživatelů, čímž zefektivňuje procházení.
Položky se subnavigací umístěte na začátek
Pro zajištění přístupnosti položek v subnavigaci a korektní zobrazení všech položek v subnavigaci je vhodné umístit tyto položky na počáteční pozice, aby měly dostatek místa pro zobrazení.
Zobrazení subnavigace
Pro zobrazení subnavigace je vhodnější využít funkci kliknutí na položku navigace namísto hover stavu. Pouze je-li nutné zobrazit položku navigace první úrovně, která má pod sebou svou subnavigaci, je možné využít hover stav pro zobrazení subnavigace.