Jak na mobilní navigaci a proč potřebujeme hamburgery

Hlavní navigace webů jsme zvyklí dělat tak, že se nám na mobilní obrazovky nevejdou. Proto je schováváme a opatřujeme vypínačem. To je stav mysli většiny dnešních webařů.

Nejdřív ale dovolte jednu zásadní otázku.

Proč jsme vlastně navigace neschovávali už v době čistě desktopových webů?

Protože nejsme blbí. Víme, že navigace musí na webech plnit minimálně tři úkoly:

  1. Mapa – uživatel by měl z navigace snadno pochopit strukturu webu a najít co hledá.
  2. Ukazatel – uživatel by měl vědět, kde na mapě se aktuálně nachází.
  3. Reklama na obsah – zájmem provozovatele webu je, aby uživatel nepřišel o nic zajímavého.

Jak dobře plní tyto tři úkoly schovaná navigace? Že je neplní vůbec? Bingo!

Dobře, pro ideální svět stručných navigací na velkých displejích bychom měli vyřešeno. Prostě je na mobilech neschovávat.

Dobré a špatné hamburgery

Jenže tady máme i weby se složitými navigacemi a zařízení s velmi malými displeji.

Jak uvažovat při návrhu hlavní navigace?

Navrhněte navigaci tak, aby byla co nejjednodušší. Ano, už při vymýšlení struktury webu aktivujte Mobile First režim. Na dvacet šest položek v hlavní navigace a druhou i třetí úroveň prostě zapomeňte. Zachrání vám to kejhák při návrhu designu webu.

Navrhněte web, jako by tam navigace nebyla. Je jasné, že na těch nejmenších displejích budeme muset skoro vždy minimálně část navigace schovat. Proto se musíme naučit vymýšlet weby bez ní. Navigační schéma prostě duplikujte v obsahu, do úvodní stránky dejte něco jako mapu webu.

Pokud jde navigace zobrazit celá, prostě ji zobrazte celou i na mobilech. Zní to trochu blbě, jenže svět je plný webů s navigací o čtyřech položkách, které používají hamburger jen proto, že to je in. Pokud je rozlišení dostatečně široké, prostě navigaci zobrazte.

Jestliže navigaci nedokážete zobrazit celou, zvažte jiné návrhové vzory než prosté zapínání a vypínání. Doporučuji vzor s prioritizací položek.

Až pokud žádné z těchto možností nezabrala, volte návrhový vzor s vypínačem navigace. Ano, ten, kterému podle vzhledu ikony říkáme hamburger.

Číst ale nepřestávejte. Volbou hamburgeru se otevírá nová sada průšvihů, které můžete nechtěně napáchat.

Hamburger je potížista, ale potřebujeme ho

Ikona hamburgeru a schovávání navigace je v poslední době pod palbou kritiky. Tvrdím, že na některých webech se mu nedá vyhnout a že ji webdesign jako obor potřebuje.

O ikonách je známo, že trvá nějakou dobu než se mezi lidmi zavedou. Lidé se nenarodili ani se znalostí ikon pro play, pause a stop na hudebních přehrávačích.

Jedním z hlavních důvodů, proč jsme schopni symboly (play, pause a stop) používat bez textového značení je skutečnost, že si svou cestu mezi komunikační zkratky naší kultury našly díky neustálému opakování na magnetofonech a videopřehrávačích.

Andy Budd, In defence of the hamburger menu

Hamburger nový je a situaci nám ještě komplikují operační systémy a nativní aplikace na nich. Ty pro otevření navigace používají různé ikony (hamburger, kebab, masové kuličky…). Uživatelé zatím moc neví co si pod nimi představit.

Napsal jsem, že ikonu pro schování navigace ve webdesignu potřebujeme. Proto ji prostě musíme mezi lidi dostat. Nejlépe pomocí textových popisků.

Je také dobré v době minimalizmu a flat designu zmínit, že ikona by kromě textového popisku měla mít vzhled tlačítka.

Otevírá hamburger opravdu obsah, který reprezentuje?

Každá ikona je zjednodušenou abstrakcí toho co aktivuje. V případě hamburgeru je to seznam horizontálních položek. To velmi dobře odpovídá jednoduché navigaci s položkami řazenými pod sebe. Odpovídá to ale třeba víceúrovňové navigaci nebo třeba celé liště sekundárního obsahu, na který se dostanete kliknutím na hamburger například u jinak výborného webu Respektu?

Špatný symbol pro zobrazení sekundárního obsahu

Pokud nechceme naše milé uživatele úplně zničit, měli bychom hamburger používat jako abstrakci typu obsahu, který skutečně reprezentuje.

Jak v této souvislosti dodává Adam Fendrych i textový popisek „Menu“ je někdy dobré nahradit pojmenováním, které přesně popisuje obsah. Například „Kategorie“ nebo „Recepty”.

Co dělat, když hamburger použít musím?

Takže – některé weby navigaci zobrazí celou i na mobilech, některé se bez navigace zcela obejdou a některé použijí chytřejší navigační vzor jako je prioritizace položek.

Zbývá nám tu množina webů, u kterých je schovávání navigace nebo její části prostě nevyhnutelné. Minimálně na opravdu malých displejích, vezměme třeba šířky 240 pixelů. A nějakou ikonu k tomu potřebovat budeme.

Takže ano, hamburger je dobrý! Je dobré ale splnit tyto podmínky:

  1. Ikonu nezneužíváme pro typ obsahu, který nepředstavuje.
  2. Ikonu opatříme popiskem „Menu“. Hlavně u webů, které cílí mimo geekovské kruhy.
  3. Navigaci neschováváme na těch šířkách displeje, kde by ještě šla zobrazit celá nebo její podstatná část.
  4. Zařídíme, aby plocha kolem hamburgeru vypadala jako tlačítko.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Responzivní design.

Kompletní průvodce obrázky v responzivním designu

17. 5. 2017 v příručce

V responzivním designu často potřebujeme volit mezi různými variantami jednoho obsahového obrázku.

Weby versus aplikace

20. 4. 2017 v příručce

Zkouším se zamýšlet, kdy je lepší použít web a kdy nativní aplikaci. A definuji nativní, hybridní, progresivní a univerzální aplikace.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací