Čo je Hamburger menu?
Hamburger menu je navigačný prvok reprezentovaný ikonou troch vodorovných čiar (☰), ktorý po kliknutí zobrazí alebo skryje hlavné menu webstránky. Používa sa najmä na mobilných zariadeniach, kde nie je dostatok miesta pre plné menu.
Definícia Hamburger menu
Definícia hamburger menu
Hamburger menu (anglicky hamburger button) je tlačidlo v rozhraní webstránky alebo aplikácie, zvyčajne umiestnené v hornom rohu obrazovky. Jeho funkciou je prepínať medzi skrytým a zobrazeným stavom navigačného menu. Ikona pozostáva z troch vodorovných rovnobežných čiar (☰), ktoré pripomínajú hamburgert — odtiaľ názov.
Ikonu pôvodne navrhol Norm Cox ako súčasť grafického rozhrania počítača Xerox Star, predstaveného v roku 1981. Cox opísal jej vytvorenie slovami, že mala byť „jednoduchá ako dopravná značka, funkčne zapamätateľná a napodobňovať vzhľad zobrazeného zoznamu menu". Na prácu mal len 16x16 pixelov. Ikona sa krátko objavila aj vo Windows 1.0 v roku 1985.
Moderné použitie
Hamburger menu sa masovo rozšírilo s príchodom smartfónov — na malom displeji nie je miesto pre celú navigáciu. Popularizovali ho aplikácie ako Facebook a Gmail. Dnes je štandardom na mobilných verziách webstránok.
Výhody a nevýhody
- Výhody: Šetrí miesto na obrazovke, udržiava čistý dizajn, používatelia si na ikonu zvykli
- Nevýhody: Skrýva navigáciu — návštevníci nemusia vedieť, čo menu obsahuje. Niektoré štúdie ukazujú, že viditeľné menu má vyššiu mieru interakcie.
- Alternatívy: Tab bar (spodná navigácia), viditeľné textové odkazy, kombinácia najdôležitejších položiek viditeľne + zvyšok v hamburger menu
Praktický príklad
Príklad: Webstránka hotela na mobile.
Na počítači vidíte celé menu: Domov | Izby | Reštaurácia | Wellness | Kontakt | Rezervácia.
Na mobile sa toto menu skryje za ikonu ☰ v pravom hornom rohu. Po ťuknutí sa vysunie panel so všetkými položkami.
Tip: Tlačidlo „Rezervovať" nechajte viditeľné aj na mobile — je to váš najdôležitejší CTA a nemalo by byť skryté v hamburger menu.
Často kladené otázky
Čo je hamburger menu?
Hamburger menu je navigačný prvok s ikonou troch vodorovných čiar (☰). Po kliknutí zobrazí hlavné menu webstránky. Názov dostal podľa podobnosti ikony s hamburgerom.
Kto vynašiel hamburger menu?
Ikonu navrhol Norm Cox v roku 1981 pre grafické rozhranie počítača Xerox Star. Masovo sa rozšírila až s príchodom smartfónov okolo roku 2009-2012.
Je hamburger menu dobré pre UX?
Hamburger menu je praktické riešenie pre mobilné zariadenia, kde je málo miesta. Na desktope je však lepšie zobraziť navigáciu viditeľne — skryté menu znižuje mieru interakcie.
Aké sú alternatívy k hamburger menu?
Alternatívy zahŕňajú spodný tab bar (ako v mobilných appkách), viditeľné textové odkazy, prioritnú navigáciu (najdôležitejšie položky viditeľne, zvyšok v „Viac...") a mega menu.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.