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.
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.
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.
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:
Tips: For å lagre skjermområdet kan navigasjonslinjen være skjult / avslørt ved å bla nedover og oppover.
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.
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'.
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.
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.
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.