Hamburgermenyn: Exempel från e-handeln, för- och nackdelar

I takt med att allt fler använder mobiltelefonen för att handla på nätet är det avgörande att webbplatser är mobilanpassade och enkla att använda. Problemet är att utrymmet på en telefonskärm är begränsat. Om navigeringen på din webbplats är trång eller förvirrande är det stor risk att besökarna lämnar och handlar någon annanstans.

Det är därför många webbplatser och appar vänder sig till mobilnavigeringens schweiziska armékniv: hamburgermenyn. Den enkla ikonen med tre streck har blivit den internationella symbolen för "fler navigeringsalternativ här" och komprimerar en webbplatsmeny till en enda kraftfull knapp.

Här är mer om hamburgermenyns styrkor och fallgropar, dess historia, viktigaste funktioner och hur du använder den effektivt i din mobila webbdesign.

Vad är en hamburgermeny?

Under många år var den vanligaste metoden för webbplatsnavigering en horisontell meny, en rad med ord för varje kategori som sträckte sig längs skärmens övre kant. Men när mobilsurfandet exploderade i slutet av 00-talet och början av 10-talet, drivet av framsteg inom smartphoneteknik och mobil internetuppkoppling, behövde webbdesigners en mer utrymmeseffektiv lösning.

Då kom hamburgermenyn (☰), en enkel ikon med staplade parallella horisontella streck (brödet, om man så vill) som omsluter ett mittstreck (hamburgerbiffen), vilket låter användare fälla ut och fälla ihop navigeringsalternativ efter behov. Du hittar vanligtvis hamburgerknappen i det övre vänstra eller högra hörnet av webbplatsen eller appen.

Hamburgermenyns historia

Hamburgermenyn är faktiskt äldre än mobila enheter. I början av 1980-talet skapade designern Norm Cox det grafiska användargränssnittet för arbetsstationen Xerox Star, en föregångare till det ursprungliga gränssnittet i Apple Macintosh. Cox ville ha en enkel, igenkännbar ikon som med ett klick öppnade en lista med åtgärder.

Efter sin introduktion användes hamburgermenyn i begränsad omfattning och föll till stor del i glömska fram till det breda genombrottet för mobiltelefoner omkring 2009. Behovet av effektiva sätt att presentera menyalternativ på små skärmar, utan att överväldiga användarna, gjorde hamburgerikonens kompakta prydlighet till en idealisk lösning.

Hamburgermenyns popularitet befästes när Twitter och andra telefonappar började använda den, följt av att den togs i bruk i Röstmemon på iPhone 3GS och det tillhörande iOS 4, vilket cementerade dess roll som en välbekant symbol för dold navigering.

Fördelar och nackdelar med hamburgermenyn

Hamburgermenyer är idealiska för mobila enheter, men navigeringsfält och flikmenyer kan passa skrivbordsanvändare bättre. Så här ligger det till:

Fördelar

Hamburgerikonens kompakta storlek är själva dess existensberättigande. Den sparar dyrbart skärmutrymme och rensar upp i webbdesignen, särskilt på mindre skärmar som smartphones. När du klickar eller trycker på hamburgerikonen visas webbplatsens navigering, antingen genom en meny som glider in, en rullgardinsmeny eller ett helskärmslager. Det kan förbättra kundupplevelsen på mobilen.

Nackdelar

Även om fördelen med att spara utrymme är uppenbar, menar vissa att hamburgermenyer på datorer kan göra det svårare för besökare att hitta rätt. Om användarna inte känner igen menyikonen kan de missa den helt och gå miste om viktigt innehåll eller navigeringsalternativ.

För att lösa detta kan du överväga att använda responsiva designmallar med olika menystrukturer för olika enheter. En webbplats kan visa ett traditionellt horisontellt navigeringsfält på datorer, men växla till en hamburgermeny på mobila enheter för att spara skärmutrymme.

Verkliga exempel: hamburgermenyer i praktiken

Du kommer ofta att se att responsiv webbdesign har tillämpats på en webbplats, så att hamburgermenyn bara visas i mobilversionen medan en annan menystil visas på datorer. Här är ett par e-handelswebbplatser som använder hamburgermenyer på ett effektivt sätt:

TCB Jeans

TCB Jeans håller det enkelt med en vanlig hamburgerknapp med tre streck högst upp på sin mobilsida. När du klickar på den glider en lista med länkar ut från vänster sida, bland annat Hem, Produkter och Om oss. Länken Produkter har ett litet plustecken bredvid sig, en antydan om att det finns fler alternativ om du trycker.

TCB:s webbplats för datorer har också en hamburgermeny, vilket gör att en helskärmsbild i bakgrunden och lockande kampanjer kan ta huvudrollen. I mobilversionen glider hamburgermenyn in som ett lager, vilket ger användarna en visuell ledtråd om att menyn kan döljas så att sidan bakom visas. TCB:s design av hamburgermenyn är:

