5 smarta alternativ till hamburgaren menyn
Skärmutrymme är en dyrbar resurs på mobilen. För att möta utmaningen med litet skärmutrymme och samtidigt göra navigering tillgänglig, bygger designers ofta på att dölja navigering bakom hamburgerikonet, ett utmärkt exempel på dold navigering. I den här artikeln kan vi se varför dold navigering skapar dålig UX och vilka alternativ som finns tillgängliga för designers.
Varför Hamburgermenyn är dålig för UX
På mobilen används synlig navigering 1,5 gånger mer än hamburgare
Om du arbetar med digitala produkter har du förmodligen redan läst dussintals artiklar som beskriver hur hamburgermenyn på mobil skadar UX-metrics. Den största nackdelen är dess låga upptäckbarhet, och detta backas upp av faktiska siffror. I kvalitativa studier, NNGroup hittades den dolda navigeringen är mindre upptäckbar än synlig eller delvis synlig navigering. Det betyder att när navigationen är dold, är användarna mindre benägna att använda navigering. Hamburger menyer kör förlovning ner, sakta ner prospektering och förvirra människor.
Så vad ska vi använda istället?
Även om det inte finns någon snabb och snabb regel för mobila appar och webbplatser, är en allmän rekommendation att använda antingen synlig - de viktigaste navigeringsalternativen visas i en synlig navigeringsfält- eller kombinationsnavigering , där några av de viktigaste navigeringsalternativen är synliga och vissa är dolda under ett interaktivt element.
1. Fliken
Om du har ett begränsat antal destinationer på toppnivå på din webbplats eller app kan en fliknavigering vara lösningen. När en meny är synlig längst upp eller ner, annonserar det i stort sett att en navigering finns där och att folk kan se navigationsalternativen direkt från början.
Flikar verkar vara det enklaste navigationsmönstret. Några saker bör dock beaktas vid utformningen av denna typ av navigering:
- I fältet kan 5 eller färre navigeringsalternativ visas.
- Ett av alternativen ska alltid vara aktivt och bör visuellt markeras med exempelvis en kontrasterande färg.
- Den första fliken måste vara hemsidan och flikarnas ordning ska relatera till deras prioriterade eller logiska ordning i användarflödet.
- Det är bättre att använda ikoner tillsammans med etiketter för varje navigationsalternativ. Ikoner utan etiketter fungerar bara för vanliga handlingar, som en förstoringsglasikon för sökning, och för gränssnitt som användarna använder ofta (t.ex. Instagram).
Tips! För att spara skärmutrymme kan navigeringsfältet döljas / avslöjas vid rullning nedåt och uppåt.
2. Fliken Bar med "More" Alternativ
När du har mer än 5 destinationer på toppnivå kan en praktisk lösning vara att visa de 4 prioriterade sektionerna och få ett 5: e element som en lista över återstående alternativ.
Konstruktionsprinciperna för denna lösning är i stort sett desamma som för Tabbar. Det finns bara ett undantag: det sista elementet är "mer".
"Mer" -alternativet kan fungera som en rullgardinsmeny eller till och med länk till en separat navigationssida med de återstående sektionerna. Från första anblicken är den här lösningen inte mycket bättre än hamburgermenyn, eftersom den också gömmer innehåll och dess etikett säger inte för mycket om vad som är dolt bakom det. Om du prioriterar navigationsalternativen korrekt, kommer dock en majoritet av dina användare att ha 4 eller 5 synliga toppnavigationsnavigeringsalternativ på skärmen hela tiden så att navigationsupplevelsen för dem kommer att förbättras.
3. Progressivt kollapsande meny
Den progressiva kollapsmenyn, även känd som "Prioritet +" -mönstret, är en meny som anpassar sig till skärmens bredd. Den visar så mycket av navigeringen som möjligt och sätter allt annat under en "mer" -knapp. I grund och botten är detta mönster en sofistikerad version av navigeringsfliken "Tabbar + mer" där antalet navigationsalternativ som döljs bakom "mer" -menyn beror på tillgängligt skärmutrymme. Flexibiliteten hos denna lösning ger en bättre användarupplevelse än en "statisk" "Fliken" + ".
4. Scrollable Navigation
Liknande de tidigare två mönstren är detta ett annat tillvägagångssätt för längre listor. Om du har ett antal navigationsalternativ utan stor skillnad i prioriteringar, till exempel musikgenrer, kan du lista alla objekt i en rullbar vy. Genom att göra listan rullbar tillåter du att användare flyttar från sida till sida.
Nackdelen med denna lösning är att det fortfarande bara är de bästa få objekten som är synliga utan att rulla och alla de återstående är osynliga. Detta är dock en acceptabel lösning när användarna förväntas utforska innehållet, till exempel nyhetskategorier, musikkategorier eller i en onlinebutik.
5. Fullskärmsnavigering
Medan andra mönster som nämns i denna artikel, är kampen för att minimera det utrymme som navigationssystemen tar upp, fullskärmsmönstret tar exakt motsats. Detta tillvägagångssätt ägnar vanligen hemmaplanen uteslutande till navigation. Användare ökar eller sveper för att visa ytterligare menyalternativ när de bläddrar upp och ner.
Det här mönstret fungerar bra i uppgiftsbaserade och riktningsbaserade webbplatser och appar, särskilt när användarna brukar begränsa sig till endast en gren i navigeringshierarkin under en enda session. Att hitta användare från breda översiktssidor till detaljsidor hjälper dem att komma in på vad de letar efter och fokusera på innehåll inom en enskild sektion.
Helskärmsnavigering i Yelp
Med hjälp av helskärmsnavigering kan designers organisera stora bitar av information på ett sammanhängande sätt och avslöja information utan att överväldiga användaren. När användaren fattar sitt beslut om var man ska gå kan du ägna hela skärmutrymmet till innehållet.
Slutsats
Med navigationsmönster för mobil finns det ingen lösning med en storlek som passar alla. det beror alltid på din produkt, på dina användare och i sammanhanget. Grunden för varje väl utformad navigering är dock informationsarkitektur: tydlig struktur, prioriteringar och etiketter baserade på dina användares behov. Att hjälpa användare att navigera bör vara en topprioritering för varje appdesigner. Både första gången och återvändande användare borde kunna räkna ut hur man enkelt kan flytta genom din app.