Hamburger menu: kdy schovat navigaci a kdy ne
Hamburger menu je ikona ze tří vodorovných čar, pod kterou se na mobilu schovává navigace webu. Šetří místo na malé obrazovce, ale cokoli do něj dáte, návštěvník nevidí, dokud ho neotevře. U malého webu proto rozhoduje hlavně to, co v menu zůstane a co bude vidět i bez kliknutí.
Aktualizováno
Proč se navigace na mobilu schovává
Na počítači se vedle loga vejde šest i osm položek menu v jednom řádku. Na telefonu o šířce kolem čtyř set pixelů ne – položky by se zalomily do několika řádků a zabraly polovinu první obrazovky. Proto se při úzkém displeji menu sbalí pod jedno tlačítko a po klepnutí se vysune přes stránku nebo pod hlavičku.
Je to součást toho, čemu se říká responzivní web: stejný obsah, jiné uspořádání podle velikosti obrazovky. Hamburger je jen jedna z možností, jak s navigací naložit, a ne vždy ta nejlepší.
Kdy schování menu škodí
Co je schované, to se používá méně – lidé klikají hlavně na to, co vidí. Ikona se třemi čárkami je dnes známá, ale pořád je to krok navíc. Problém nastává, když se do menu ukryje i to, kvůli čemu lidé přišli:
- telefon a tlačítko pro objednání jsou jen v rozbaleném menu, takže zákazník, který chce rovnou volat, hledá,
- menu má jen tři položky a schovávat je nemá smysl – vešly by se do hlavičky i na mobilu,
- položky mají interní názvy („Portfolio“, „Řešení“, „Know-how“), ze kterých není poznat, kde je cena nebo kontakt,
- menu je hluboké – podnabídky ve třech úrovních se na dotykové obrazovce ovládají špatně a člověk snadno ztratí přehled.
Alternativy k hamburgeru
| Řešení | Kdy se hodí | Slabina |
|---|---|---|
| Viditelné položky v hlavičce | Web se třemi až čtyřmi krátkými položkami | Při delších názvech se na úzkém displeji nevejdou |
| Spodní lišta | Weby a aplikace, kde se často přepíná mezi pár sekcemi | Zabírá místo dole a u běžného webu působí jako aplikace |
| Kombinace | Hlavní akce (Volat, Objednat) vidět, zbytek v menu | Je potřeba rozhodnout, co je opravdu hlavní |
| Posuvný řádek záložek | E-shopy a katalogy s kategoriemi | Část položek je mimo obrazovku a lidé je nemusí objevit |
U většiny malých firemních webů funguje kombinace: logo, viditelné tlačítko s telefonem nebo poptávkou a hamburger pro ostatní stránky. Jak má výrazné tlačítko vypadat a co na něm napsat, rozebírá heslo CTA.
Jak navrhnout menu malého webu
- Začněte seznamem otázek zákazníků, ne seznamem stránek. Co dělá, kolik to stojí, kde je a jak se objednat – z toho vyjdou položky.
- Pojmenujte položky slovy zákazníka. „Ceník“ místo „Investice“, „Kontakt“ místo „Napište nám svůj příběh“.
- Držte se pěti až sedmi položek a nejvýš jedné úrovně podnabídky. Co se nevejde, patří do patičky nebo na stránku služby.
- Nejdůležitější dejte na začátek a na konec seznamu; prostřední položky se čtou nejméně pozorně.
- Kontakt nechte vždy vidět – v hlavičce, v liště, která zůstává nahoře, a znovu v patičce.
Na hlubších webech, kde se člověk dostane o dvě tři úrovně níž, pomáhá orientaci také drobečková navigace – ukáže cestu zpátky bez otevírání menu.
Technické minimum: aby menu šlo ovládat každým
Hamburger je tlačítko a má se chovat jako tlačítko. Pár věcí, které se při kontrole objevují nejčastěji:
- ikona má textový popisek pro čtečky obrazovky („Otevřít menu“) a tlačítko oznamuje, jestli je menu otevřené, nebo zavřené,
- menu jde otevřít, projít a zavřít i klávesnicí; klávesa Escape ho zavře a fokus se vrátí na tlačítko,
- plocha pro prst je dost velká – pravidla WCAG 2.2 požadují na úrovni AA aspoň 24 × 24 CSS pixelů nebo dostatečný odstup od okolních prvků, pohodlnější je víc,
- otevřené menu nejde „proklikat“ na stránku pod ním a dá se zavřít i jinak než malým křížkem v rohu.
Širší souvislosti, proč na ovladatelnosti záleží, vysvětluje heslo přístupnost webu.
Navigace v našich webech
Strukturu menu a to, co zůstane vidět na mobilu, řešíme už při návrhu, ne až při kódování. Jednodušší navigaci dostane i Vizitkový web za 15 000 Kč; u Firemního webu (20 000 Kč) k tomu patří návrh obsahu a textů, takže názvy položek vznikají spolu se stránkami, na které vedou.
Časté otázky
Proč se tomu říká hamburger?
Ikona ze tří vodorovných čar připomíná housku s karbanátkem uprostřed. Název se ujal mezi grafiky a vývojáři a dnes se používá i v češtině. Uživatelé ho většinou neznají – poznají jen samotnou ikonu.
Mám k ikoně připsat slovo Menu?
U webů, kde chodí i starší nebo méně zkušení lidé, to pomáhá. Slovo vedle ikony zvětší plochu, na kterou jde kliknout, a odstraní pochybnost, co tři čárky znamenají. Na čtečce obrazovky musí tlačítko mít textový popisek tak jako tak.
Má se hamburger menu ukazovat i na počítači?
U malého webu s pár položkami obvykle ne. Na široké obrazovce je dost místa, aby menu bylo vidět celé, a schovávat ho jen přidává jedno kliknutí navíc. Výjimkou jsou weby s velmi rozsáhlou navigací, kde se skrytá nabídka používá jako doplněk.
Kam dát telefon, když je menu schované?
Mimo menu, přímo do hlavičky nebo do lišty, která zůstává při posouvání nahoře. Telefon a hlavní výzva jsou to, co lidé na mobilu hledají nejčastěji, a nemají kvůli nim nic otevírat.
Jde menu zlepšit bez nového webu?
Často ano. Přejmenování položek, zkrácení seznamu, přidání popisku k ikoně nebo vytažení kontaktu do hlavičky jsou úpravy obsahu a šablony, ne přestavba. Rozsah posoudíme podle toho, na čem web běží.