Hamburgermeny: Eksempler på netthandel, fordeler og ulemper

Stadig flere handler på nett fra mobilen, og derfor er det avgjørende at nettsteder er mobiltilpasset og enkle å bruke. Utfordringen er at plassen på en telefonskjerm er begrenset. Hvis navigasjonselementene på nettstedet ditt er stappet sammen eller virker forvirrende, forlater de besøkende siden og handler et annet sted.

Derfor tar mange nettsteder og apper i bruk mobilnavigasjonens sveitserkniv: hamburgermenyen. Det enkle ikonet med tre streker har blitt det internasjonale symbolet for «flere navigasjonsvalg her», og samler nettstedets meny i én solid knapp.

Her får du vite mer om styrken og fallgruvene ved hamburgermenyen, historikken bak den, kjernefunksjonene og hvordan du bruker den effektivt i utformingen av mobilnettstedet ditt.

Hva er en hamburgermeny?

I mange år var den vanlige måten å navigere på et nettsted en horisontal meny, altså en rad med ord for hver kategori som strakte seg over toppen av skjermen. Men da mobilsurfing eksploderte på slutten av 2000-tallet og begynnelsen av 2010-tallet, drevet frem av fremskritt innen smarttelefonteknologi og mobilt internett, trengte nettdesignere en løsning som utnyttet plassen bedre.

Da kom hamburgermenyen (☰), et enkelt ikon med parallelle horisontale streker (brødet, om du vil) som omkranser en midtstrek (hamburgeren), og lar brukerne folde navigasjonsvalgene ut og inn etter behov. Du finner som regel hamburgermenyknappen i øverste venstre eller høyre hjørne av nettstedet eller appen.

Hamburgermenyens historie

Hamburgermenyen er faktisk eldre enn mobiltelefonene. På begynnelsen av 1980-tallet skapte designeren Norm Cox den til det grafiske brukergrensesnittet i Xerox Star-arbeidsstasjonen, en forløper for det opprinnelige grensesnittet til Apple Macintosh. Cox ville ha et enkelt og gjenkjennelig ikon som med ett klikk åpnet en liste over handlinger.

Etter lanseringen ble hamburgermenyen lite brukt og nærmest glemt frem til mobiltelefonene fikk sitt gjennombrudd rundt 2009. Behovet for effektive måter å vise menyvalg på små skjermer uten å overvelde brukerne, gjorde det kompakte og ryddige hamburgerikonet til en ideell løsning.

Hamburgermenyens popularitet ble sikret da Twitter og andre apper tok den i bruk, etterfulgt av bruken i Talememoer på iPhone 3GS og operativsystemet iOS 4, noe som befestet rollen som et kjent symbol for skjult navigasjon.

Fordeler og ulemper ved hamburgermenyen

Hamburgermenyer er ideelle for mobile enheter, men navigasjonslinjer og fanemenyer kan passe bedre for de som bruker datamaskin. Her er hvorfor:

Fordeler

Den kompakte størrelsen er selve poenget med hamburgerikonet. Det sparer dyrebar skjermplass og rydder opp i utformingen av nettstedet, særlig på mindre skjermer som smarttelefoner. Når du klikker eller trykker på hamburgerikonet, vises nettstedets navigasjon, enten gjennom en meny som glir inn, en rullegardinmeny eller et overlegg i fullskjerm. Dette kan forbedre kundeopplevelsen på mobil.

Ulemper

Selv om fordelen med spart plass er ubestridelig, mener noen at hamburgermenyer i nettlesere på datamaskin kan gjøre innholdet vanskeligere å oppdage. Hvis brukerne ikke kjenner menyikonet, kan de overse det helt og gå glipp av viktig innhold eller navigasjonsvalg.

For å løse dette kan du vurdere å bruke responsive designmaler med ulike menystrukturer for ulike enheter. Et nettsted kan vise en tradisjonell horisontal navigasjonslinje på datamaskiner, men bytte til en hamburgermeny på mobile enheter for å spare skjermplass.

Eksempler fra virkeligheten: hamburgermenyer i praksis

Du vil ofte se at et nettsted bruker responsivt design, slik at hamburgermenyen bare vises i mobilversjonen mens en annen menystil vises på datamaskin. Her er et par netthandler som bruker hamburgermenyer på en god måte:

TCB Jeans

TCB Jeans holder det enkelt med en standard hamburgermenyknapp med tre streker øverst på mobilsiden. Når du klikker på den, glir en liste med lenker ut fra venstre side, med valg som Hjem, Produkter og Om oss. Ved siden av Produkter-lenken står et lite plusstegn, som antyder at det finnes flere valg hvis du trykker.

TCBs nettsted for datamaskin har også en hamburgermeny, noe som gir plass til et fotografi i full bredde som bakgrunn og lar kampanjer få en fremtredende plass. I mobilversjonen glir hamburgermenyen inn som et overlegg, noe som gir brukerne et visuelt hint om at menyen kan skjules, slik at siden bak kommer til syne igjen. TCBs hamburgermeny er:

