Mobilní menu stavějte podle hlavních úloh, používejte textové názvy a předvídatelnou hierarchii a na reálných zařízeních otestujte otevření, focus, návrat i dokončení cesty.
Mobilní navigace má na malém prostoru zpřístupnit nejdůležitější cesty, aniž by člověk musel znát organizační strukturu firmy. Ikona menu, logo a pár zkratek nestačí, pokud uživatel hledá konkrétní službu, cenu, kontakt nebo rozpracovaný úkol. Slabé menu vytváří slepé větve a nutí návštěvníka opakovaně otevírat a zavírat vrstvy.
Dobrý návrh spojuje prioritu obsahu, jasné pojmenování, stabilní chování a přístupnou implementaci. Musí fungovat dotykem, klávesnicí, se zvětšeným textem i při změně orientace. Neexistuje univerzální počet položek ani povinný vzor. Volbu je třeba ověřit na skutečných úlohách a zařízeních, nikoli pouze na statickém obrázku.
Priorita menu vychází z úkolů, ne z interních oddělení
Shromážděte nejčastější cíle z uživatelského výzkumu, interního vyhledávání, podpory a analytiky. Rozlište primární úkoly, doplňkové informace a systémové odkazy. Hlavní navigace nemusí obsahovat každou stránku. Hlubší obsah může zpřístupnit kontextové menu, vyhledávání a patička, pokud uživatel vždy ví, kde se nachází.
Názvy položek pište slovníkem publika. Vágní označení jako „řešení“ nebo „více“ potřebují kontext, zejména pokud skrývají odlišné služby. Řaďte položky podle rozhodování, nikoli abecedně, pokud pro to není jasný důvod. U každé položky si zapište cílovou stránku a otázku, kterou má po kliknutí zodpovědět.
- hlavní služba nebo uživatelský úkol
- kontakt a dostupnost ve správném kontextu
- přihlášení nebo účet bez záměny s nabídkou
- vyhledávání u rozsáhlejšího obsahu
Ovládací prvek musí oznámit název i stav
Použijte skutečné tlačítko s přístupným názvem, nikoli klikací obrázek nebo obecný div. Stav otevření musí být programově dostupný a vizuálně zřejmý. Samotná ikona tří čar nemusí být každému jasná; text „Menu“ může snížit nejistotu. Kliknutí na logo má předvídatelně vést na domovskou stránku a mít vhodný název.
Po otevření nastavte focus na logické místo a po zavření jej vraťte na spouštěcí tlačítko. Klávesa Escape má menu zavřít, pokud se chová jako překryvná vrstva. Obsah za modálním oknem nesmí zůstat nahodile ovladatelný. U běžného rozbalovacího panelu naopak neimplementujte zbytečně složitý model klávesnice určený pro aplikační menu.
Hierarchie zůstává čitelná i při více úrovních
Rozbalovací položku odlište od odkazu na nadřazenou stránku. Pokud jeden prvek dělá obojí, chování na dotykových zařízeních bývá nejasné. Zvažte samostatný odkaz a samostatné tlačítko pro rozbalení. Aktuální sekci označte textem, stavem nebo stylem, který nevyužívá pouze barvu. Uživatel má vědět, co se změnilo.
U hluboké struktury zvažte postupně vnořené panely s jasným tlačítkem zpět a názvem aktuální úrovně. Pokud to podporuje danou úlohu, zachovejte při návratu pozici posunu a otevřenou větev. Animace nesmí zakrývat obsah ani ignorovat preferenci omezeného pohybu. Jednodušší hierarchie je často lepší než efektní přechod.
- jasný rozdíl mezi odkazem a rozbalením
- viditelný název aktuální úrovně
- předvídatelný návrat o jednu úroveň
- stav nezávislý pouze na barvě nebo ikoně
Dotyková plocha, zoom a orientace mění reálné chování
Ovládací prvky musí být dostatečně velké a oddělené, aby člověk neaktivoval sousední položku. Menu otestujte jednou rukou, se zvětšeným textem a v orientaci na šířku. Pevná hlavička nesmí zabírat většinu obrazovky ani zakrýt cíl po skoku na kotvu. Bezpečné okraje zařízení zohledněte v CSS.
Při otevření menu se vědomě rozhodněte, zda se smí pozadí posouvat. Náhodný posun pod překryvem vede po zavření na jiné místo. Změna rozměru nebo otočení nesmí zanechat skryté tělo stránky či rozbitý stav. Pokud JavaScript selže, základní odkazy mají zůstat dostupné díky progresivnímu vylepšení.
Testování sleduje dokončení cesty, ne pouze otevření menu
Připravte úkoly jako najít konkrétní službu, porovnat možnosti, zavolat na pobočku nebo pokračovat v účtu. Pozorujte, kde člověk hledá, co považuje za odkaz a zda se umí vrátit. Testujte dotyk, klávesnici, čtečku obrazovky, zvětšení a kombinaci zařízení s různou šířkou.
V analytice lze sledovat otevření menu a výběr položky, ale událost sama nevysvětlí důvod. Propojujte ji s dokončením úlohy, zpětnou vazbou a záznamem chyb bez sběru nepotřebných osobních údajů. Pokud uživatelé obcházejí menu přes vyhledávání, prozkoumejte názvy a strukturu dříve, než přidáte další úroveň.
Časté dotazy
Je ikona hamburgeru vhodná pro každý mobilní web?
Ne automaticky. Šetří místo, ale skrývá možnosti. U několika důležitých cílů může být vhodná viditelná spodní nebo horní navigace s jasnými názvy.
Kolik úrovní může mít mobilní menu?
Pevný limit neexistuje. Každá úroveň však zvyšuje námahu a riziko ztráty kontextu. Hlubokou strukturu ověřte na reálných úlohách.
Má se menu po kliknutí na odkaz samo zavřít?
Při přechodu na nový cíl obvykle ano. Při ovládání obsahu na stejné stránce musí být změna oznámena a focus umístěn logicky.
Zdroje a další čtení
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
