5 inteligentních alternativ k menu Hamburger
Obrazovka je cenným zdrojem na mobilních zařízeních. Abychom vyhověli výzvě malého prostoru na obrazovce a zároveň zpřístupnili navigaci, návrháři často spoléhají na skrytí navigace za ikonou hamburgerů, což je vynikající příklad skryté navigace. V tomto článku uvidíme, proč skryté navigace vytváří špatný UX a jaké alternativy jsou pro návrháře k dispozici.
Proč je nabídka Hamburgeru špatná pro UX
V mobilních zařízeních je viditelná navigace používána 1,5x více než hamburger
Pokud pracujete na digitálních produktech, pravděpodobně jste již přečetli desítky článků popisujících, jak hamburgerové menu na mobilních zařízeních škodí metrikám UX. Hlavní nevýhodou je jeho nízká objevitelnost a to je podpořeno skutečnými čísly. V kvalitativních studiích, NNGroup nalezen že skrytá navigace je méně objevitelná než viditelná nebo částečně viditelná navigace. To znamená, že pokud je navigace skrytá, uživatelé mají menší pravděpodobnost, že budou používat navigaci. Nabídky Hamburger pohánějí činnost, zpomalují průzkum a zaměňují lidi.
Takže co bychom měli místo toho použít?
Přestože pro mobilní aplikace a webové stránky neexistuje žádné pravidlo pro rychlé a rychlé použití, je obecné doporučení použít buď viditelné - hlavní navigační možnosti se zobrazují ve viditelné navigační liště nebo v navigaci s kombinovaným režimem , kde jsou některé z hlavních navigačních možností viditelné a některé jsou skryty pod interaktivním prvkem.
1. Záložka Tab
Máte-li omezený počet cílů nejvyšší úrovně na vašem webu nebo aplikaci, může být řešením navigace na kartách. Když je nabídka viditelná v horní nebo dolní části, je v podstatě reklama, že navigace je tam a lidé mohou vidět navigační možnosti hned od začátku.
Záložky se zdají být nejjednodušší navigační vzorek. Při navrhování tohoto druhu navigace je však třeba vzít v úvahu několik věcí:
- Karta panelu umožňuje zobrazit 5 nebo méně navigačních možností.
- Jedna z možností by měla být vždy aktivní a měla by být vizuálně zvýrazněna například použitím kontrastní barvy.
- První záložka musí být domovskou stránkou a pořadí záložek by se mělo týkat jejich priority nebo logického pořadí v uživatelském toku.
- Je lepší používat ikony spolu s popisky pro každou možnost navigace. Ikony bez štítků fungují pouze pro běžné akce, jako ikonu lupy pro vyhledávání a pro rozhraní, která uživatelé často používají (např. Instagram).
Tip: Chcete-li ušetřit prostor na obrazovce, navigační lišta by mohla být skrytá / odhalena při rolování dolů a nahoru.
2. Záložka s možností "Více"
Pokud máte více než 5 cílů nejvyšší úrovně, praktickým řešením by mohlo být zobrazení 4 prioritních úseků a 5. seznam položek zbývajících možností.
Principy návrhu tohoto řešení jsou v podstatě stejné jako pro panel Tab. Existuje pouze jedna výjimka: posledním prvkem je položka "více".
Položka "více" může fungovat jako rozbalovací nabídka nebo dokonce odkazovat na samostatnou navigační stránku se zbývajícími částmi. Od prvního pohledu toto řešení není mnohem lepší než nabídka hamburgerů, protože skrývá obsah a jeho štítek neříká příliš mnoho o tom, co se skrývá za ním. Pokud však správně upřednostňujete možnosti navigace, většina vašich uživatelů bude po celou dobu mít na obrazovce 4 nebo 5 viditelných navigačních prvků nejvyšší priority, aby se zlepšila navigační zkušenost pro ně.
3. Progressively Collapsing Menu
Postupně sbalující menu, známé také jako vzor "Priorita +", je nabídka, která se přizpůsobuje šířce obrazovky. Zobrazuje tolik navigace, jak je to jen možné, a vše, co je pod tlačítkem "více". Tento vzorec je v zásadě sofistikovanou verzí navigace "Tab bar + více", kde počet navigačních možností skrytých za nabídkou "více" závisí na dostupném místě na obrazovce. Flexibilita tohoto řešení poskytuje lepší uživatelský zážitek než "statická" karta Tab + další.
4. Směrovatelná navigace
Podobně jako u předchozích dvou vzorků je to další přístup pro delší seznamy. Máte-li řadu možností navigace bez velkého rozlišení v prioritách, například hudební žánry, můžete zobrazit všechny položky v rolovacím zobrazení. Tím, že seznam můžete rolovat, umožníte uživatelům pohybovat se ze strany na stranu.
Nevýhodou tohoto řešení je, že stále jen několik prvků je viditelné bez posouvání a všechny zbývající jsou mimo pozornost. To je však přijatelné řešení, když se od uživatelů očekává, že prozkoumají obsah, například kategorie zpráv, hudební kategorie nebo v online obchodu.
5. Navigace na celou obrazovku
Zatímco s jinými vzory zmíněnými v tomto článku je boj minimalizovat prostor, který navigační systémy zaujmou, vzorek na celou obrazovku má přesně opačný přístup. Tento přístup obvykle věnuje domovskou stránku výhradně navigaci. Uživatelé postupně poklepejte nebo přejetím prstem zobrazíte další možnosti nabídky, jelikož se pohybují nahoru a dolů.
Tento vzor funguje dobře na webových stránkách a aplikacích založených na úkolech a na směrech, zejména pokud se uživatelé během jedné relace omezují pouze na jednu pobočku navigační hierarchie. Funkcí uživatelů ze širokých přehledových stránek na podrobné stránky jim pomáhá domů v tom, co hledají, a zaměřit se na obsah v rámci jednotlivých sekcí.
Navigace na celém displeji v programu Yelp
Pomocí navigace na celou obrazovku mohou návrháři uspořádat velké množství informací soudržným způsobem a odhalit informace bez toho, aby ohromili uživatele. Jakmile uživatel rozhodne o tom, kam jít, můžete věnovat celý obsah obrazovky obsahu.
Závěr
S navigačními vzory pro mobilní zařízení neexistuje řešení, které by vyhovovalo všem. vždy závisí na vašem produktu, na vašich uživatelích a na kontextu. Základem každé dobře navržené navigace je však informační architektura: jasná struktura, priority a etikety založené na potřebách vašich uživatelů. Pomáhat uživatelům navigovat by mělo být hlavní prioritou pro každého návrháře aplikací. Uživatelé, kteří se poprvé i vracejí, by měli mít možnost zjistit, jak snadno procházet vaší aplikací.