Hvorfor har vi en kødbolle i menuen?

Billed kilde: DailyCMS.com

Et af verdens mest anvendte ikoner

Et ikon der har plads på 9 ud af 10 hjemmesider er ‘hamburger menuen’. Ja, det er hvad ikonet kaldes – også i professionelle miljøer.

Hamburger menuen består ofte af 3 streger, der ved et klik åbner op til en større navigation menu med eventuelle flere underpunkter. Især på mobilen, hvor pladsen er begrænset, er det super smart at kunne lægge menupunkter under én bolle.

 

Hvor kommer burger menuen fra?

Hamburger menuen blev opfundet af designeren Norm Cox og blev brugt i en af de første computermodeller, Xerox Star, der kunne købes og bruges af privatpersoner. Ifølge Cox, designede han ikoner, der senere fik navnet “hamburger ikon” da han og hans team havde brug for:

“Offloade” en masse ekstra funktioner, der ikke var plads til i en hoved navigationen.

Samle en masse funktioner/punkter i ét samlet element.
For at visualisere at der bag ikonet ville være flere punkter, lavede han en ultra simpel illustration af en liste = 3 streger.

I et interview med Invision siger Cox selv følgende om udviklingen af det nu berømte ikon: “Gosh, I probably did that at 8:30 at night on a Tuesday and never thought twice about it.”

I dag er hamburger menu ikonet en fast del i de fleste UI’ers værktøjskasse, simpelthen fordi vi brugere har lært, at de 3 streger = flere menupunkter/funktioner.

Kilde: Evernote.

 

Hvornår bør du bruge en hamburger menu?

Når jeg arbejder med navigation på et website, tager jeg tidligt stilling til hovedmenuen. Af den simple årsag at den har stor indflydelse på den overordnede navigation på siden + den ligger øverst/først på siden.

Situationer hvor en hamburger menu er godt at have i sin menu navigation:

1. På mobilen
2. Når menuen skal være simpel/”ren”

Hamburger menu på mobil = Ja tak

En mobil har ca. ⅓ af plads i bredden, sammenlignet med desktop, hvilket helt naturligt afliver de fleste menuer der har mere end ét menupunkt.

Her kommer hamburger menuen ind som en redning, for med ét klik kan brugeren tilgå både undersider og under-undersider. Bonus er at det at bruge en hamburgermenu ikon er så udbredt, at brugeren godt forstå, hvad de 3 streger betyder.

 

Når menuen skal være simpel/”ren” (desktop)

Jeg har gentagne gange set websites hvor menupunkt på menupunkt er blevet hægtet på sitet igennem tiden, hvilket har resulteret i gigantiske, uoverskuelige menuer. Det er ikke optimalt for brugeren, men heller ikke virksomheden bagved, som nu skal til at holde mange siders content opdateret, uden det egentlige gavner forretningen.

Løsningen er ikke insistere på at investere i en helt nye hjemmeside, bare fordi der er kommet nye sider til. Eller at smide nye/ekstra sider tilfældigt under en hamburger menu.

Nej, løsningen er at foretage en hovedrengøring og bruge hamburger menuen smart.

Når jeg skal begynde på en “hovedrengøring af en menu”, så stiller jeg nogle spørgsmål:

1. Hvad er det vi ønsker at brugeren gør?
2. Hvad er oftest det, som brugeren gør?

De handlinger virksomheden ønsker, at brugeren gør, lægger jeg i den “synlige” menu. Det kan fx være “kontakt”, “Se varer” eller lignende. De resterende sider, fx “om os”, “karriere”, “cases”, lægger jeg i en burger menu.

På den måde er de vigtigste aktiviteter fremhævet i menuen, simpelthen fordi de får alt spotlightet. Og de resterende menupunkter kan nemt findes, fordi brugeren godt ved, at de ligger bag “de 3 streger”.

 

Hamburger menuen er 4 ever

De 3 simple streger er gået over i UI historien og de forsvinder nok ikke lige foreløbig. Historien om hamburger ikonet er et klassisk, godt eksempel på at simpelt design der bliver gentaget nok gange, kan blive en del af et helt nyt, universelt sprog.

Hamburger menuen er på den måde også et klassisk eksempel på simpel UI, der kan løse et større, kompleks problem, som fx en overloaded menu kan være.

Mit navn er Oliver Panthera og jeg er specialist indenfor UX, digital design og CRO.

Hvis du kunne lide indlægget, vil jeg anbefale dig at følge mig på LinkedIn – her skriver jeg løbende om UX, digital design og marketing. Du ved, alt det som gør en virksomhed til et brand, og et køb til en god oplevelse.