Hamburger menu je zlo.

Tři vodorovné čárky. Tak ty mě poslední dobou vytáčí!

Pokud cokoliv navrhujete na mobilu, tak pod třemi čárkami schováváte navigaci. Ale často to není ani jediný, ani nejlepší způsob.

A tím nemyslím, že místo vodorovných čárek uděláte tečky (Chrome) nebo jiné hovadiny. Je libo kebab?

Ale vezmu to popořadě.

Historie hamburger menu

Poprvé se tahle ikona objevila v roce 1981. Navrhnul ji Norm Cox pro osobní počítač Xerox. Spolu s celou grafikou operačního systému(!).

Xerox hamburger ikona

Jak sám říká:

  • chtěl, aby se to podobalo textovému seznamu,
  • měl na to 16 na 16 pixelů,
  • z legrace říkal, že je to ventilační mřížka.

Jak se to správně vyslovuje

Pokud jste si mysleli, že se to vyslovuje hémbergr, tak jste na omylu. Správně je to takto:

Ale žerty stranou.

Hamburger menu je zlo

Pokud umístíte na normální web místo klasické navigace hamburger ikonu, tak vám přerazím obě ruce.

Ale před tím vám pošlu článek od Nielsen Norman, kde zjistili, že při použití hamburger ikony:

  • se sníží použití navigace o 44 % u desktopu a 34 % na mobilu,
  • lidi začnou navigaci používat později,
  • a používá se jim o 21 % hůř.

Upřímně? Nedávno jsem u dvou klientů řešil to, že v klasické navigační liště mají jen tlačítko e-shop a nemají tam vidět hlavní kategorie zboží. A jeden dokonce neměl ani to tlačítko e-shop a muselo se přes detail produktu a drobečkovou navigaci. Ale to je na jiný článek.

Alternativy hamburgeru

Dost záleží na tom, zda se jedná o aplikaci nebo webovou stránku na mobilu. U aplikace dává větší smysl mít navigaci dole, u webové stránky spíš nahoře. Takto to například dělá Facebook. V aplikaci má navigaci dole, na webu nahoře – aby nekolidovala s navigací prohlížeče.

Facebook navigace

Záložky

Pokud nechcete mít jako navigační prvek hamburger, tak tohle je nejpoužívanější volba – v mobilních aplikacích.

Spodní navigace

Výhody:

  • Hlavní záložky jsou viditelné.
  • Vím, v jaké části se nacházím (aktuální ikona je zvýrazněná).
  • Lidi jsou na to zvyklí z aplikací (Facebook).

Nevýhody:

  • Nevejde se vám tam víc než 4-5 tlačítek.

Tipy:

  • Vždycky mějte jednu záložku zvýrazněnou. Lidi tak budou vědět, kde se nachází.
  • Jako první nalevo dejte ikonu homepage a pak postupujte podle důležitosti.
  • K ikonám přidejte textový popis, zvýšíte tak pochopitelnost. Je jen málo ikon, které jsou pochopitelné všemi (domeček pro homepage, lupa pro hledání, křížek pro zavření).
  • Navigaci můžete schovávat a ukazovat při skrolování, ušetříte si tak trochu místa.

Záložky + hamburger

Ano, já vím. Pokud máte více než 5 voleb, tak si holt budete muset pomoct hamburgerem, kam schováte zbytek voleb. Dělá to tak například Facebook.

Není to úplně šťastné řešení, protože schováváte navigaci. Ale pokud ostatní 4 tlačítka vedou na nejužívanější funkce (ideálně 80 %), tak to zas takové faux pa není.

Spodní menu ve Facebook aplikaci

Výhody:

  • Můžete mít víc než jen 5 tlačítek

Nevýhody:

  • Část navigace schováváte.

Tipy:

Po kliknutí na hamburger menu:

  1. se otevře dropdown s dalšími volbami (pokud se vám vejdou na jednu obrazovku), nebo
  2. můžete uživateli ukázat samostatnou stránku (pokud mu toho chcete ukázat opravdu hodně).

Postupně se ukazující navigace

Tohle je taková sofistikovanější varianta předchozí volby. Navigační tlačítka ukazujete podle dostupné šířky displeje.

Progresivní navigace

Výhody:

  • Využíváte maximálně dostupný prostor a můžete ukázat víc než 5 tlačítek.
  • Je to frajeřina.

Nevýhody:

  • Náročné na programování, protože se vám dynamicky mění obsah tlačítka s dalšími volbami.

Skrolovací navigace

