5 smarte alternativer til hamburgermenuen
Skærmrummet er en værdifuld ressource på mobilen. For at imødegå udfordringen med lille skærmrum, mens der stadig gøres tilgængelig for navigation, er designere ofte afhængige af at skjule navigationen bag hamburgerikonet, et glimrende eksempel på skjult navigation. I denne artikel vil vi se, hvorfor skjult navigation skaber dårlig UX, og hvilke alternativer er tilgængelige for designere.
Hvorfor Hamburger-menuen er dårlig for UX
På mobil er synlig navigation brugt 1,5 gange mere end hamburger
Hvis du arbejder på digitale produkter, har du sikkert allerede læst snesevis af artikler, der beskriver hvordan hamburgermenuen på mobilen gør ondt i UX-metrics. Den største ulempe er dens lave opdagelsesevne, og dette understøttes af faktiske tal. I kvalitative studier, NNGroup fundet den skjulte navigation er mindre synlig end synlig eller delvist synlig navigation. Dette betyder, at når navigation er skjult, er brugerne mindre tilbøjelige til at bruge navigation. Hamburger menuer kører forlovelse ned, sænke efterforskning og forvirre folk.
Så hvad skal vi bruge i stedet?
Selvom der ikke er nogen hård og hurtig regel til mobilapps og websites, er en generel anbefaling at bruge enten synlig - hovednavigationsindstillingerne vises i en synlig navigationslinje eller kombinationsnavigation , hvor nogle af de vigtigste navigationsindstillinger er synlige og nogle er gemt under et interaktivt element.
1. Tab Bar
Hvis du har et begrænset antal destinationer på øverste niveau på dit websted eller din app, kan en flad navigation være løsningen. Når en menu er synlig øverst eller nederst, annonceres det grundlæggende, at en navigation er der, og folk kan se navigationsindstillingerne lige fra starten.
Faneblade synes at være det enkleste navigationsmønster. Men nogle ting bør overvejes, når du designer denne type navigation:
- Fanebladet tillader 5 eller færre navigeringsmuligheder at vise.
- En af mulighederne skal altid være aktiv, og den skal fremhæves visuelt ved for eksempel at bruge en kontrastfarve.
- Den første fane skal være hjemmesiden, og rækkefølgen af fanerne skal relateres til deres prioriterede eller logiske rækkefølge i brugerflowet.
- Det er bedre at bruge ikoner sammen med etiketter for hver navigationsindstilling. Ikoner uden etiketter arbejder kun for almindelige handlinger, som et forstørrelsesglasikon til søgning, og for grænseflader, som brugerne bruger ofte (f.eks. Instagram).
Tip: For at gemme skærmrummet kan navigationslinjen være skjult / afsløret ved nedadgående og opadgående rullning.
2. Fanebjælke med "Mere" Mulighed
Når du har mere end 5 topniveau destinationer, kan en praktisk løsning være at vise de 4 prioriterede sektioner og få et 5. element som en liste over resterende muligheder.
Designprincipperne for denne løsning er stort set de samme som for fanebladet. Der er kun en undtagelse: Det sidste element er 'mere' elementet.
'Mere' elementet kan fungere som en dropdown-menu eller endda link til en separat navigationsside med de resterende afsnit. Fra første øjekast er denne løsning ikke meget bedre end hamburgermenuen, da den også skjuler indhold, og dets etiket siger ikke for meget om, hvad der er skjult bag det. Hvis du prioriterer navigationsmulighederne korrekt, vil et flertal af dine brugere imidlertid have 4 eller 5 synlige topprioritetsnavigationsindstillinger på skærmen hele tiden, så navigationsoplevelsen for dem bliver forbedret.
3. Progressive Collapsing Menu
Progressive collapsing menu, også kendt som "Priority +" -mønsteret, er en menu, som tilpasser sig skærmens bredde. Det viser så meget af navigationen som muligt og sætter alt andet under en "mere" knap. I grund og grund er dette mønster en sofistikeret version af tabellen "Tabbar + mere", hvor antallet af navigeringsmuligheder, der er gemt bag menuen "mere", afhænger af det tilgængelige skærmrum. Fleksibiliteten i denne løsning giver en bedre brugeroplevelse end en 'statisk' 'faneblad + mere'.
4. Scrollable Navigation
I lighed med de to foregående mønstre er dette en anden tilgang til længere lister. Hvis du har en række navigationsindstillinger uden en stor forskel i prioriteter, f.eks. Musikgenrer, kan du liste alle elementer i en rullerbar visning. Ved at gøre listen rullebar giver du brugere mulighed for at flytte fra side til side.
Ulempen ved denne løsning er, at kun de øverste få punkter er synlige uden at rulle og alle de resterende er ude af synet. Dette er dog en acceptabel løsning, når brugerne forventes at undersøge indholdet, for eksempel nyhedskategorier, musikkategorier eller i en onlinebutik.
5. Navigation i fuld skærm
Mens med andre mønstre nævnt i denne artikel, er kampen for at minimere det rum, som navigationssystemerne tager op, fuldskærmsmønsteret tager den nøjagtige modsatte tilgang. Denne fremgangsmåde bruger normalt hjemmesiden udelukkende til navigation. Brugere øges trinvist eller svejses for at vise yderligere menupunkter, mens de ruller op og ned.
Dette mønster fungerer godt i opgavebaserede og retningsbaserede websites og apps, især når brugerne har en tendens til at begrænse sig til kun en gren af navigationshierarkiet under en enkelt session. At skaffe brugere fra brede oversigtssider til detaljerede sider hjælper dem med at komme ind på, hvad de søger og fokusere på indhold inden for en enkelt sektion.
Fuldskærmsnavigation i Yelp
Ved hjælp af fuldskærmsnavigation kan designere organisere store klumper af information på en sammenhængende måde og afsløre oplysninger uden at overbelaste brugeren. Når brugeren træffer deres beslutning om, hvor de skal hen, kan du dedikere hele skærmrummet til indhold.
Konklusion
Med navigationsmønstre til mobil er der ikke en one-size-fits-all-løsning; det afhænger altid af dit produkt, på dine brugere og på konteksten. Grundlaget for hver veludformet navigation er imidlertid informationsarkitektur: klar struktur, prioriteter og etiketter baseret på dine brugers behov. At hjælpe brugerne med at navigere bør være en topprioritet for alle appdesignere. Både første gang og tilbagevendende brugere skal kunne finde ud af, hvordan du nemt kan bevæge dig gennem din app.