Hamburgermenyn är en av de mest använda typerna av menyer på hemsidor.

I varje webbprojekt, i appprojekt, i design- och teknikmöten.

Men vad är egentligen en hamburgermeny? Varför är den så populär och är Hamburger-menyn nästan ett måste nu för tiden eller finns det trevliga alternativ?

Vill du veta svaren på detta? Då har du kommit till rätt ställe.

Vad är hamburgarmenyn?

Med Hamburger meny kallas den så kallade hamburgerikonen. Den består av 3 linjer med lika bredd anordnade under varandra. Genom att klicka på ikonen öppnas den faktiska webbplatsmenyn eller appmenyn med en lista med länkar till andra sidor eller sidområden.

Faktum är att ikonen har sitt namn att tacka för dess likhet med hamburgaren. I betydelsen ett bröd under en biff i mitten, och ett bröd ovanpå.

Vem uppfann det?

Den amerikanska designern Norm Cox är krediterad för att ha uppfunnit Hamburger-ikonen. Vid den tiden arbetade han som visuell och gränssnittsdesigner vid Xerox Palo Alto Research Center i Kalifornien och arbetade för närvarande på Xerox ”Star”-arbetsstationen. Star lanserades 1981 och anses vara världens första grafiska användargränssnitt.

Och det var därför han uppfann en ikon. Men varför?

Norm Cox letade efter en förmåga att visuellt indikera en lista som kan visas med ett klick. Bilden för detta kunde ha en maximal storlek på 16×16 pixlar, men måste vara lätt att förstå. Raderna i Hamburg-ikonen var just det för honom: en underförstådd lista.

Hamburgermeny och de stora spelarna

Två decennier fick gå tills hamburgermenyn blev populär. Det var först Apple, sedan Google och Facebook, som återupptäckte den lilla ikonen. Varför?

Med uppgången av mobila enheter och den tillhörande bristen på utrymme, letade de efter nya sätt att använda skärmytan bättre och tydligare.

Lösningen – hamburgermenyn.

Apple själv använde bara hamburgar-ikonen diskret. Men sedan Google och Facebook följde efter fick hamburgarmenun mer och mer popularitet och slutligen berömmelse.

Nackdelar Hamburgarmenyn

Berömmelse och popularitet betyder inte att hamburgermenyn var populär bland alla. Snarare diskuterades den kontroversiella ikonen upprepade gånger. Här är nackdelarna först innan vi går in på fördelarna och tipsen nedan.

1. Inte självförklarande

Helst är ikoner tillräckligt tydliga för att alla ska förstå – även om han eller hon aldrig har sett ikonen förut.

Bakom en bokstavsikon finns det vanligtvis en e-postadress, bakom en telefonikonen Telefonnumret, men efter 3 streck?

2. Relevant innehåll är inte direkt synligt

Hamburgarmenyn är till för att dölja innehåll vid första anblicken och bara visa det med ett klick. Det är dock just denna funktion som samtidigt för motståndarna in på planen. Kritik: Innehåll som inte är direkt synligt anses mindre relevant och förbises snabbare.

3. Duplicering

Det kan hända att ikonen används av både enhetstillverkaren och webbplatsoperatören, till exempel apputgivaren. De indikerar alla samma funktion (öppnar en meny). Men det kan teoretiskt hända att två hamburgermenyer syns samtidigt. En gång från den mobila enheten, en gång från webbplatsen eller appen.

4. Interaktionskostnad och CTR

Ju fler klick krävs för en kund komma till önskad destination, desto större är risken att de går vidare någon annanstans. Den så kallade kundresan kan avslutas när som helst. Man talar här om så kallade interaktionskostnader.

Interaktioner kan och ska vara roliga. Men om de inte är det, eller om det handlar om hastighet, minskar sannolikheten för att klicka ytterligare när antalet interaktioner ökar. Klickfrekvensen minskar. En e-postknapp som är direkt synlig klickas oftare än en som bara är synlig 3 sidor senare.

Speciellt inom app- och butiksområdet är det värt att tänka på användningen av hamburgermenyn och optimera hemsidan med några tips. För ditt eget företag och potentiella kunder, investerare och anställda.

Fördelar Hamburgermeny

Hamburgermenyn hade inte varit så populär om den inte hade tydliga fördelar. Här är en översikt över de viktigaste punkterna.

