Hur man löser Hamburger Icon Problem
Hamburgerikonet - tre små barer som brukade indikera en länk till en meny - är en om de mest kontroversiella teknikerna på webben just nu. Designers, vi får höra allt hatar det; kunder, vi berätta för alla, hatar det också. Varför då är det överallt?
Hamburgerikonet är lätt skalbar och passar rent i ett pixelnät. Det var ursprungligen en listikon som har tryckts in i sin nuvarande roll, men eftersom en meny bara är en lista över alternativ är det semantiskt korrekt att använda listobjektet på detta sätt.
Det har skett en stor debatt, A / B-testning, bloggar och användarstudier som utförts på ämnet, men dessa studier fokuserar nästan alltid på appdesign. När hamburgerikonet används i webbdesign indikerar det ett betydligt större problem.
Problemet med hamburgerikonet
Det finns många designers som ifrågasätter värdet av hamburgerikonet själv. Det ses ofta som en ikon-ikon, trots att den användes på detta sätt innan Apple antog det.
Det finns faktiskt en hel del motstridiga bevis på huruvida hamburgerikonen är användbar som en indikation på en meny. Vissa designers hävdar att ikonen lätt känns igen av en yngre demografisk, andra föreslår att en äldre demografisk känner igen den om den är webliterad. Den enda slutsatsen som vi verkligen kan dra av detta bevis är att användbarhetstest har visat sig otvivelaktigt, med parallella tester återkommer ofta motstridiga resultat.
Det som är allmänt accepterat är att användarna inte känner igen hamburgerikonet som en enda länk, förmodligen eftersom den är utformad för att se ut som en grupp länkar, snarare än en enda sak. Något som stöds är det som omger hamburgerikonet med en gräns, eller ger den en bakgrund, så att den ser ut som en knapphoppare som jag säger, mer skeuomorphic - kommer att leda till fler klick.
Fler problem med hamburgerikonet
Förutom designen av ikonen i sig, är också användningen av en hamburgerikonen riven med problem.
För det första, och kanske mest betydelsefullt, lägger hamburgerikonen en extra åtgärd till din navigering; när det ska ta ett klick för att nå en viss sida, kommer det nu att ta två. Tumregeln för webbdesigners har alltid varit högst tre klick (om möjligt), hittills från att lösa ett navigationsproblem, utbyter hamburgerikontekniken helt enkelt ett problem för en annan. Självklart är det inte bara ett problem för hamburgerikonen, det är ett problem för vilken navigering som helst på denna sätt. Du kan använda ordet 'Meny' istället för hamburgareikonen och du kommer att ha samma obstruktion, skillnaden är att hamburgerikonet inte kan användas på något annat sätt.
Hamburgertekniken döljer också innehållet. Ur UX-synvinkel bör användarna inte behöva vidta åtgärder för att ta reda på vilka åtgärder de kan vidta. Det är alltför lätt att glömma att "dela på Twitter" eller "gå till kassan", när dessa alternativ inte är direkt framför dig. Användare kommer helt enkelt inte leta efter en länk som de inte vet existerar.
Slutligen döljer hamburgerikontekniken nuvarande status för din webbplats och användarens position i den. Nedtillstånd i en meny ger kontextuell information till en användare som hamburgerikontekniken döljer.
Vad fungerar hamburgerikonen bra?
Med tanke på att hamburgerikonet är allmänt hatat och resulterar i en rad problem, varför används den överallt?
I min erfarenhet, visserligen bland vissa demografi, har hamburgerikonen nyligen nått punkten att bli lättkänd. Studier som åsidosätter det som brukar vara ett år eller mer gammalt och ett år är länge på interweben.
Faktum är att länkikonet är mycket mer igenkännligt än länkikonen eller delikonen, vars definitiva former ännu inte har kommit fram. Hamburgerikonet är konsekvent i alla olika utformningar.
Viktigast hamburgerikonet gör vad det innebär att göra: det sparar oss massor av skärmfastigheter. Om en klient presenterar dig med en lista över gagillion-objekt som måste läggas till i en meny, så ändrar du dem från skärmen och länkar till dem är ett otillfredsställande men effektivt sätt att göra plats för det innehåll som kunden vill.
Jag skulle vilja säga att hamburgerikonet löser problemet bättre än andra lösningar, men det är inte sant. Istället säger jag att hamburgerikonet löser problemet mindre dåligt än andra lösningar.
Roten till problemet
Hamburgerikonen tenderar att vara anställd eftersom designers - eller oftare kunder - inte är helt engagerade i ett mobila första tillvägagångssätt. De vill ha en "vanlig" sida, men pressas på deras grandaughters telefon.
Motståndarna till hamburgerikonet tenderar att ersätta det med ordet "Meny". På så sätt misslyckas de helt och hållet. Hamburgerikonet har, liksom det eller inte, fått sin mening nu, men användare som förstår vad knappen är för löser inte den största frågan, vilket är att gömma vår navigering, gömma våra användares alternativ, är en hemsk handling av mig själv -sabotage.
Kort sagt är hamburgerikonet ett symptom på vårt kollektiva misslyckande att helhjärtat omfamna alla aspekter av den mobila första tillvägagångssättet.
En bättre lösning
För att lösa problemet med hamburger måste vi acceptera att webben som vi vet det inte fungerar. Uppkomsten av mobilbanan betyder mycket mer än att minska antalet kolumner vi använder och släpper några av de tyngre bildfilerna.
Mobilbanan används på ett annat sätt till webben av gamla. Mobilbanan finns i anslutning till dedikerade appar och användare förväntar sig att webben ska upplevas på ett liknande sätt.
Facebook-appen bytte namn på sin hamburgerikon för en flikfält, vilket resulterade i förbättrade konverteringar. Men Facebook har gjort något betydligt mer betydelsefullt än bytesmeny. Nyligen har de släppt sin Messenger-app, och den stora delen är att de redan hade en perfekt funktionell och populär app som de kunde ha integrerat meddelandet med. Facebook har avdelat sina funktioner genom att fokusera varje apps roll de har kommit fram till två enkla appar, i stället för en komplex. Den reducerade funktionaliteten resulterar i en minskad uppsättning menyalternativ och mindre behov av en hamburgaremeny.
Goda applikationer är mycket fokuserade, och de har utvecklats på det sättet genom långt mer noggrann användartestning än vad webben utsätts för. För att skapa en appstilupplevelse behöver vi förenkla våra webbplatser, förenkla igen och förenkla lite mer. Om det är nödvändigt, bryta din arkitektur ner i hanterbara bitar med stor storlek, microsites nästan. När vi presenterar våra användare med en enkel uppsättning alternativ uppstår problemet med en komplex meny aldrig.
Att använda hamburgerikonen är som att slå ett bandhjälp på en skada: det patchar upp det, men under något är det fortfarande brutet.
Endast om vi helt och hållet omnämner ett mobila första tillvägagångssätt, och tillämpar det inte bara på vår design, men till vårt innehåll och vår informationsarkitektur, kommer vi att skicka hamburgermenyn till historien.
Utvalda bild / miniatyrbild, användningar Hamburgerbild via Mononc 'Paul