• Ryddig. Det er en dårlig idé å stappe menyknapper sammen på en liten telefonskjerm. Bedre å skjule dem i hamburgermenyen.
• Kjent. Hamburgermenyen er vanlig på mobilsider, så den forvirrer ikke de fleste brukere.
• Lar produktene stå i sentrum. Ved å skjule menyen bak hamburgerknappen trer produktbildene tydeligere frem og fremhever varene som er til salgs.

Gymshark

Gymsharks nettsted er et godt eksempel på hvordan versjonen for datamaskin kan skille seg fra den mobiltilpassede versjonen. På datamaskin er det ingen hamburgermeny, men på mobil dukker den opp i øverste venstre hjørne. Når du trykker på den, vises et søkefelt og undermenyer for produktkategorier. For å gå tilbake til startsiden trykker du bare på X-ikonet øverst til høyre.

Gymsharks hamburgermeny fungerer godt fordi den prioriterer det viktigste, nemlig å vise tilbud og nye klær først for umiddelbart engasjement. Den er også kjent, med menyknappen plassert der du forventer den og en enkel og forståelig liste under.

Tips for en vellykket hamburgermeny

Nettstedseiere som bruker hamburgermenyer, kan holde disse seks tipsene i bakhodet for å styrke brukeropplevelsen og forbedre konverteringsraten:

Gjør den synlig hele tiden

I de fleste tilfeller er hamburgermenyen liten. Sørg for at den likevel er lett å få øye på. Plasser den øverst til venstre eller høyre på skjermen, der brukerne pleier å se. Og hold plasseringen den samme på alle sidene på nettstedet ditt.

Hold deg til standardikonet

Bruk de tre velkjente parallelle horisontale strekene (☰) til hamburgermenyen din. Disse ikonene er utbredt, og de fleste brukere forstår umiddelbart hva de er til for.

Prioriter rekkefølgen på menyvalgene

Organiser menyvalgene på en logisk måte. Du kan legge til et søkefelt, og deretter rangere de viktigste og mest brukte kategoriene eller sidene ovenfra og ned.

Vær mobilvennlig og tilgjengelig

Sørg for at menyen fungerer godt på alle mobile enheter og berøringsskjermer. Menyvalgene bør være store nok til at de enkelt kan trykkes på med en finger.

Legg til animasjon og visuell tilbakemelding

Når brukeren samhandler med menyen, gir subtile effekter visuelle hint. For eksempel kan strekene rotere og forvandles til en X eller et + for å vise at menyen åpnes og lukkes. Strekene kan endre tykkelse eller utvide seg litt. Toning og forskyvning gir dybde mens brukeren samhandler. Eller du kan endre fargen eller la den sprette litt når den blir trykket på.

Test og innhent tilbakemeldinger

Før du ferdigstiller hamburgermenyen, bør du teste den på virkelige brukere. Observer hvordan de bruker den, og samle inn tilbakemeldinger.

Bruk av hamburgermeny sammen med andre navigasjonsverktøy

Noen ganger er den beste måten å forbedre brukervennligheten på å kombinere ulike knapper og menyer. Hver type har sine styrker og svakheter, men brukt sammen kan de skape en mer sømløs og effektiv brukeropplevelse.

Nettdesignere for netthandel kan bruke kombinasjoner som gjør det enklere å oppdage produkter, med tydelig og direkte tilgang til handlekurven og betalingsprosessen. Kontroller at alle navigasjonselementer er enkle å trykke på på berøringsskjermer. Test ulike kombinasjoner for å se hva som fungerer best for målgruppen din:

• Toppnavigasjon pluss hamburger. Bruk toppnavigasjon til viktige kategorier og funksjoner som butikk og handlekurv, og bruk hamburgermenyen til å gi tilgang til mindre brukte navigasjonsvalg som Om oss, Kontakt, Kundeservice og Retningslinjer. Slik holder du hovedskjermen ryddig, samtidig som du gir rask tilgang til nødvendige sider.
• Fanenavigasjon pluss hamburger. Bruk fanenavigasjon inne på en produktkategoriside for å filtrere eller sortere produkter, som Nyheter, Bestselgere og Sorter etter pris. Dette lar brukerne raskt avgrense produktsøket etter at de har brukt hamburgermenyen til overordnet navigasjon.
• Fast toppfelt pluss hamburger. Det faste toppfeltet inneholder viktige snarveier til hovedkategoriene og blir liggende øverst på skjermen mens du blar. Hamburgermenyen brukes til sider av mindre betydning.

For eksempel bruker nettstedet til Fly by Jing en hamburgermeny til brede menyvalg, mens selve butikksiden bruker en fanemeny med fire valg («Sauser», «Sett», «Spiskammer» og «Merch») for videre avgrensning.