Skip to content

I can has hamburger menu?

Vi har tidigare pratat om kakor i bloggen. Nu har turen kommit till hamburgare, våfflor och andra matnyttiga menyikoner.

När en webbdesigner hör ordet ”hamburgermeny” finns chansen att hen inte först och främst associerar till en matsedel för amerikansk snabbmat, utan till den menyikon som nått normstatus för responsiva sajter, appar och andra utrymmeshämmade gränssnitt. Du vet, de tre horisontella strecken, som med lite fantasi och välvilja liknar profilen av en väldigt stiliserad hamburgare?

Hamburgarikonen

När välanvända appar som Facebook började använda hamburgarmenyn fick den snabbt spridning, och idag har den hunnit bli något av en standard. Ändå bör man tänka på att ikonen inte är självförklarande. Speciellt om din målgrupp är av det mer internetovana slaget bör du kanske överväga att använda (kanske komplettera med) exempelvis ordet ”meny”.

Hamburgarikonen är till förväxling lik den matematiska symbolen ≡ (vilket roande nog står för just ”identisk med”). Men betydelsen när symbolen används som ikon i appar och sajter är förstås en helt annan. En kvalificerad gissning är att de tre horisontella strecken började användas för att symbolisera de tre första raderna i en navigationslista, som i ”klicka här, för här döljer sig en meny”.

När webbläsaren Chrome bytte från skiftnyckelikonen (”inställningar”/”verktyg”) till de tre vågräta strecken, kallade Googles utvecklare den visserligen för ”hotdog icon”. Det är inte svårt att se korv-med-bröd-likheten heller, men ärligt talat – borde inte en hotdog-ikon ha ett något förlängt mittstreck? Kanske därför som begreppet hamburgarikon verkar ha blivit vinnaren i längden.

Korv-med-bröd-ikon?

En ikon som liknar burgarikonen är de tre lodrätt uppställda kvadraterna, som bland annat används i Android-gränssnitt.

Tre vertikala kvadrater

Funktionellt försöker man här gå ifrån begreppet ”meny”, så de tre fyrkanterna ska kanske snarare indikera att ”här finns mer” (precis som den snarlika symbolen med tre punkter ofta används). Men i realiteten blir det lätt samma sak; hamburgaren och kvadraterna/prickarna används rätt ofta för precis samma syften.

En kusin till hamburgarikonen och de tre kvadraterna är våffelikonen. Den används ofta för att signalera ”här finns fler appar”. Både Microsoft, Google och flera mobiloperativ använder våffelikonen i detta syfte. Ett annat namn för våfflan är just ”app launcher icon”.

Våffelikonen

Vi har börjat vänja oss vid att se både burgaren och våfflan som ikoner som berättar för oss att ”här finns mer innehåll”, men det är inte deras enda användningsområde. I andra sammanhang används de här två ikonerna för att symbolisera olika visningsalternativ: ”Visa som lista” kontra ”Visa som thumbnails”.  Bland annat Instagram använder hamburgaren och våfflan såhär.

Användaren kan ofta klura ut med hjälp av sammanhanget vilken betydelse som avses, men helt tydligt är det inte. Och det är förstås inte rekommenderat att använda ikonerna för dessa helt olika syften inom samma applikation. (Instagram har till exempel de tre lodräta kvadraterna för sin alternativmeny i Android och en kugghjulsikon i IOS.)

Ikonsmörgåsbordet är rörigt och det är svårt att hitta riktiga standarder. Jag lär återkomma med mer på temat i framtida blogginlägg. Motivet bakom just det här inlägget var förstås, som du säkert redan har listat ut, främst att få rita bilder på mat. (Kommer du på en ätbar liknelse för ikonen med de tre kvadraterna, får du gärna posta en kommentar om det här nedanför!)