Proč nepoužívat hamburger menu

Pod pojmem hamburger menu se v oblasti uživatelských rozhraní rozumí skrytá navigace, která se zobrazí až po stisknutí ikony/tlačítka.

Kvůli své typické visuální podobě se označuje jako hamburger menu.

Hamburger menu

Přibližně v roce 2014 se stalo značně populární a začalo se šířit napříč webovými i jinými aplikacemi. Hamburger menu je přítomné i v aplikacích Windows 10 (z aplikace Pošta ve Windows 10 pochází předchozí obrázek).

Proč se používá?

Schovat navigaci do jediného tlačítka je obrovské usnadnění práce návrhářů uživatelských rozhraní.

Díky tomu není nutné zvlášť optimalisovat navigaci pro různě velká zařízení. Když už se na displej položky navigace nevejdou, zkrátka se všechno schová do malého tlačítka, které se už vždycky někam vejde.

Další zajímavostí jsou různé efektní visuální prvky a animace, které otevírání a zavírání navigace může obsahovat:

Vysunutí navigace

Jiné postupy jsou popsány v samostatném článku:

Symbol menu

Kromě nejrozšířenější podoby třech vodorovných pruhů:

Který lze snadno zadat přímo jako textový symbol, existují různé obdoby:

  • svislé tečky jako kebab menu Kebab menu
  • vodorovné tečky jako meatballs menu Meatballs menu

Názornost hamburger ikony

První problém hamburger ikony je její nízká srozumitelnost pro uživatele. Přestože se tento symbol používá i na mnoha významných stránkách a ve spoustě aplikací, existuje značný podíl lidí, kteří mu nerozumí.

Zvlášť méně zkušení uživatelé budou mít problém tři pruhy nebo puntíky identifikovat jako navigaci.

Při navrhování uživatelského rozhraní je se dobré používat co nejsrozumitelnější prvky (obvious always wins), což hamburger ikona příliš nesplňuje.

Je možné, že většina lidí identifikuje hamburger ikonu jako tlačítko pro menu. Opravdu důležité tlačítko by ale měl poznat každý, ne jen většina.

Popisek „Menu“

Pro zlepšení názornosti jde k hamburgeru přidat popisek Menu.

Hamburger menu

Umístění ikony menu

Dalším častým problémem hamburger navigací je jejich umístění na stránce – zejména při prohlížení na mobilních telefonech.

Při držení smartphone pouze v jedné ruce (pravé) vypadá dosažitelnost plochy na displeji přibližně následovně:

Příklad z 5" displeje, kdy zelená barva značí snadnou dosažitelnost, oranžová barva obtížně dosažitelnou plochu a do červené oblasti už se při držení jednou rukou bez přehmatávání nedostanu.

Obtížnost dosažení plochy na telefonu

Ikona pro menu v levém horním rohu rozbalující základní prvky webu je tedy pro praváka velmi nepoužitelná.

Režim ovládání jednou rukou

Nemožnost dosáhnout při držení telefonu jednou rukou na navigační prvky v horní části displeje se snaží řešit tvůrci mobilních operačních systémů režimem pro jednu ruku.

V mobilních Windows 10 se po delším podržení tlačítka Start přesune obsah obrazovky do dosažitelné části:

Režim jedné ruky

V iOS obdobně funguje dvojité poklepání na Home tlačítko.

Problém těchto gest je obecně v tom, že je většina lidí nezná.

Skrytí důležitého obsahu

Ten největší problém hamburger navigace / navigace umístěné „pod tlačítkem“ je ale někde jinde:

Ikona menu oproti konkrétním položkám nenese lákavou informaci o obsahu webu.

Popis Menu nebo tři pruhy či tečky symbolisující navigaci nejsou dostatečně lákavé, aby na ně návštěvník klikl.

Konkrétní názvy položek naopak lákavé být mohou a návštěvník je může zaregistrovat očima při rychlém skenování obsahu stránky.

Viditelné položky v navigaci navíc nabízí návštěvníkovi stručný přehled o obsahu webu.

Rozbalení navigace vyžaduje akci uživatele (kliknutí na tlačítko), aniž by věděl, co ho čeká. Pro nového návštěvníka webu je tedy otevření menu cesta do neznáma.

