Mobilné menu stavajte podľa hlavných úloh, používajte textové názvy a predvídateľnú hierarchiu a otestujte otvorenie, focus, návrat aj dokončenie cesty na reálnych zariadeniach.
Mobilná navigácia má na malom priestore sprístupniť najdôležitejšie cesty bez toho, aby človek musel poznať organizačnú štruktúru firmy. Ikona menu, logo a pár skratiek nestačia, ak používateľ hľadá konkrétnu službu, cenu, kontakt alebo rozpracovanú úlohu. Slabé menu vytvára slepé vetvy a núti návštevníka opakovane otvárať a zatvárať vrstvy.
Dobrý návrh spája prioritu obsahu, jasné pomenovanie, stabilné správanie a prístupnú implementáciu. Musí fungovať dotykom, klávesnicou, so zväčšeným textom aj pri zmene orientácie. Neexistuje univerzálny počet položiek ani povinný vzor. Voľbu treba overiť na skutočných úlohách a zariadeniach, nie iba na statickom obrázku.
Priorita menu vychádza z úloh, nie z interných oddelení
Zozbierajte najčastejšie ciele z používateľského výskumu, interného vyhľadávania, podpory a analytiky. Rozlíšte primárne úlohy, doplnkové informácie a systémové odkazy. Hlavná navigácia nemusí obsahovať každú stránku. Hlbší obsah môže sprístupniť kontextové menu, vyhľadávanie a pätička, ak používateľ vždy rozumie, kde sa nachádza.
Názvy položiek píšte slovníkom publika. Vágne označenia ako „riešenia“ alebo „viac“ potrebujú kontext, najmä ak skrývajú odlišné služby. Zoraďte položky podľa rozhodovania, nie abecedy, ak na to nie je jasný dôvod. Pri každej položke si zapíšte cieľovú stránku a otázku, ktorú má po kliknutí zodpovedať.
- hlavná služba alebo používateľská úloha
- kontakt a dostupnosť v správnom kontexte
- prihlásenie alebo účet bez zámeny s ponukou
- vyhľadávanie pri rozsiahlejšom obsahu
Ovládací prvok musí oznámiť názov aj stav
Použite skutočné tlačidlo s prístupným názvom, nie klikateľný obrázok alebo všeobecný div. Stav otvorenia musí byť programovo dostupný a vizuálne zrejmý. Samotná ikona troch čiar nemusí byť každému jasná; text „Menu“ môže znížiť neistotu. Kliknutie na logo má predvídateľne viesť na domovskú stránku a mať vhodný názov.
Po otvorení nastavte focus na logické miesto a po zatvorení ho vráťte na spúšťacie tlačidlo. Escape má menu zavrieť, ak sa správa ako prekryvná vrstva. Obsah za modalitou nesmie zostať náhodne ovládateľný. Pri bežnom rozbalenom paneli zasa neimplementujte zbytočne zložitý model klávesnice určený pre aplikačné menu.
Hierarchia zostáva čitateľná aj pri viacerých úrovniach
Rozbaľovaciu položku odlíšte od odkazu na nadradenú stránku. Ak jeden prvok robí oboje, dotykové správanie býva nejasné. Zvážte samostatný odkaz a samostatné tlačidlo na rozbalenie. Aktuálnu sekciu označte textom, stavom alebo štýlom, ktorý nevyužíva iba farbu. Používateľ má vedieť, čo sa zmenilo.
Pri hlbokej štruktúre zvážte postupné vnorené panely s jasným tlačidlom späť a názvom aktuálnej úrovne. Zachovajte pozíciu scrollu a otvorenú vetvu pri návrate, ak to podporuje úlohu. Animácia nesmie zakrývať obsah ani nerešpektovať preferenciu obmedzeného pohybu. Jednoduchšia hierarchia je často lepšia než efektný prechod.
- jasný rozdiel medzi odkazom a rozbalením
- viditeľný názov aktuálnej úrovne
- predvídateľný návrat o jednu úroveň
- stav nezávislý iba od farby alebo ikony
Dotyková plocha, zoom a orientácia menia reálne správanie
Ovládacie prvky musia byť dostatočne veľké a oddelené, aby človek neaktivoval susednú položku. Menu otestujte jednou rukou, pri zväčšenom texte a v orientácii na šírku. Pevná hlavička nesmie zabrať väčšinu obrazovky ani zakryť cieľ po skoku na kotvu. Bezpečné okraje zariadenia zohľadnite v CSS.
Pri otvorení menu vedome rozhodnite, či sa pozadie smie posúvať. Náhodný posun pod prekryvom vedie po zatvorení na iné miesto. Zmena rozmeru alebo rotácia nesmie ponechať skryté telo stránky či rozbitý stav. Ak JavaScript zlyhá, základné odkazy majú zostať dostupné cez progresívne vylepšenie.
Testovanie sleduje dokončenie cesty, nie iba otvorenie menu
Pripravte úlohy ako nájsť konkrétnu službu, porovnať možnosti, zavolať pobočke alebo pokračovať v účte. Pozorujte, kde človek hľadá, čo považuje za odkaz a či sa vie vrátiť. Testujte dotyk, klávesnicu, čítačku obrazovky, zväčšenie a kombináciu zariadení s rôznou šírkou.
V analytike možno sledovať otvorenie menu a výber položky, no udalosť sama nevysvetlí dôvod. Spájajte ju s dokončením úlohy, spätnou väzbou a záznamom chýb bez zberu nepotrebných osobných údajov. Ak používatelia obchádzajú menu cez vyhľadávanie, preskúmajte názvy a štruktúru skôr, než pridáte ďalšiu úroveň.
Časté otázky
Je hamburger ikona vhodná pre každý mobilný web?
Nie automaticky. Šetrí miesto, ale skrýva možnosti. Pri niekoľkých dôležitých cieľoch môže byť vhodná viditeľná spodná alebo horná navigácia s jasnými názvami.
Koľko úrovní môže mať mobilné menu?
Pevný limit neexistuje. Každá úroveň však zvyšuje námahu a riziko straty kontextu. Hlbokú štruktúru overte na reálnych úlohách.
Má sa menu po kliknutí na odkaz samo zavrieť?
Pri prechode na nový cieľ zvyčajne áno. Pri ovládaní obsahu na rovnakej stránke musí byť zmena oznámená a focus umiestnený logicky.
Zdroje a ďalšie čítanie
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
