Hamburger menu: E-commerce příklady, výhody a nevýhody

Stále více lidí nakupuje online přes mobilní telefony, a proto musí být weby responzivní a uživatelsky přívětivé. Prostor na displeji telefonu je ale omezený. Pokud jsou navigační prvky vašeho e-shopu příliš natěsnané nebo matoucí, návštěvníci pravděpodobně odejdou ke konkurenci.

Řada webů a aplikací proto využívá univerzální prvek mobilní navigace, kterým je hamburger menu. Jednoduchá ikona tří vodorovných čar pod sebou se stala mezinárodním symbolem skryté nabídky. Dokáže sbalit celé menu e-shopu do jediného přehledného tlačítka.

V tomto článku se podíváme na hlavní výhody i úskalí hamburger menu, jeho historii, klíčové funkce a tipy, jak ho efektivně zapojit do návrhu vašeho mobilního webu.

Co je hamburger menu?

Po dlouhá léta sloužilo jako standard webové navigace horizontální menu, tedy řada textových odkazů pro jednotlivé kategorie rozprostřená v horní části obrazovky. Na přelomu nultých a desátých let tohoto století ale díky rozvoji chytrých telefonů a mobilního internetu prudce vzrostlo prohlížení webu na mobilech. Webdesignéři proto museli najít prostorově úspornější řešení pro celkový design webových stránek.

Tím se stalo právě hamburger menu (☰). Jde o jednoduchou ikonu tvořenou rovnoběžnými vodorovnými čarami (řekněme housky) obklopujícími prostřední čáru (hamburgerový plátek masa). Tento prvek umožňuje uživatelům podle potřeby rozbalovat a sbalovat navigační možnosti. Tlačítko hamburger menu obvykle najdete v levém nebo pravém horním rohu webu nebo aplikace.

Historie hamburger menu

Hamburger menu ve skutečnosti vzniklo ještě před érou mobilních zařízení. Na začátku 80. let ho navrhl designér Norm Cox pro grafické uživatelské rozhraní pracovní stanice Xerox Star, která byla předchůdcem původního rozhraní počítačů Apple Macintosh. Cox tehdy hledal jednoduchou a snadno rozpoznatelnou ikonu, která by jedním kliknutím otevřela seznam dostupných akcí.

Po svém prvním uvedení se hamburger menu využívalo jen zřídka a téměř upadlo v zapomnění až do nástupu chytrých telefonů kolem roku 2009. Designéři tehdy hledali efektivní způsob, jak zobrazit položky nabídky na malých displejích bez zahlcení uživatele. Kompaktní a čistá ikona hamburger menu se ukázala jako ideální řešení.

Masovou popularitu tomuto prvku přineslo jeho nasazení v aplikaci Twitter a na dalších mobilních platformách. Následovalo využití v aplikaci Diktafon na iPhonu 3GS a v operačním systému iOS 4, což definitivně upevnilo jeho roli celosvětově známého symbolu skryté navigace.

Výhody a nevýhody hamburger menu

Hamburger menu je ideální pro mobilní zařízení, ale pro uživatele stolních počítačů mohou lépe posloužit navigační lišty a záložkové nabídky. Zde je důvod:

Výhody

Hlavním smyslem hamburger ikony je její kompaktní velikost. Šetří cenné místo na displeji a čistí e-commerce design, což oceníte zejména na menších obrazovkách chytrých telefonů. Kliknutím nebo klepnutím na ikonu se zobrazí celá navigace webu, ať už formou vysouvacího panelu, rozbalovací nabídky nebo překrytí celé obrazovky. Na mobilních zařízeních to výrazně zlepšuje zákaznickou zkušenost.

Nevýhody

Úspora místa je sice nespornou výhodou, ale podle některých odborníků může hamburger menu na desktopu zhoršovat dohledatelnost obsahu. Pokud uživatelé ikonu neznají, mohou ji snadno přehlédnout a minout důležité sekce e-shopu nebo navigační odkazy.

Tomuto problému předejdete využitím responzivních šablon (jako jsou například Shopify šablony), které přizpůsobují strukturu nabídky konkrétnímu zařízení. E-shop pak na počítačích zobrazuje tradiční horizontální lištu a na mobilech se automaticky přepne na hamburger menu, aby ušetřil místo na displeji.

Příklad z praxe: Hamburger menu v akci

V praxi se často setkáte s tím, že e-shopy využívají responzivní design, takže se hamburger menu objevuje pouze v mobilní verzi, zatímco na počítačích se zobrazuje jiný styl nabídky. Zde je konkrétní příklad e-shopu, který hamburger menu využívá efektivně:

Gymshark