Skrytí položek do tlačítka proto snižuje pravděpodobnost, že se na ně návštěvník dostane, tudíž by v hamburger menu nemělo být nic důležitého.

Problém hamburger menu není ani tak v názornosti ikony, ale ve skrytí důležitého obsahu.

Náhrada hamburger menu

Nahrazení/doplnění hamburger ikonky „≡“ popisem „Menu“ tedy neřeší hlavní problém, který tkví ve skryté navigaci.

Co ale udělat s navigací na malé obrazovce mobilu?

Vodorovné menu s ikonami

Řada služeb opustila koncept hamburger navigace a nahradila ho vodorovnou navigací s ikonami.

Textové nabídky doplněné ikonkami nabízí srozumitelnost i při použití relativně malého písma. Příklad navigace na Twitteru:

Navigace na Twitteru

Facebook zobrazuje pouze ikonky. Méně podstatné možnosti jsou ukryty pod hamburger tlačítkem vpravo nahoře:

Navigace na Facebooku

Obdobný koncept používá i YouTube:

Navigace na YouTube

Navigace s textovými popisky bude srozumitelnější pro nové uživatele, zvlášť pokud se nepoužívají jen hodně zažité ikonky. Stálí uživatelé si vystačí už jen se samotnými ikonami.

Pro pohodlnější dosažitelnost prsty se navigace může nacházet v dolní části displeje.

Skrytí méně podstatného

Pro běžné obsahové weby může být problematické znázornit všechny položky ikonkami. Nabízí se tak z navigace nechat viditelné alespoň něco nejdůležitějšího a do tlačítka hamburgeru/další schovat méně podstatné položky.

Toto řešení jde snadno použít pro vodorovnou navigaci. JavaScriptem se přepočítá šířka jednotlivých položek a odkazy, které se už nevejdou, se přesunou do submenu rozbalitelného tlačítkem.

Případně se vodorovná navigace zkrátka ořízne podle dostupné šířky a vpravo bude překrytá tlačítkem pro zobrazení všeho. Tak to používá třeba web The Guardian:

Navigace na YouTube

V případě, že se navigace nikdy celá nevejde, jde použít elegantní řešení, kdy se JavaScriptem pouze přepíná oříznutí navigace. Tak funguje třeba lišta na Tiscali.cz

Navigace na Tiscali

Určení priorit

Pokud je v navigaci 20 položek, nabízí se položit otázku, jestli je opravdu všechno důležité a nešlo by počet zredukovat.

Tomuto problému jde předcházet navrhováním webů postupem mobile-first. Při návrhu nejprve pro desktop není nutné tolik přemýšlet nad tím, co je nejdůležitější, když je všude spoustu místa.

Jiný způsob navigace

V případě klasické navigace ukryté do tlačítka může být na stránce alternativní způsob navigace bez nutnosti mít viditelné globální menu.

Dostane-li se návštěvník rychle a pohodlně k obsahu, který potřebuje, je jedno, jestli tak učinil prostřednictvím běžné navigace ukryté za hamburgerem nebo použije tlačítko/odkaz v textu stránky.

Třeba v případě, že bude člověk hledat na webu restaurace její adresu a otevírací dobu, není potřeba použít klasickou navigaci, když budou tyto informace dostupné na hlavní straně místo neužitečného textu typu „Vítáme vás na webu“.

Podobně třeba sportovní server nabízející výsledky rovnou na hlavní straně si klasickou navigaci může odpustit:

Hlavní strana Sport.cz

Odkazy jinam

Efekty hamburger navigace

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Responsivní web

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

Stránkování

Stránkování

Jak správně řešit stránkování na webové stránce.

Nekonečné rolování

Nekonečné scrollování

Je lepší nekonečné rolování, klasické stránkování nebo tlačítko „Zobrazit další“?

Jak zvolit šířku stránky

Jak široký web udělat

Jakou zvolit optimální šířku webové stránky.

Prodleva při kliknutí na mobilu

Prodleva po tapnutí na mobilech

Co způsobuje 300 milisekundovou prodlevu po kliknutí na odkaz/tlačítko na dotykových zařízeních.

Komentáře