• Ren. Det är en dålig idé att klumpa ihop menyknappar på en liten telefonskärm. Bättre att gömma dem i hamburgermenyn.
• Bekant. Hamburgaren är vanlig på mobilsidor, så den förvirrar inte de flesta användare.
• Låter produkterna ta plats i rampljuset. Genom att dölja menyn bakom hamburgerknappen sticker produktbilderna ut mer och lyfter fram de produkter som säljs.

Gymshark

Gymsharks webbplats är ett utmärkt exempel på hur en webbplats för datorer kan skilja sig från sin mobiloptimerade version. På datorn finns ingen hamburgermeny, men på mobilen dyker hamburgermenyn upp i det övre vänstra hörnet. När du trycker på den visas en sökruta och undermenyer för produktkategorier. För att komma tillbaka till startsidan trycker du bara på X-ikonen uppe till höger.

Gymsharks hamburgermeny fungerar bra eftersom den prioriterar det som är viktigast. Den visar erbjudanden och nya kläder först för direkt engagemang. Den är också bekant, med menyknappen placerad där man förväntar sig den och en enkel, lättförståelig lista som följer.

Tips för en lyckad hamburgermeny

Webbplatsägare som använder hamburgermenyer kan hålla dessa sex tips i åtanke för att förbättra användarupplevelsen och höja konverteringsgraden:

Gör den konsekvent synlig

I de flesta fall är hamburgermenyn liten. Se till att den ändå är lätt att upptäcka. Placera den i det övre vänstra eller övre högra hörnet av skärmen, där användarna brukar titta. Och håll placeringen konsekvent på varje sida på din webbplats.

Håll dig till standardikonen för hamburgare

Använd de allmänt igenkända tre parallella horisontella strecken (☰) för din hamburgermeny. Dessa ikoner är utbredda, och de flesta användare förstår genast vad de betyder.

Prioritera hierarkin bland menyalternativen

Organisera dina menyalternativ logiskt. Du kan lägga till en sökruta och sedan rangordna de viktigaste och mest använda kategorierna eller sidorna uppifrån och ner.

Var mobilvänlig och tillgänglig

Se till att din meny fungerar bra på alla mobila enheter och pekskärmar. Menyalternativen bör vara tillräckligt stora för att lätt kunna tryckas på med ett finger.

Lägg till animering och visuell återkoppling

När användaren interagerar med menyn ger subtila effekter visuella ledtrådar. Strecken kan till exempel rotera och förvandlas till ett X eller + för att visa att menyn öppnas och stängs. Strecken kan ändra tjocklek eller expandera lite. Toning och förskjutning ger djup när användaren interagerar. Eller så kan du ändra färgen eller låta den studsa lätt när man trycker på den.

Testa och samla in återkoppling

Innan du slutför din hamburgermeny bör du testa den på riktiga användare. Iaktta hur de interagerar med den och samla in synpunkter.

Använda en hamburgermeny tillsammans med andra navigeringsverktyg

Ibland är det bästa sättet att förbättra användbarheten på en webbplats att kombinera olika knappar och menyer. Varje typ har sina egna styrkor och svagheter, men tillsammans kan de skapa en smidigare och mer effektiv användarupplevelse.

Webbdesigners inom e-handel kan använda kombinationer som gör det enklare att upptäcka produkter, med tydlig och direkt åtkomst till varukorgen och kassaprocessen. Kontrollera att alla navigeringselement är lätta att trycka på på pekskärmar. Testa olika kombinationer för att se vad som fungerar bäst för din målgrupp:

• Toppnavigering plus hamburgare. Använd toppnavigeringen för viktiga kategorier och funktioner som butik och varukorg, medan du reserverar hamburgermenyn för åtkomst till mindre frekventa navigeringsfunktioner som Om oss, Kontakt, Kundtjänst och Villkor. Detta håller huvudskärmen ren men ger ändå snabb åtkomst till nödvändiga sidor.
• Flikbaserad navigering plus hamburgare. Använd flikbaserad navigering inuti en produktkategorisida för att filtrera eller sortera produkter, till exempel Nyheter, Bästsäljare och Sortera efter pris. Det gör att användarna snabbt kan förfina sin produktsökning efter att ha använt hamburgermenyn för den övergripande navigeringen på webbplatsen.
• Fast sidhuvud plus hamburgare. Det fasta sidhuvudet innehåller viktiga genvägslänkar till huvudkategorierna och stannar kvar högst upp på skärmen när du scrollar. Hamburgermenyn används för mindre centrala sidor.

Fly by Jings webbplats använder till exempel en hamburgermeny för breda menyval, men själva butikssidan använder en flikmeny med fyra alternativ ("Sauces", "Sets", "Pantry" och "Merch") för ytterligare förfining.