E-shop značky Gymshark skvěle ukazuje, jak se může desktopová verze lišit od té mobilní. Na počítači žádné hamburger menu nenajdete, na mobilu se však tato ikona zobrazuje v levém horním rohu. Po klepnutí na ni se objeví vyhledávací pole a podkategorie produktů. Zpět na hlavní stránku se snadno vrátíte klepnutím na křížek (X) v pravém horním rohu.

Hamburger menu Gymsharku funguje dobře, protože upřednostňuje to, na čem záleží. Hned na prvním místě ukazuje slevy a nové kolekce oblečení, čímž okamžitě přitahuje pozornost zákazníka. Rozhraní je navíc velmi intuitivní, protože tlačítko nabídky sedí přesně tam, kde ho uživatel čeká, a po otevření nabízí jednoduchý a přehledný seznam kategorií.

Tipy pro úspěšné hamburger menu

Majitelé e-shopů, kteří využívají hamburger menu, by se měli držet těchto šesti tipů, které zlepší uživatelskou zkušenost a konverzní poměr:

Zajistěte jeho trvalou viditelnost

Ve většině případů je hamburger menu malé. Ujistěte se, že je návštěvníci i tak snadno najdou. Umístěte ho do levého nebo pravého horního rohu obrazovky, kam se uživatelé obvykle dívají. A na všech stránkách webu jej zachovejte na stejném místě.

Držte se standardní ikony hamburgeru

Pro své hamburger menu používejte všeobecně známé tři rovnoběžné vodorovné čáry (☰). Tyto ikony jsou rozšířené a většina uživatelů okamžitě rozumí jejich účelu.

Upřednostněte hierarchii položek nabídky

Uspořádejte položky v menu logicky. Můžete přidat vyhledávací pole a poté seřadit nejdůležitější a nejčastěji používané kategorie či stránky odshora dolů.

Myslete na mobilní přívětivost a přístupnost

Ujistěte se, že vaše hamburger menu funguje dobře na všech mobilních zařízeních a dotykových obrazovkách. Položky nabídky by měly být dostatečně velké, aby se na ně dalo snadno klepnout prstem.

Přidejte animaci a vizuální zpětnou vazbu

Jemné efekty poskytují zákazníkům při interakci s menu užitečná vizuální vodítka. Čáry se například mohou otočit a proměnit v křížek (X) nebo znaménko plus (+), což jasně signalizuje otevření a zavření nabídky. Čáry mohou také měnit tloušťku nebo se nenápadně rozšiřovat. Efekty postupného prolínání a vysouvání zase dodávají pohybu hloubku. Případně můžete při klepnutí změnit barvu ikony nebo přidat efekt lehkého odskočení.

Testujte a sbírejte zpětnou vazbu

Než své hamburger menu dokončíte, otestujte jej na skutečných uživatelích. Sledujte, jak s ním pracují, a shromažďujte zpětnou vazbu.

Používání hamburger menu s dalšími navigačními nástroji

Někdy je nejlepším způsobem, jak zlepšit použitelnost webu, zkombinovat různé typy tlačítek a nabídek. Každý prvek má své silné a slabé stránky, ale při společném nasazení dokážou vytvořit mnohem plynulejší a efektivnější nákupní zážitek.

Webdesignéři e-shopů mohou využít kombinace, které usnadňují procházení zboží a zároveň nabízejí jasný a přímý přístup, který vede k e-commerce nákupnímu košíku a Shopify checkoutu. Zkontrolujte, zda se na všechny navigační prvky snadno klepe na dotykových displejích. Vyzkoušejte různé varianty a zjistěte, co vaší cílové skupině vyhovuje nejvíce:

• Horní navigace + hamburger. Horní navigaci použijte pro zásadní kategorie a funkce, jako jsou obchod a košík, zatímco hamburger menu si vyhraďte pro přístup k méně častým navigačním prvkům, jako jsou stránky O nás, Kontakt, Zákaznický servis a Zásady vrácení zboží. Tím zůstane hlavní obrazovka přehledná, ale stále poskytuje rychlý přístup k potřebným stránkám.
• Záložková navigace + hamburger. Záložkovou navigaci použijte uvnitř stránky kategorie produktů k filtrování nebo řazení produktů, jako jsou Novinky, Nejprodávanější a Řadit podle ceny. To umožňuje uživatelům rychle zpřesnit vyhledávání produktů poté, co k celkové navigaci na webu použili hamburgerové menu.
• Přilepená hlavička + hamburger. Přilepená hlavička obsahuje důležité rychlé odkazy na hlavní kategorie a zůstává v horní části obrazovky i při posouvání. Hamburger menu pak slouží pro vedlejší stránky.

Například web Fly by Jing používá hamburger menu pro obecný výběr z nabídky, ale samotná stránka obchodu využívá záložkovou nabídku se čtyřmi možnostmi („Omáčky“, „Sady“, „Spíž“ a „Merch“) pro další zpřesnění.