Hamburger menu u Desktopové verze webů?

Leschinger.cz
Jul 27, 2017 · 3 min read

Nejednou jsem se setkal s názory Český UX designérů a návrhářů webových produktů, že tzv. “mobilní menu” přeci nepatří na desktopovou verzi webu. Že je to nesmysl. Názory se různí nicméně pojďme se na to podívat blíže.

Názor, proč ho nepoužívat u desktopové verze

Často čtu názory UXáků že prostě ne. Nepoužívat toto (podle nich) mobilní menu u desktopové verze. Protože položky menu musí být dostupné na jedno kliknutí a že tři čárky, přeci nikomu nic neříkají. Je to pravda? Lze toto tvrzení odmítnout? Obecné zásady použitelnosti diktují, že uživatelé procházejí zbytečně dalšími kroky, aby se dostali tam, kam potřebuji. Kdykoli vytvoříme jakoukoli bariéru k obsahu, děláme pro naše uživatele věci těžší.

Aby jsme jim dali za pravdu, tak podle studií, pouze 52% lidí ve věku 45+ let ví, co tato ikona znamená.

Hamburger na web (ne)Patří

Je to ovšem věc názoru a situace. Za dané situace, stačí k oněm třem kouzelným a odmítajícím čárkám připsat slovíčko MENU a hned je to zřetelnější i z hlediska UX.

Rozdíl mezi Hamburger menu

Tvrzení, že “hamburger menu” patří pouze na mobil je možná trošku zcestné. Proč? protože v době mobilních technologií se s touto ikonou setkáváme ve více než hojné míře. Lidé si na ní zvykají a zvykat budou dále. Ale naučili se jí používat. Před cca 5 lety, by toto tvrzení možná bylo pravdivé. V dnešní době si myslím, že je dost na ústupu.

Několik plusů, hamburger menu použít i u desktop verze

Weboví designéři a návrháři UX mají rádi jednoduché věci . To zahrnuje čistý a někdy i minimalistycký design. Použitím skrytého menu a ikony hamburgerů můžeme odstranit navigační lištu a nahradit ji něčím čistým a nenápadným. I když to může být za cenu funkční jednoduchosti, lze snadno pochopit, proč je čistá vizuální jednoduchost použitá.

Nesčetné studie prokázaly, že když je dáno příliš mnoho možností, většina lidí pravděpodobně vůbec nic nevybere. Jedna konkrétní studie zjistila, že uživatelé jsou ve skutečnosti budou jednat desetkrát méně, u plného regálu zboží, než když tam bude jediný kus. Takže použitím hamburger menu odstraníte hromadu rušivých prvků, pod jednu ikonu. A nabídnete uživatelům jen to, co opravdu chtějí

Jakou cestou jít a co mám dělat? Tuto otázku si v duchu klade nejeden uživatel webových stránek. Použitím hambuger menu zjedodušujete cestu uživatele k patřičnému obsahu

Osvědčené postupy pro implementaci Hamburger menu

Ujsitěte se, že je možné na ikonu kliknout. Že se nejdná pouze o lacinou výzdobu

Párování se silným CTA. Je vhodné umístít do této skryté nabídky i nějaké CTA. Například odběr novinek, kliknutí na ikonu sociálních sítí a podobně.

Ikona s textem. Samotná ikona třech čar starším uživatelům nic neřekne. Napište k ní text. Lépe budete navigovat zmíněné uživatele na stránce.

Nezapomínejte, že rozmelená nabídka by také měla jít zavřít. Ideálně tak, že ikona hamburger menu, se změní na křížek na zavření.

Ukázka animace hamburger menu

Závěrečná myšlenka

Použití ikony hamburger menu na desktopové verzi webu může být riskantní. Pokud se rozhodnete použít, ujistěte se, že je to z dobrého důvodu a proveďte osvědčené postupy. Pokud se používá správně, s jasnou výzvou k akci a správným obsahem na stránce , možná vás překvapí, že může nabídnout vašim webům výraznou výhodu.

Leschinger.cz

Written by

UI-UX designer & Frontend developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade