Hamburgermenyn – då, nu och imorgon

Hamburgermenyn har de senaste åren haft en framträdande roll på sajter och i appar. Men hur funktionell är den och hur ser framtiden ut? Vi samlade Kodamera-trion André Aznar, Henrik Larsson och Jonathan Alpmyr för att diskutera det och en hel del annat.

Bild med hamburgare för att knyta an till artikelns innehåll om hamburger-menyn inom webbproduktion

På webben finns det lika många hamburgermenyer som det finns hamburgare, och det är kanske det som gör det till ett så spännande ämne i en digital värld som förändras konstant. På så sätt var det också en bra grund för det rundabordssamtal som nyligen genomfördes med en av Kodameras teamleaders, André, samt Henrik och Jonathan, båda webbdesigners.

Vad är egentligen bakgrunden till hamburgermenyns uppkomst?

Jonathan Alpmyr: Den kom ju med iPhonen och smartphones generellt. Man var tvungen att lösa det på ett sånt sätt så att man kunde fälla ut en helmeny på liten skärm. Snacket började om att bygga “mobile first”, sedan har väl folk byggt samma layout för desktop också. Kanske av praktiska skäl, men även för att det blir en renare design. Designers gillar ju ofta minimalism, det här är något av en bieffekt på det.
Henrik Larsson: Jag håller med. Att använda konceptet hamburgermeny kan göra att man slipper undan en del komplexitet, både "designwise" och utvecklingsmässigt. Man slipper mycket jobb.
Andre Aznar: Ska man summera det så skulle man kunna säga att det är kostnadseffektivt med en hamburgermeny. Det är den enkla vägen, en latmanslösning om man ska vara lite hård. Jag vet inte var eller hur det började, men menyn har funnits i andra utföranden och kom väl redan runt 2010 i appar, så den har varit med ett tag. Den har ju bidragit till att skapa en designyta för menyn, lite på samma sätt som man haft i en tidning med innehållsförteckningen. De möjligheterna fanns inte innan, utan det var en huvudmeny och en undermeny. Det var ett givet mönster under ganska många år.

Hur stort är det idag med hamburgermenyer?

AA: Det är nog ganska stort ändå – i stort sett alla sajter har det i mobilt läge. Där skulle jag säga att den är dominerande.
JA: Ja, nästan alla responsiva sidor.
HL: Om man tittar på flera moderna sajter idag så känns det som att det är lite trendigt att ha en hamburgermeny även på desktop.

Hur bra är den?

JA: Jag tycker att det beror på vilken sajt och målgrupp det handlar om. Och vad du vill åstadkomma. Är det en minimalistisk sajt där man vill skala av allt, med fokus på bilder istället, så kan det vara ett bra sätt att dölja det andra. Om den däremot är navigationstung så blir det bara ett extraklick, och det tycker jag att man ska undvika så långt det går.
AA: Det du säger är att det funkar bra ur ett designperspektiv, men inte ur ett UX-perspektiv?
JA: Det beror på vilken sajt du menar, som sagt. Med till exempel en app som Youtube där du navigerar mycket är det ett problem, för du klickar bara mycket. Men om det är en webbyrå som har fyra sidor tycker jag att det kan funka. Det är också ett sätt att göra en fet meny.
AA: För mig blir det “design over function”, men det är ju ett val man kan göra. Jag tycker nog ändå att UX blir bristande. Enda gången jag tycker att det funkar är när man har en sajt som egentligen är byggd på att du tar dig igenom innehållet genom att scrolla och där man berättar en historia genom scrollning. Då ligger det bara övrig info i en hamburgermeny – den är sekundär. 

Ja, vad är problemen med hamburgermenyn?

