5 slimme alternatieven voor het Hamburger-menu
Schermruimte is een waardevolle bron op mobiel. Om de uitdaging van kleine schermruimte aan te gaan en toch de navigatie toegankelijk te maken, vertrouwen ontwerpers vaak op het verbergen van de navigatie achter het hamburgersymbool, een goed voorbeeld van verborgen navigatie. In dit artikel zullen we zien waarom verborgen navigatie slechte UX veroorzaakt en welke alternatieven beschikbaar zijn voor ontwerpers.
Waarom het Hamburger-menu slecht is voor UX
Op mobiel wordt zichtbare navigatie 1,5x meer gebruikt dan hamburger
Als u aan digitale producten werkt, hebt u waarschijnlijk al tientallen artikelen gelezen die beschrijven hoe het hamburgermenu op mobiele apparaten UX-statistieken schaadt. Het belangrijkste nadeel is de lage vindbaarheid, en dit wordt ondersteund door werkelijke aantallen. In kwalitatieve studies, NNGroup gevonden die verborgen navigatie is minder vindbaar dan zichtbare of gedeeltelijk zichtbare navigatie. Dit betekent dat wanneer navigatie wordt verborgen, gebruikers minder geneigd zijn om navigatie te gebruiken. Hamburger-menu's zorgen voor minder betrokkenheid, vertragen de verkenning en verwarren mensen.
Dus wat moeten we in plaats daarvan gebruiken?
Hoewel er geen vaste regel is voor mobiele apps en websites, is een algemene aanbeveling om ofwel zichtbaar te gebruiken - de belangrijkste navigatie-opties worden getoond in een zichtbare navigatiebalk - of combo-navigatie , waarbij enkele van de belangrijkste navigatie-opties zichtbaar zijn en sommige zijn verborgen onder een interactief element.
1. Tabbalk
Als u een beperkt aantal bestemmingen op het hoogste niveau in uw website of app heeft, is een navigatie met tabbladen misschien de oplossing. Wanneer een menu bovenaan of onderaan te zien is, adverteert het feitelijk dat er een navigatie is en kunnen mensen vanaf het begin de navigatie-opties zien.
Tabbladen lijken het eenvoudigste navigatiepatroon te zijn. Er moet echter een aantal dingen worden overwogen bij het ontwerpen van dit type navigatie:
- Met de tabbalk kunnen 5 of minder navigatie-opties worden weergegeven.
- Een van de opties moet altijd actief zijn en moet visueel worden gemarkeerd door bijvoorbeeld een contrasterende kleur te gebruiken.
- Het eerste tabblad moet de startpagina zijn en de volgorde van de tabbladen moet betrekking hebben op hun prioriteit of logische volgorde in de gebruikersstroom.
- Het is beter om pictogrammen te gebruiken samen met labels voor elke navigatieoptie. Pictogrammen zonder labels werken alleen voor veelgebruikte acties, zoals een vergrootglaspictogram voor zoeken en voor interfaces die de gebruikers vaak gebruiken (bijvoorbeeld Instagram).
Tip: om schermruimte te besparen, kan de navigatiebalk worden verborgen / weergegeven bij het naar beneden en naar boven scrollen.
2. Tabbalk met optie "Meer"
Wanneer u meer dan 5 bestemmingen op het hoogste niveau hebt, is een praktische oplossing om de 4 geprioriteerde secties weer te geven en een 5e element als een lijst met resterende opties te hebben.
De ontwerpprincipes voor deze oplossing zijn in principe hetzelfde als voor de balk Tab. Er is slechts één uitzondering: het laatste element is het 'meer' item.
Het 'meer' item kan werken als een vervolgkeuzemenu of zelfs een link naar een aparte navigatiepagina met de resterende secties. Vanaf het eerste gezicht is deze oplossing niet veel beter dan het hamburgermenu, want het verbergt ook inhoud en het label zegt niet te veel over wat erachter schuilgaat. Als u echter de juiste navigatie-opties prioriteit geeft, heeft een meerderheid van uw gebruikers altijd 4 of 5 zichtbare navigatieopties van de hoogste prioriteit op het scherm, zodat de navigatie-ervaring voor hen wordt verbeterd.
3. Geleidelijk inklapbaar menu
Geleidelijk inklappend menu, ook wel het "Priority +" -patroon genoemd, is een menu dat zich aanpast aan de schermbreedte. Het toont zoveel mogelijk van de navigatie en zet al het andere onder een "meer" knop. Kortom, dit patroon is een geavanceerde versie van de 'Tab bar + meer' navigatie waarbij het aantal navigatie-opties dat verborgen is achter het 'meer' menu afhankelijk is van de beschikbare schermruimte. De flexibiliteit van deze oplossing biedt een betere gebruikerservaring dan een 'statische' 'tabbladbalk + meer'.
Afbeelding Krediet: Brad Frost
4. Scrolbare navigatie
Vergelijkbaar met de vorige twee patronen, is dit een andere benadering voor langere lijsten. Als u een aantal navigatieopties hebt zonder een groot onderscheid in prioriteiten, bijvoorbeeld muziekgenres, kunt u alle items in een schuifbare weergave weergeven. Door de lijst te laten scrollen, kunnen gebruikers van links naar rechts gaan.
Het nadeel van deze oplossing is dat alleen de bovenste paar items zichtbaar zijn zonder te scrollen en dat alle overgebleven items uit het zicht zijn. Dit is echter een acceptabele oplossing wanneer van de gebruikers verwacht wordt dat ze de inhoud verkennen, bijvoorbeeld nieuwscategorieën, muziekcategorieën of in een online winkel.
5. Navigatie op volledig scherm
Terwijl met andere patronen die in dit artikel worden genoemd, de strijd is om de ruimte die de navigatiesystemen innemen te minimaliseren, neemt het schermvullende patroon de tegenovergestelde benadering aan. Deze benadering wijdt gewoonlijk de homepage uitsluitend aan navigatie. Gebruikers tikken stapsgewijs op of vegen om extra menu-opties te tonen terwijl ze omhoog en omlaag scrollen.
Dit patroon werkt goed op taakgebaseerde en directionele websites en apps, vooral wanneer gebruikers zichzelf tijdens een sessie beperken tot slechts één tak van de navigatiehiërarchie. Door gebruikers van brede overzichtspagina's tot detailpagina's te trainen, kunnen ze zich thuis voelen in wat ze zoeken en kunnen ze zich concentreren op inhoud binnen een afzonderlijke sectie.
Navigatie op volledig scherm in Yelp
Met behulp van navigatie op volledig scherm kunnen ontwerpers grote hoeveelheden informatie op een samenhangende manier ordenen en informatie onthullen zonder de gebruiker te overrompelen. Zodra de gebruiker zijn beslissing heeft genomen over waar hij naartoe moet gaan, kunt u de volledige schermruimte toewijzen aan inhoud.
Conclusie
Met navigatiepatronen voor mobiel is er geen one-size-fits-all oplossing; het hangt altijd af van uw product, van uw gebruikers en van de context. De basis van elke goed ontworpen navigatie is echter de informatiearchitectuur: duidelijke structuur, prioriteiten en labels op basis van de behoeften van uw gebruikers. Gebruikers helpen navigeren moet een topprioriteit zijn voor elke app-ontwerper. Zowel beginnende als terugkerende gebruikers moeten in staat zijn om met gemak door uw app te bladeren.