Design/UX

Hamburger menu

Co je to hamburger menu?

Hamburger menu je ikonka tří vodorovných čar (☰), která skrývá navigační menu na mobilních zařízeních a tabletech. Kliknutím na tuto ikonku se rozbalí kompletní navigace webu. Tento prvek dnes najdete prakticky na každém webu optimalizovaném pro mobily – řeší totiž zásadní problém: jak umístit celou navigaci na malou obrazovku telefonu, aniž by zabírala cenný prostor.

Název vznikl podle podobnosti s ikonkou hamburgeru. Tři vodorovné čáry připomínají burger mezi dvěma housky. Jednoduché, výstižné a snadno zapamatovatelné označení, které si rychle získalo místo ve světě webdesignu a stalo se standardem pro mobilní navigaci.

Jak hamburger menu funguje v praxi

Na počítači většina webů zobrazuje navigaci v plné kráse v záhlaví (headeru) stránky. Na mobilu ale není dost místa. Právě zde přichází na scénu hamburger menu.

Když návštěvník otevře váš web na telefonu, vidí místo celé navigace jen malou ikonku tří čar. Tato ikonka zabere minimum prostoru – obvykle jen 40-50 pixelů. Po kliknutí se otevře plnohodnotné menu, které může obsahovat všechny odkazy, podstránky i rozbalovací sekce.

Menu se může otevírat různými způsoby: vysunout zleva, zprava, shora, nebo se objevit jako překryvná vrstva přes celou stránku. Moderní weby často kombinují hamburger menu s animacemi – ikonka se může přeměnit na křížek (×) pro zavření menu. To dává uživateli jasně najevo, že menu je otevřené a lze ho zavřít.

Výhody hamburger menu

  • Úspora místa na obrazovce

  • Hlavní benefit. Na mobilu je každý pixel cenný. Hamburger menu uvolní prostor pro důležitý obsah, hlavní nadpis nebo výrazné call-to-action tlačítko. Místo toho, aby horní část stránky byla zahlcená odkazy, máte čistý, přehledný layout.

  • Čistý a moderní vzhled

  • Minimalistický design je v kurzu. Hamburger menu vytváří uklizený dojem. Váš web vypadá profesionálně a není přehlcený informacemi. Uživatel se může soustředit na hlavní obsah stránky.

  • Standardizované řešení

  • Většina uživatelů dnes zná, co ikonka tří čar znamená. Je to univerzální symbol mobilní navigace. Nemusíte návštěvníky učit, jak používat váš web – přístup je intuitivní.

  • Flexibilita pro rozsáhlou navigaci

  • I když máte dvacet položek v menu s podkategoriemi, hamburger menu to zvládne. Můžete vytvořit víceúrovňovou strukturu bez obav, že se nevejde na obrazovku.

  • Snadná implementace

  • Pro vývojáře je hamburger menu standardní součást responzivního designu. Existují osvědčené postupy a řešení, která fungují spolehlivě napříč všemi zařízeními.

Nevýhody a omezení hamburger menu

Přestože je hamburger menu nesmírně populární, má svá úskalí. Hlavní problém: co je skryté, je méně viditelné. A co je méně viditelné, se méně používá.

Studie ukazují, že navigace schovaná za hamburger menu má nižší procento kliků než viditelná navigace. Někteří uživatelé prostě zapomínají, že menu existuje. Zvláště starší generace nebo méně technicky zdatní lidé nemusí automaticky vědět, že tři čáry znamenají menu.

  • Skrytá navigace snižuje proklikovost

  • Uživatel musí nejprve kliknout na ikonku, počkat na otevření menu a pak teprve kliknout na požadovaný odkaz. To prodlužuje cestu k cíli. Na desktopu by klikl jednou, na mobilu dvakrát.

  • Možný negativní vliv na konverze

  • Pokud je vaše navigace důležitým nástrojem pro konverze (například máte tlačítko "Cenová nabídka" nebo "Kontakt"), schování za hamburger menu může snížit počet konverzí.

  • Ne všichni uživatelé znají symbol

  • Starší generace nebo méně zkušení uživatelé internetu nemusí automaticky vědět, že tři čáry znamenají menu. Můžete to řešit přidáním textového popisku "Menu".

Praktické tipy pro použití hamburger menu