Hamburgarmenyn är kanske inte direkt självförklarande. Men tack vare den ständiga och ökande användningen sedan 2000-talet är den nu en av de lärda ikonerna som förstås över hela världen. Och bara det har ett enormt värde.

Det finns inte många ikoner på webben som har lyckats förstås av lika många som hamburgermenyn. En annan menyikon måste först kopiera detta.

Distribution

Har du någonsin varit på en webbplats med kinesiska, japanska eller arabiska tecken? Här hjälper det enormt om det finns en meny.

Tydlighet

Hamburg-menyn når sitt mål: mer utrymme på skärmen, mer tydlighet för besökarna.

En fullständig meny för webbplatser i mobilvyn? Den som har fler än två små menyalternativ ska inte göra detta mot sina besökare. Professionell webbdesign inkluderar därför specifikt hamburgermenyn eller dess alternativ för responsiv design.

Hamburg-menyn lyckas ta ytterligare sidor ur sikte och på så sätt rikta fokus till kärninnehållet på respektive sida.

Design

Design har alltid ett syfte och syfte. Helst ska målet uppnås av dig som webbplatsoperatör, din målgrupp ska tilltalas och den önskade åtgärden ska triggas. Vare sig det handlar om att köpa en produkt, registrera sig för ett evenemang eller kontakta dig.

En minimalistisk menyikon som är välkänd över hela världen och som dessutom integreras mycket väl i minimalistisk, modern design? Helt klart har Hamburg-menyn tydliga fördelar ur designsynpunkt och därmed när det gäller vägledning och uppnående av destination

Hastighet och användarvänlighet

Hamburgarmenyn tillåter användare att ta fram önskad sida eller sidintervall direkt från menyn. Låter logiskt, men i övrigt inte nödvändigtvis givet.

Alternativet till detta är att besökare först måste scrolla igenom sidan, hitta rätt hopp och ibland bara nå önskad undersida efter att ha anropat olika sidor.

En kund till dig vill bara hitta telefonen nummer snabbt? Letar en potentiell kund efter en specifik tjänst? Webbplatsbesökare uppskattar den välkända navigeringen via Hamburg-menyn för att snabbt nå önskad destination.

Tips för hamburgermenyn

När, var och hur hamburgermenyn används kan göra stor skillnad av framgången för en app eller webbplats. Vi har därför sammanställt de mest relevanta tipsen för dig här.

Relevant innehåll

En kritik mot hamburgermenyn är att viktig information är dold. Kritik kommer alltmer från appområdet, men det är också viktigt för webbplatser att noga fundera över vilken information som faktiskt är relevant för vilken sida.

Medan fokus på den enskilda produkt- eller tjänstsidan tydligt bör ligga på respektive produkt eller tjänst, är det helt annorlunda för startsidor. Här är det värt att tänka på till exempel en hemsida som fungerar som en sekundär navigering. Till exempel genom att inkludera de viktigaste undersidorna i form av ett lättklickbart och visuellt tilltalande galleri.

Din målgrupp kommer inte att kunna undvika det relevanta innehållet.

Användarflöde

En kontaktknapp på rätt plats? Den synliga hamburgermenyn exakt när dina besökare vill klicka på den?

Ju bättre du känner till användarflödet för dina besökare, desto bättre kan du anpassa navigerings- och interaktionselement till det. Detta kan till exempel resultera i att hamburgerikonen visas som ett fast element i det nedre högra hörnet istället för att bara synas högst upp på sidan i början.

Målgrupp och visningsstorlek

Är din målgrupp hemma i onlinevärlden? Är användningen av mobilappar en del av vardagen? Då kan det löna sig att redan arbeta med en hamburgermeny för den responsiva vyn på stora displayer.

Din målgrupp är främst på stationära eller bärbara datorer på Internet eller lite äldre och behöver mer orientering? Då är det mer meningsfullt att bara använda hamburgermenyn för mobilvyn och att förse den responsiva designen med en fullständig meny för större skärmar.

Positionering

Hamburgermenyn visas vanligtvis längst upp till vänster eller höger. Men mobiltelefoner blir större och större. Resultatet: Om du försöker hålla i mobilen med en hand och klickar på menyn med tummen blir det allt svårare.

Att positionera som en fixering på vänster eller höger sida kan vara värt besväret, speciellt för en målgrupp som blir allt mer rörlig.

