Hamburger-menyalternativer til mobil navigation

Hvis du arbejder med digitale produkter, har du allerede læst snesevis af artikler, der beskriver, hvordan og hvorfor hamburgernavigation på mobil (og desktop!) Skader UX-metrikker på grund af dens lave opdagelighed og effektivitet. (Du kan læse nogle af de bedste artikler om emnet her, her, her og her.)

Heldigvis eksperimenterer flere og flere websteder og apps med alternative, mere effektive løsninger til netop dette problem. Ingen af ​​de ideer, der er anført her, er bedre end de andre, deres levedygtighed og ydeevne afhænger naturligvis af indholdet og konteksten.

1. Faner

Hvis du har et begrænset antal sektioner på dit websted eller din app, og brugere bør være i stand til hurtigt at skifte mellem disse sektioner, kan en tabbed-navigation muligvis være løsningen.

Faner synes at være det enkleste navigationsmønster, men du skal overveje et par ting, når du designer dem:

  • Du skal ikke have mere end fem sektioner at vise
  • En af fanerne skal altid være aktiv og skal visuelt fremhæves
  • Den første fane skal være startsiden eller startskærmen, og rækkefølgen af ​​fanerne skal relateres til deres prioritering eller logiske rækkefølge i brugerflowet
  • Faner kan enten vises øverst eller i bunden af ​​skærmen, baseret på kontekst eller platform (dog er de nederste faner nu også et mønster i Android)
  • Ikoner uden etiketter fungerer kun til almindelige handlinger med virkelig kendte ikoner og til grænseflader, som brugerne ofte bruger (f.eks. Sociale medier-apps)
  • Flere tip til design af fanebladet navigation

Eksempler: LinkedIn og Google Fotos

Faner med kun ikoner på LinkedIn og faner med ikon + etiket på Google Fotos

2. Faner med en "mere" mulighed

Når der er mere end 5 hovedsektioner, kan en praktisk løsning være at vise de fire mest prioriterede sektioner og have en femte elementliste 'alt andet':

Designprincipperne for denne løsning er stort set de samme som for enkle faner. Elementet "mere" kan enten linke til en navigationsside eller fungere som en rullemenu med de resterende sektioner:

Du kan argumentere for, at det 'mere' emne ikke er bedre end hamburger-menuen (det er slags skjult, og dets label refererer overhovedet ikke til dets indhold), men hvis du har foretaget prioriteringen rigtigt, ser de fleste brugere for et af de fire synlige emner alligevel, så navigationsoplevelsen for de fleste vil stadig blive forbedret.

Eksempel: Facebook

Nyhedsfeed, veneforespørgsler, anmeldelse og søgning er altid tilgængelig i overskriften, al den resterende funktionalitet er tilgængelig fra menuen 'mere' på Facebook

3. Menuer med gradvist sammenbrud

En mere sofistikeret version af navigationen ‘faner + mere’ er at designe en menu, der tilpasser sig skærmbredden, viser så meget af navigationen som muligt og placerer alt andet under et More-element om nødvendigt:

Dette betyder, at menuen Mere indeholder flere elementer i en lavere opløsning - elementer 'hoppe' under Mere, når der ikke er plads nok til at vise dem. Fleksibiliteten i denne løsning giver en bedre oplevelse end 'tabs + mere', især på skærmstørrelser derimellem.

Eksempel: BBC

Hovedmenuen på BBC gengives i henhold til den aktuelle skærmstørrelse, så den altid viser så mange genstande som muligt

4. Rullbar navigation

Hvis du har et antal navigationselementer uden en stor forskel i prioriteter, og at det ville være et dårligt kompromis at have en "mere" -kategori, er en anden strategi at liste alle emner i en rullbar visning:

Ulempen med denne løsning er, at det stadig kun er de øverste par genstande, der er synlige uden at rulle, og at alle de resterende er væk fra lærredet. Dette er imidlertid en acceptabel løsning, når brugerne forventes at udforske indholdet, f.eks. i en webshop eller nyhedskategorier.

For så vidt angår visuelt design skal du sørge for at tilvejebringe nok visuelle tip til at antyde, at der er flere elementer tilgængelige ved vandret rulning (f.eks. Ved fading og / eller fra positionering af det sidst synlige element).

Eksempler: Medium og Google

De vigtigste kategorier kan rulles ved mindre skærmstørrelser på Medium.comKategorier på Googles søgeresultatside er tilgængelige i en rullbar visning

5. Dropdown-menuer

Et usædvanligt, men interessant mønster er at bruge dropdown-lignende menuer, når synligheden og tilgængeligheden af ​​de andre sektioner ikke er vigtig:

Dropdown-menuen har faktisk en dobbelt rolle i dette tilfælde: for det første fungerer den som en sidetitel, og pilen nedad antyder, at der er en mulighed for hurtigt at skifte til lignende sektioner. Selvom indstillingerne er skjult i dette tilfælde, antyder dropdown-designet, at listen vil indeholde indstillinger, der enten er søskende eller børn på den aktuelle side (og den skal primært bruges til dette formål).

Eksempel: Barnes & Noble og Duolingo

Når du gennemsøger bøger, er den aktuelle kategori og indstillingerne for navigation / filtrering altid tilgængelige i en rullemenu på bn.comSelvom det ikke er en almindelig interaktion for de fleste brugere, giver Duolingo mulighed for hurtigt at skifte mellem de sprog, du praktiserer via en dropdown

Og nogle gange overraskende kan hamburgermenuen være et godt valg

Da den vigtigste ulempe med hamburgermenuen er dens lave opdagelsesegnethed, anbefales det at overveje et af alternativerne, når det kommer til at designe hovednavigationsmenuen. Når man designer sekundære navigationsindstillinger, kan dette mønster dog være en passende løsning.

Hvis de primære indstillinger er tilgængelige som fremtrædende på skærmen opfordring til handlingsknapper, synes hamburgermenuen et godt sted for al den sekundære navigation:

Dette mønster kan bruges, når hovednavigeringen er designet omkring en brugerstrøm, og de relaterede indstillinger er tydeligt tilgængelige på skærmen. Uber kan være et godt eksempel:

Da alt omkring denne skærm er designet til at anmode om en bil, bør sekundære indstillinger som Historik og indstillinger ikke være tilgængelige mere prominent end fra en hamburger-menu.

Google Translate svarer virkelig til dette:

Da hovedfunktionaliteten (skift af sprog og indtastning af tekst for at oversætte) er den mest fremtrædende del af skærmen, er den skjulte menu et godt sted at være vært for sektioner som Hjælp og Fællesskab.

Konklusion

Der er ikke en løsning i én størrelse, der passer til alle til mobilnavigation, det afhænger altid af dit produkt, dine brugere og af konteksten. Hvad der fungerer godt for andre, fungerer måske ikke for dig og vice versa. Grundlaget for enhver veludviklet navigation er imidlertid informationsarkitektur - klar struktur, prioriteter og etiketter baseret på dine brugers behov. Så hvorfor ikke begynde at finde den mest effektive mobilnavigation til dit produkt i dag?

Jeg er sikker på, at der er masser af andre gode ideer og mønstre til effektiv mobilnavigation. Hvilke skal jeg tilføje til denne samling? Send dem min vej i kommentarsektionen. (Btw, vi ansætter også!)