5 smarte alternativer til hamburgermenyen
Skjermplass er en verdifull ressurs på mobilen. For å møte utfordringen med liten skjermplass mens du fortsatt gjør navigering tilgjengelig, er designere ofte avhengige av å skjule navigasjon bak hamburgerikonet, et glimrende eksempel på skjult navigering. I denne artikkelen vil vi se hvorfor skjult navigasjon skaper dårlig UX og hvilke alternativer som er tilgjengelige for designere.
Hvorfor Hamburger-menyen er dårlig for UX
På mobil er synlig navigasjon brukt 1,5 ganger mer enn hamburger
Hvis du jobber med digitale produkter, har du sikkert allerede lest dusinvis av artikler som beskriver hvordan hamburgermenyen på mobil gjør vondt til UX-metriske. Den største ulempen er den lave oppdageligheten, og dette støttes av faktiske tall. I kvalitative studier, NNGroup funnet den skjulte navigasjonen er mindre synlig enn synlig eller delvis synlig navigering. Dette betyr at når navigasjonen er skjult, er brukerne mindre sannsynlig å bruke navigasjon. Hamburger-menyer kjører forlovelse ned, senker leting og forvirrer folk.
Så hva skal vi bruke i stedet?
Selv om det ikke er noen hard og rask regel for mobilapper og nettsteder, er en generell anbefaling å bruke enten synlig - hovednavigasjonsalternativene vises i en synlig navigasjonslinje eller kombinasjonsnavigasjon , der noen av de viktigste navigasjonsalternativene er synlige og noen er gjemt under et interaktivt element.
1. Tabulator
Hvis du har et begrenset antall destinasjoner på toppnivå på nettstedet eller appen din, kan det hende at en flippingsnavigasjon er løsningen. Når en meny er synlig øverst eller nederst, annonserer det i utgangspunktet at en navigasjon er der, og folk kan se navigasjonsalternativene helt fra starten.
Faner synes å være det enkleste navigasjonsmønsteret. Men noen ting bør vurderes når du designer denne typen navigasjon:
- Fliken gir 5 eller færre navigasjonsalternativer som kan vises.
- Et av alternativene bør alltid være aktivt og bør visuelt utheves, for eksempel ved bruk av en kontrastfarge.
- Den første kategorien må være hjemmesiden, og rekkefølgen på kategoriene skal forholde seg til deres prioriterte eller logiske rekkefølge i brukerflyten.
- Det er bedre å bruke ikoner sammen med etiketter for hvert navigasjonsalternativ. Ikoner uten etiketter fungerer bare for vanlige handlinger, som et forstørrelsesglassikon for søk, og for grensesnitt som brukerne bruker ofte (f.eks. Instagram).
Tips: For å lagre skjermområdet kan navigasjonslinjen være skjult / avslørt ved å bla nedover og oppover.
2. Tabell med "Mer" Alternativ
Når du har mer enn 5 toppdestinasjoner, kan det være en praktisk løsning å vise de 4 prioriterte seksjonene og få et femte element som en liste over gjenværende alternativer.
Utformingsprinsippene for denne løsningen er i utgangspunktet de samme som for fanen. Det er bare ett unntak: det siste elementet er 'mer' elementet.
'Mer' -elementet kan fungere som en rullegardinmeny eller til og med kobling til en separat navigasjonsside med de resterende delene. Fra første øyekast er denne løsningen ikke mye bedre enn hamburger-menyen, siden den også gjemmer innhold og etiketten sier ikke for mye om hva som er skjult bak det. Hvis du prioriterer navigasjonsalternativer riktig, vil imidlertid et flertall av brukerne ha 4 eller 5 synlige toppnavigasjonsnavigasjonsalternativer på skjermen hele tiden, slik at navigasjonsopplevelsen for dem blir forbedret.
3. Progressive Collapsing Menu
Progressivt kollapsende meny, også kjent som "Priority +" -mønsteret, er en meny som tilpasser seg skjermbredden. Den viser så mye av navigasjonen som mulig og setter alt annet under en "mer" -knapp. I utgangspunktet er dette mønsteret en sofistikert versjon av "Tabbar + mer" -navigering hvor antall navigasjonsalternativer som er skjult bak "mer" -menyen, avhenger av tilgjengelig skjermrom. Fleksibiliteten til denne løsningen gir en bedre brukeropplevelse enn en 'statisk' 'faneblad + mer'.
4. Scrollable Navigation
I likhet med de to foregående mønstrene, er dette en annen tilnærming til lengre lister. Hvis du har en rekke navigasjonsalternativer uten stor forskjell i prioriteringer, for eksempel musikkgenrer, kan du liste alle elementene i en rullerbar visning. Ved å gjøre listen ruller du tillat brukere å flytte fra side til side.
Ulempen med denne løsningen er at det fremdeles bare de øverste få punktene er synlig uten å rulle og alle de resterende er ute av synet. Dette er imidlertid en akseptabel løsning når brukerne forventes å utforske innholdet, for eksempel nyhetskategorier, musikk kategorier eller i en nettbutikk.
5. Fullskjerm navigasjon
Mens det med andre mønstre som er nevnt i denne artikkelen, er kampen for å minimere plassen som navigasjonssystemene tar opp, fullskjermsmønsteret tar nøyaktig motsatt tilnærming. Denne tilnærmingen bruker vanligvis hjemmesiden utelukkende til navigering. Brukere øker trinnvis eller sveiper for å vise flere menyalternativer når de ruller opp og ned.
Dette mønsteret fungerer godt i oppgavebaserte og retningsbaserte nettsteder og apper, spesielt når brukerne pleier å begrense seg til bare en gren av navigasjonshierarkiet under en enkelt økt. Å treffe brukere fra brede oversiktssider til detaljeringssider hjelper dem med å komme inn på hva de leter etter og å fokusere på innhold innenfor en enkelt seksjon.
Fullskjerm navigering i Yelp
Ved hjelp av helskjermnavigasjon kan designere organisere store biter av informasjon på en sammenhengende måte og avsløre informasjon uten å overbelaste brukeren. Når brukeren bestemmer seg for hvor han skal gå, kan du dedikere hele skjermrommet til innhold.
Konklusjon
Med navigasjonsmønstre for mobil er det ikke en løsning med en størrelse-passer-alle; Det avhenger alltid av produktet ditt, på brukerne og i sammenhengen. Grunnlaget for alle godt utformede navigasjon er imidlertid informasjonsarkitektur: klar struktur, prioriteringer og etiketter basert på brukernes behov. Å hjelpe brukere å navigere bør være en topp prioritet for hver appdesigner. Både første gang og returbrukere skal kunne finne ut hvordan du beveger deg gjennom appen din med letthet.