Alternativa webbplatsmenyikoner

Skulle du vilja ta upp idén om hamburgermenyn för din webbplats, men istället för den typiska hamburgerikonen, välj ett alternativ som passar dig bättre?

Vi kommer att ge dig de mest populära alternativen.

Fara: Ingen vet om uppfinnarna av namnet var hungriga, och det finns oftast alternativa namn. Men följande har slagit fast bland designers och webb- och apputvecklare.

Bento-meny/chokladmeny

Bento-menyn är uppkallad efter bento-lådorna – den japanska motsvarigheten till matlådan. Typiskt för bentoboxen är ett tydligt rutsystem och tillhörande separation av de olika rätterna.

Det tydliga, kantiga rutnätet är också kännetecknet för bento-menyn. Det skiljer inte rätter, utan 9 rutor från varandra.

Alla som inte har haft något med Japan och bento att göra kan vara glad över den alternativa beteckningen chokladmeny. Det är inte lika vanligt som Bento-menyn ännu, men det har potential. Chokladaskar har trots allt sina fans över hela världen, så namnet är ännu lättare att komma ihåg för många.

Bento-menyn används inte bara för att visa en webbplats eller appmeny, utan också för en fullständig översikt över apparna som är tillgängliga på en enhet.

Godismeny

Godislådorna (godislåda) påminner mycket om bento-menyn. Skillnaden är att istället för rutor används cirklar för menyikonen.

Kebabmenyn

Kebabmenyn kommer från den typiska hängande kebaben. Precis som med bento-menyn finns det också ett välsmakande alternativ till kebabmenyn: webbplatsens menyikon är också känd som en jordgubbe.

Nackdelen med detta ikonmenyalternativ är att det motsvarar den typiska filtersymbolen. Det känns därför av många användare mer som ett filter, till exempel ett projekt- eller kategorifilter, än som en meny.

Kebabmenyikonen är särskilt populär bland appar och förankrad i Googles materialdesign. Där kallas det ”More Vert”. I betydelsen: ”Mer information visas genom att klicka på de tre cirklarna som är anordnade vertikalt under varandra.”

Annorlunda som hamburgermenyn används kebabmenyn mer som ett komplement till hamburgaren. Men den kan också stå ensam för dig.

Vegetarisk hamburgarmeny

Den vegetariska versionen av hamburgermenyn har ingen hamburgare i mitten. Följaktligen består den endast av 2 linjer. Men denna menyikonvariant är inte bara populär bland vegetarianer och veganer.

Det är snarare ett uttryck för minimalistisk design. Allt som inte är absolut nödvändigt utelämnas. Menyn är fortfarande mycket igenkännlig som en meny. Designen är ännu mer fokuserad och delvis mer elegant.

Köttbullar Meny

”Köttbullarna” är redan mycket vanliga utan något namn. Helt enkelt genom att visa de tre små prickarna i citat, mejl och liknande. Detta mer visas inte vid första anblicken, men alla vet att man skulle kunna rapportera mer i detalj vid det här laget, citera i sin helhet eller ge ytterligare information.

Liksom kebabmenyn är även köttbullemenyn fast förankrad i Googles materialdesign och är populär för appar.

Mobilwebbplatsmeny – utan ikoner

Ett alternativ glöms ofta bort, men det löser automatiskt vissa problem . Naturligtvis, istället för en ikon eller hela menyalternativet, kan ordet ”MENY” eller meny också användas.

Det ser ganska snyggt ut i jämförelse, är omedelbart begripligt och det kommer inte i vägen för andra menyikoner på en enhet.

Här är ett exempel på apose.

Slutsats gamburgrmeny ikon

Det är inte förvånande att hamburgarmenyn fick hård kritik i början, när den ännu inte fick stor spridning.

Men dagens starka, världsomspännande medvetenhet och förtrogenhet är ofta underskattad styrka som förbättrar användarupplevelsen när du besöker en webbplats optimerad.

Tipsen för att använda hamburgarmenyn gör mycket för dina besökare och din egen framgång på webben. Och för den som helt enkelt inte gillar hamburgarikonen så finns det bra alternativ med ikonalternativen eller menyn som ett ord för att ta upp principen bakom hamburgarmenyn och för att gå lite mer individuellt i designen.

Hamburgarikonen och den tillhörande menyidén måste relatera till dig, ditt företag och passa din målgrupp.