Navigace je vlastně širší než displej. Ale graficky zdůrazníte, že navigace pokračuje napravo a dá se posunout prstem.

Tady příklad Glami (díky za hezký článek od Martin Mussila z Heuréky).

Scrollovací navigace na Glami.cz

Tipy:

Musí být jasné, že navigace pokračuje vpravo. Buďto tam dejte šipku doprava, tlačítko více nebo to alespoň udělejte tak, že poslední volba je useknutá. Aby bylo vidět, že to pokračuje. Tohle je spíš varianta pro aplikaci než pro web.

Vyjížděcí navigace

V zásadě alternativa hamburgeru. Ten tam pořád je, ale menu vyjíždí ze strany a část obsahu stránky je pořád vidět.

Swipovací navigace

Výhody:

  • Máte maximální prostor pro obsah.
  • Lépe se to ovládá – swipnutím doprava kdekoliv na stránce se dostanete do navigace.

Nevýhody:

  • Navigace je skrytá.
  • Musíte to lidi naučit, nejsou na to zvyklí.
  • Můžete omylem místo zobrazení navigace kliknout na něco v obsahu stránky (třeba galerii nebo mapu).

Tipy:

Tuhle variantu bych doporučoval v případě, že lidi primárně konzumují obsah stránky a navigace je podružná.

Stále viditelná navigace

Není to hezké, ale účel to splní.

Permanentní navigace

Výhody:

  • Vidíte pořád všechny tlačítka.

Nevýhody:

  • Odsouvá to obsah dolů.
  • Když to vidíte na každé stránce, tak vám to začne vadit. Teda aspoň mně jo.

Tipy:

Určitě by mělo na první obrazovce zůstat dost místa i na obsah, takže pokud vám navigace zabírá víc než jednu obrazovku, tak na tohle řešení zapomeňte.

Výsledky A/B testů

Určitě jste někde viděli výsledky, kde proti sobě bojovala ikona hamburgeru a tlačítko se slovem MENU. A vyhrávalo to tlačítko s textem.

Tak já vás zklamu, není tomu tak vždycky.

Lepší textové tlačítko – Exis web

Fungovalo to například pro web Exis web.

Exis web ab test hamburger

Zajímavé bylo, že pouze slovo MENU bez ohraničení bylo horší než ikona hamburgeru. Nicméně podotýkám, že test běžel jen 5 dní.

Šulnul – Booking.com

Booking to testoval taky. Protože booking testuje všechno :).

Varianta ikona:

Varianta text:

A výsledek nula od nuly pošla. Viz jejich článek.

Lepší růžové textové tlačítko – Diamond Candles

Peep Laja z ConversionXL to testoval taky. Po 6 týdnech a 240 000 uživatelích se ukázalo, že všechny varianty fungují lépe než čistě ikona.

Tady výsledky AB testu:

Test hamburgeru na Diamond Candles

Tohle byla výherní varianta:

Následně testovali ještě další varianty, ale ty propadly.

Závěr

Až budete příště koukat na to, jak vám navrhli navigaci na mobilu, tak si na mě vzpomeňte. Snažím se totiž vytěsnit to, že si na mě lidi vzpomínají při návštěvě veřejných WC.

 

Zdroje:

Horizontální navigace
https://uxplanet.org/horizontal-scrolling-in-mobile-643c81901af3
https://blog.iamsuleiman.com/horizontal-scrolling-lists-mobile-best-practices/

Alternativy hamburgeru
https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db
https://www.webdesignerdepot.com/2017/08/5-smart-alternatives-to-the-hamburger-menu/
https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/

AB testy s hamburger menu
https://conversionxl.com/blog/testing-hamburger-icon-revenue/
https://booking.design/would-you-like-fries-with-that-4edf46849380

3 Responses to Hamburger menu je zlo.

  1. Kráťa 8. listopad 2018 at 13:42:22 #

    Pěkný článek. Ještě by se mi líbil nějaký o zlu „karusel s obrázky přes 3/4 monitoru při vstupu na web“ a weby „all in one“, co je vymysleli u Apple a spousta firem už to dělá také.

    • Ondřej Ilinčev
      Ondřej Ilinčev 21. listopad 2018 at 23:05:16 #

      Strefovat se do karuselu je cheapshot, všichni uxáci ho nenávidí :). All-in-one myslíš all on one page? A nestačí, že je to SEO sebevražda?

Trackbacks/Pingbacks

  1. Hamburger menu je zlo. – Jedujedu.cz - 17. listopad 2018

    […] on 08.11.2018 | by […]

Napsat komentář

Powered by WordPress. Designed by WooThemes