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.

Související pojmy