JA: Det extra klicket. Man ser inte undersidorna vid första anblicken utan de är dolda.  De får inte lika mycket fokus och det blir ett extra steg att ta sig dit.
HL: Jag tycker att det blir intressant när det kommer statistik på att just det här extraklicket gör att folk går miste om saker. När man har den insikten så är det lättare att inte slentrianmässigt köra ut en hamburgermeny, som man kanske gjort ett tag.
AA: Spotify har ju plockat bort den, Youtube också. De började jobba med tabbar istället. Hamburgermenyn är ju ofta den lata vägen, den enkla vägen. Alla använder den i mobilen och då gör man det på desktop också istället för att tänka vad man vill att användaren ska göra – det vill säga: vilken information som ska prioriteras ut i menyn så att den blir lättillgänglig. 

Vad är alternativet idag istället för den sortens meny?

AA: Det är svårt att prata både desktop och mobil samtidigt, för det är väldigt olika ytor med olika möjligheter. På desktop har man ett helt annat utrymme än i mobilen, men jag tycker en bra lösning är en kombination – vi försöker ju få kunderna att prioritera vad som ska ligga i huvudmenyn. Det klassiska är att man har tolv poster där och där allt omöjligen kan vara lika viktigt. Förhoppningsvis har man tre, fyra, max fem, punkter som är såpass viktiga att de får lov att synas i en huvudmeny. Då kan man kombinera det med en hamburgermeny eller merknapp. Det löser det mesta.
JA: Ja, det funkar även bra med e-handelssajter där man vill spara mycket utrymme och kanske fokusera på några kategorier plus produkter. Konto och login kan med fördel döljas.
AA: Sedan kan det vara viktigt att tänka på de insikter vi har kring hur folk tar sig till sajterna. För många år sedan började man med att designa startsidan, utan att veta vad den ska innehålla. Det gör vi inte gärna längre, utan vi börjar bakifrån – vad är det för innehåll sajten ska ha? Vilka produkter och så vidare? Man räknade med att besökaren skrev in URL:en i browsern och landade på startsidan. Idag använder folk Google och andra sökmotorer i större utsträckning, så vi vet inte var de kommer in. Startsidan har tappat sin funktion lite på det sättet.

Vad tror ni om framtiden och hamburgermenyer – om ni får spekulera fritt…

AA: Jag tror att den kommer efterfrågas av kunder i ett par år till. Jag har svårt att se den försvinna i appar, men den kommer nog förändras lite grann. Den är ändå en del av ett ganska invant mönster.
HL: Det handlar ju, som sagt, om att prioritera rätt och ha den som ett komplement. Det känns som en schysst lösning.
JA: Jag kan tänka mig att det kommer bli vanligare att styra sajten med Siri och säga det man vill göra istället.
HL: Ja, det är ju intressant. 
AA: Det känns som att det är väldigt olika hur vi skulle kunna navigera beroende på vilken sajt det är. En e-handel kan utnyttja Siris hjärna om vi vill se en t-shirt i en viss storlek, men på en sajt där man bara har en meny utan struktur är det inte lika enkelt. Hur navigerar man med hjälp av Siri då, när man inte själv vet vad man ska hitta?
JA: Man kan ju tänka ut vad målgruppen kommer att säga och sen styra den dit. Det finns många olika termer. Men det är ju extra smidigt om man ska ha en specifik produkt, som en svart t-shirt i storleken medium.
HL: Det kanske blir vårt jobb i framtiden att hjälpa Siri att “tracka” vad som är primärt på den specifika webbplatsen, kan man tänka sig.

Till sist: Måste en hamburgermeny se ut som en hamburgare?

HL: Det är ju inget måste, och vill man vara övertydlig så kan det ju vara bra om det står “meny” under.
AA: Det finns tester som visar att den blir bättre hittad om man har en förklaring under eller bredvid, snarare än att bara låta den bestå av streck. Överhuvudtaget är ju den tydligaste ikonen en “textlabel”, om det inte blir ett för långt ord så att även ikonen blir lång. Det går ju inte att misstolka.

Behöver ni vår hjälp?

När det handlar om att analysera eller designa era nuvarande och framtida digitala lösningar så bidrar vi på Kodamera gärna med en hjälpande hand. Hör av er!

Jonas Sahlin

Kundansvarig
jonas [at] kodamera [dot] se