Abyste využili výhody a minimalizovali nevýhody, dodržujte tyto osvědčené postupy:

  • Kombinujte s viditelnými prioritními odkazy

  • Nejdůležitější odkaz (obvykle "Kontakt" nebo "Koupit") nechte viditelný i na mobilu vedle hamburger menu. Schováte zbylé položky, ale klíčovou akci necháte na očích.

  • Přidejte textový popisek "Menu"

  • Ikonka tří čar + slovo "Menu" vedle ní zvyšuje srozumitelnost. Ne každý pozná jen ikonku, ale text pomůže i těm méně zkušeným uživatelům.

  • Použijte dostatečně velkou klikací plochu

  • Minimum je 44×44 pixelů. Menší tlačítko je těžké trefit prstem. Uživatelé budou frustrovaní, když se jim nedaří menu otevřít.

  • Umístěte ikonku tam, kde ji uživatelé očekávají

  • Obvykle vpravo nahoře nebo vlevo nahoře. To jsou pozice, kde lidé hledají navigaci automaticky. Experimentální umístění uprostřed nebo dole matou.

  • Zajistěte rychlou animaci otevření

  • Menu by se mělo otevřít do 300 milisekund. Pomalé animace působí, že web laguje. Rychlá odezva zlepšuje celkovou UX (uživatelskou zkušenost).

Kdy hamburger menu použít a kdy ne

Hamburger menu je vhodné pro:

Weby s rozsáhlou navigací – E-shopy, portály, magazíny se spoustou kategorií a podkategorií. Pokud máte víc než 5-6 hlavních položek, hamburger menu dává smysl.

Aplikace a mobilní weby – V prostředí, kde uživatelé očekávají mobilní přístup a jsou zvyklí na mobilní konvence. Hamburger menu je zde standard.

Weby zaměřené na obsah – Blogy, zpravodajské weby, kde je priorita dát prostor samotnému článku nebo fotografii. Navigace je důležitá, ale neměla by dominovat.

Kdy zvážit alternativy:

Pokud máte jednoduchý web s 3-4 položkami v navigaci, zvažte viditelnou navigaci i na mobilu. Můžete použít ikony s textem nebo prostě klasické textové odkazy. Někdy je jednoduché řešení lepší než schované menu.

Pro konverzně orientované landing pages s jedním cílem (získat kontakt, prodat produkt) hamburger menu možná není nutné. Můžete mít jen logo a jedno výrazné CTA tlačítko.

Alternativy k hamburger menu

Hamburger menu není jediné řešení pro mobilní navigaci. Mezi alternativy patří:

  • Tab bar (spodní navigace)

  • Pevná lišta ve spodní části obrazovky s ikonami hlavních sekcí. Oblíbená v mobilních aplikacích, stále častěji i na webech. Umožňuje přístup k navigaci jedním palcem.

  • Zmenšená horizontální navigace

  • Na mobilech zobrazíte jen 3-4 nejdůležitější odkazy vedle sebe, zbytek schováte do "Více". Kombinuje viditelnost s úsporou místa.

  • Floating action button (FAB)

  • Plovoucí tlačítko, které po kliknutí zobrazí menu nebo akce. Moderní, ale může být méně intuitivní pro některé uživatele.

Nejčastější otázky o hamburger menu

Co je to hamburger menu a proč se tak jmenuje? Rozbalit

Hamburger menu je navigační ikona složená ze tří vodorovných čar (≡), která se používá především na mobilních zařízeních ke skrytí hlavního menu. Jméno pochází z vizuální podobnosti se sendvičem – tři čáry připomínají burger s dvěma plackami a náplní uprostřed. Při kliknutí nebo klepnutí se menu rozbalí a zobrazí navigační odkazy. Hamburger menu šetří místo na obrazovce, což je klíčové pro mobilní design.

Jaké jsou výhody hamburger menu? Rozbalit

Hlavní výhodou je úspora místa na obrazovce – místo dlouhého seznamu odkazů vidíte pouze malou ikonu. To je ideální pro mobilní zařízení s omezeným prostorem. Hamburger menu také vytváří čistý, minimalistický design a umožňuje ukrýt i rozsáhlou navigaci s desítkami položek. Uživatelé jsou na tento prvek zvyklí z většiny mobilních aplikací, takže je intuitivní a rozpoznatelný.

Má hamburger menu nějaké nevýhody? Rozbalit

Ano, hlavní nevýhodou je, že navigace je skrytá, což může snížit míru prokliků do jednotlivých sekcí webu. Uživatelé musí udělat extra krok (kliknout na ikonu), aby viděli dostupné možnosti. Studie ukazují, že viditelná navigace má vyšší conversion rate. Proto je důležité zvážit, zda je hamburger menu pro váš web opravdu nejlepší řešení.

Kdy použít hamburger menu a kdy ne? Rozbalit

Hamburger menu se hodí pro složité weby s rozsáhlou navigací (e-shopy, zpravodajské portály, firemní weby s mnoha sekcemi). Není vhodné pro jednoduché weby s 3-5 stránkami – tam je lepší zobrazit všechny odkazy viditelně. Na desktopu můžete použít klasickou horizontální navigaci a hamburger menu pouze na mobilech.