Det er vanskelig å se for seg netthandel uten nedtrekksmenyer; de er en så viktig del av webdesign for nesten alle typer nettsteder. Likevel er det overraskende få nettbutikker som har mestret kunsten å gjøre dem virkelig brukervennlige. I denne artikkelen går vi gjennom alternativene for å designe effektive navigasjonsmenyer for nettsteder, både for desktop og mobil. Vi gir deg 8 tips til å optimalisere nedtrekksmenyene i nettbutikken din og gjøre siden din enda enklere å navigere.
Nedtrekksmenyer: Hvilke typer navigasjon forbedrer konverteringsraten på nettstedet ditt?
Hva er navigasjon på nettstedet?
Navigasjonsfeltet på nettstedet ditt hjelper kundene dine med å finne fram lettere. Det inneholder lenker som fører brukerne dine til de viktigste kategoriene på nettstedet ditt. Derfor kalles det også en «responsiv meny».
Men nettstednavigasjon stopper ikke der. Noen andre vanlige elementer i nettstedsnavigasjon er:
Hovedmenyen, som lister opp alt innholdet på nettstedet i rekkefølge etter hierarkiske kategorier.
Verktøynavigasjon, som består av lenker til nyttige sekundære funksjoner som handlekurven eller brukerinnlogging.
Filtre, som lar kunden snevre inn søkeresultatene sine.
Brødsmuler, som viser kundene hvilken side de befinner seg på i nettstedets navigasjonsstruktur.
Fotnavigasjon, som vanligvis inneholder nyttige lenker til innholdssider, som siden «Om oss» og nettstedets juridiske informasjon.
Hvordan bidrar god nettstedsnavigasjon til å forbedre konverteringen i e-handel?
Å tilby en positiv brukeropplevelse (UX) er akkurat like viktig for en nettbutikk som for en fysisk butikk. Det betyr at det må være enkelt for kundene å finne frem på nettsiden din. Fra det øyeblikket de lander på siden, må de se en tydelig oversikt over den viktigste informasjonen, slik at de raskt finner det de leter etter. Derfor er det viktig å tilby praktiske og brukervennlige menyer i nettbutikken din. Ved å gjøre det enkelt for kundene å intuitivt finne alt innholdet og alle funksjonene de trenger, øker du sjansen for å få til et salg.
Hvis nettstedet ditt derimot er forvirrende eller vanskelig å navigere på, vil kundene sannsynligvis klikke seg bort og handle et annet sted. Det øker fluktfrekvensen din og senker konverteringen. Nedenfor viser vi deg hvordan du kan skape en bedre brukeropplevelse med rullegardinmenyer og andre navigasjonsmuligheter, slik at du kan optimalisere nettbutikkens konverteringsfrekvens.
Velger du riktig hovedmenytype: Hvilke alternativer har du?
Når du bygger et nettsted for e-handelsbedriften din, er et av de første valgene du må ta, om du vil vise hovedmenyen vertikalt eller horisontalt.
En vertikal meny går langs venstre side av siden, fra topp til bunn.
En horisontal meny går langs toppen av siden, fra venstre til høyre.
Med en horisontal meny er plassen begrenset av skjermbredden. Derfor består den ofte bare av korte nøkkelord. I kontrast kan du gjøre en vertikal meny så omfattende som du vil. Husk bare: Det er best å begrense hovedmenyen til de viktigste kategoriene, slik at det forblir oversiktlig for kundene dine.
Nedenfor beskriver vi noen vanlige designtyper for hovedmenyer. De fleste av disse kan ordnes enten vertikalt eller horisontalt på skjermen.
Statisk navigasjon
Med statisk navigasjon (også kjent som en «fast topptekst» eller «fast meny») er hovedmenyen alltid synlig. Det betyr at den blir værende på skjermen, selv når brukeren scroller nedover siden. Fordelen er at brukeren slipper å scrolle helt tilbake til toppen av siden når de vil navigere til et annet menypunkt. Hvis du vil bruke en fast topptekst, må du passe på at den ikke tar for mye plass. Ellers kan den dekke til annet nyttig innhold på skjermen når brukeren scroller ned.
Interaktiv navigasjon
Interaktiv navigasjon er som regel ikke et særlig godt valg for nettbutikker. Med denne typen navigasjon finnes det ingen lenker som leder brukerne fra A til B. I stedet blir navigeringen på siden sett på som en del av opplevelsen. Interaktive elementer gjør navigasjonen mer spillaktig ved lekent å lede brukeren fra én seksjon eller ett underdomene til det neste, helt til de har sett alt innholdet.
Hamburgermeny
Hamburgermenyen er også kjent som en vekslemeny eller off-canvas-meny. Den ble utviklet spesielt som svar på den raske veksten i bruken av smarttelefoner. En hamburgermeny er lett å kjenne igjen på knappen med tre parallelle, horisontale linjer, som vanligvis vises øverst til høyre eller øverst til venstre på et nettsted. Disse linjene ligner vagt på en hamburger, og det er slik menyen fikk navnet sitt.
Hvis nettstedet ditt bruker en hamburgermeny, vil brukerne først bare se innholdet på siden og knappen for hamburgermenyen. Når brukeren trykker på knappen, vises hovedmenyen over hele skjermen, og gir dem alle alternativene de trenger for å navigere på nettstedet ditt.
Denne typen meny er også stadig vanligere på nettsteder for PC, men det betyr at brukerne må klikke på en ekstra knapp bare for å se menyen. Derfor anbefales hamburgermenyen først og fremst bare for mobilversjonen av nettstedet ditt.
Rullegardinmenyer
Den vanligste typen menyer på e-handelsnettsteder er responsive rullegardinmenyer. Disse viser først en hovedmeny som bare lister opp hovedkategoriene. Når brukeren klikker på eller holder musepekeren over et menypunkt, utvides listen og viser flere underkategorier. Du kan legge til så mange lag med nedtrekkbare underkategorier du vil. Likevel er det best å ikke ha mer enn to. Hvis produktsortimentet ditt er så omfattende at du trenger mer enn to nivåer med rullegardinmenyer, har du en megameny (se nedenfor).
En horisontal rullegardinmeny kalles noen ganger også en nedtrekksmeny. En vertikal rullegardinmeny omtales noen ganger som en utvidemeny. Begge typer utvidbare menyer sørger for god brukervennlighet for kundene dine. Hvis du velger å bruke en rullegardinmeny, bør du først tenke gjennom hvordan du vil strukturere innholdet på nettstedet ditt. Ellers kan menyen fort bli rotete og vanskelig å bruke.
Mega-rullegardinmenyer: Fordeler og ulemper
En mega-meny kan gi mange fordeler når det gjelder brukeropplevelsen, men den har også begrensninger. Nok en gang er det viktig å planlegge strukturen på nettstedet ditt nøye. Tross alt er mega-menyen din bare nyttig hvis alle elementene i navigasjonsfeltet på nettstedet ditt er tydelige fra start. Så før du velger å bruke en mega-meny, bør du bruke litt tid på å tenke gjennom den beste måten å presentere innholdet på nettstedet ditt på. Tabellen nedenfor viser de viktigste fordelene og ulempene ved mega-menyer.
Nettdesign: 8 tips for å gjøre rullegardinmenyer brukervennlige
Nedenfor finner du noen tips om navigasjonsvalg på nettsiden som du kan bruke for å forbedre konverteringsraten din. Brukervennlighetstipsene våre hjelper deg med å gjøre hovedmenyen din—og hele nettbutikken din—mer brukervennlig.
Tips #1: Planlegg navigasjonen på startsiden din på forhånd
Før du begynner å velge menyvalg, er det viktig å planlegge hver funksjon og hvert innholdselement på nettsiden din. Du kan vanligvis dele funksjoner og innhold inn i hovedkategorier og underkategorier. Sørg for at du gir hver kategori tydelige og korte navn. Brukere skanner som regel bare raskt over menyvalgene, så det er viktig at de enkelt kan skille dem fra hverandre og med en gang forstå hva de er.
Tips #2: Legg de mest relevante valgene først
Menyvalgene som er mest interessante for brukerne dine, bør alltid stå først i hovedmenyen. Hvis du for eksempel er en SaaS-leverandør, er det lurt å starte menyen med valg som overbeviser besøkende om at løsningen din passer for dem. Prøv menyvalg som disse:
Hvorfor oss?
Om oss
Priser
Hvis du driver en nettbutikk for et motemerke, bør menyen fokusere på produktene dine. Lenker til annet innhold, som produktråd eller blogginnlegg, bør komme mot slutten av menyen. Generelt avhenger de beste måtene å optimalisere konvertering for nettbutikken din på av hvilken bransje du er i.
Tips #3: Bruk en visuell struktur
En vanlig meny kan bare vise tekst i et enkelt format. Meganedtrekksmenyer, derimot, gir deg muligheten til å fremheve bestemte menyvalg. Du kan for eksempel bruke forskjellige:
Tekststørrelser
Tekstfarger
Skrifter
Ikoner
Dette lar deg legge mer struktur i innholdet i nedtrekksmenyen. Ikke alle valg må lenke til en faktisk side; noen ord kan ganske enkelt fungere som ikke-klikkbare overskrifter for de ulike klikkbare underkategoriene.
Tips #4: Unngå å inkludere ekstra funksjoner
Ikke legg inn kompliserte interaksjoner i nedtrekksmenyene dine, som registrering til nyhetsbrev eller valg- og søkefelt, siden dette ofte kan virke avskrekkende på brukerne. Det siste du vil, er at hovedmenyen din skal få et rotete design. Dessuten dukker elementer som disse ofte opp flere steder på en nettside. De får større effekt hvis du plasserer dem på sidene der de passer best.
Det kan derimot være veldig effektivt å legge inn en call-to-action (CTA)-knapp i navigasjonsfeltet. Legg for eksempel til en knapp som lar kundene dine gjøre en reservasjon eller et kjøp med ett klikk. Bare husk at CTA-en bør plasseres ved siden av hovedmenyen og ikke i selve nedtrekksmenyen.
Tips #5: Velg mellom å holde musepekeren over eller klikke
Mange nettsider bruker nedtrekksmenyer som åpner seg så snart brukeren holder musepekeren over menyvalget. Hvis du vurderer å bruke dette alternativet, er det noen punkter du bør tenke på:
Alt med en gang: En megameny bør åpne seg på én gang, i stedet for å åpne gradvis, ett underkategorinivå om gangen.
Perfekt timing: Menyen bør ikke være for følsom. Du vil unngå at den ‘flimrer’ når brukeren holder musepekeren over den for raskt. Samtidig bør den ikke reagere for tregt. Vi anbefaler en reaksjonstid på 0,1 til 0,5 sekunder for optimal brukervennlighet. Det er også lurt å tillate en kort pause før menyen skjules, i tilfelle brukeren ved et uhell fører musepekeren bort fra menyen. En meny som er for følsom eller uforutsigbar vil frustrere brukerne dine og få noen av dem til å gi opp og forlate nettstedet ditt helt.
MouseOut-programmering: Når nedtrekksmenyen aktiveres, flytter kundene markøren fra navigasjonsfeltet inn i menyen. Med mindre nettstedet ditt er korrekt programmert, vil det feilaktig logge en MouseOut-hendelse når musen forlater navigasjonsfeltet, og det vil føre til at menyen lukkes. Derfor er det viktig å sette opp menyen slik at nedtrekksmenyen bare forsvinner når musen forlater både navigasjonsfeltet og selve nedtrekksmenyen.
Mobilversjon: Å holde musepekeren over er ikke mulig på smarttelefoner eller nettbrett. Hvis du vil bruke en hover-aktivert nedtrekksmeny på desktop-siden din, husk å bruke andre innstillinger på mobilversjonen.
Tips #6: Følg tre-klikk-regelen
På de fleste nettsider bør navigasjonen følge «tre-klikk-regelen». Det betyr at brukerne dine skal kunne nå hvilken som helst informasjon på nettstedet ditt med ikke mer enn tre klikk. Dette er selvfølgelig bare en generell rettesnor. Hvis du har et stort, svært detaljert nettsted, er antallet klikk ikke like viktig så lenge siden er godt organisert. Det som betyr mest, er at kundene dine alltid føler at det er lett å finne frem.
Tips #7: Bruk flere menyer
For nettsteder med mye informasjon kan det være nyttig å legge til mer enn én meny. Du kan for eksempel velge en nedtrekksmeny med produktkategoriene dine som hovedmeny, samtidig som du bruker en egen meny i footeren som inneholder sekundære kategorier. Dette hindrer hovedmenyen din i å bli for rotete. Se tabellen nedenfor for å se hvordan dette ser ut.
Tips #8: Utseendet teller
Et attraktivt menydesign bør beholde samme størrelse, selv når menyvalgene i hovedmenyen inneholder ulikt antall underkategorier. Hvis nettstedet ditt har en søkefunksjon, må du sørge for at nedtrekksmenyene ikke dekker den til når de utvides.
Du bør også inkludere et lite visuelt hint som viser om et valg i navigasjonsfeltet vil utvide seg til en nedtrekksmeny hvis brukeren klikker eller holder musepekeren over det. Plasser for eksempel en liten pil ved siden av menynavnet: for nedtrekksmenyer bør pilen peke ned; for fly-outs bør den peke mot høyre. Dette hjelper kundene dine å intuitivt forstå at de kan forvente å finne mer informasjon.
Mobil handel: Gjør nettbutikken din enkel å navigere i på en smarttelefon
Flere og flere kunder bruker smarttelefonene sine til å bestille varer på nett. Det betyr at det er viktig å ha mobilkundene i tankene når du velger menyvalg for nettbutikken din. Det anses ikke lenger som en god idé å skjule enkelte menypunkter i mobilversjonen din. Tross alt forventer vel ikke mobilbrukere å ha tilgang til den samme informasjonen som skrivebordsbrukere? La oss se på noen brukervennlige alternativer som gjør det enklere å navigere på nettstedet ditt på en mobil enhet.
Den «gjør ingenting»-tilnærmingen
Den enkleste måten å designe navigasjonen på mobilnettstedet ditt på er å gjøre den nesten identisk med skrivebordsnettstedet ditt. Du trenger bare å gjøre noen små justeringer for å gjøre det enklere for brukerne å trykke på menypunktene med berøringsskjermene sine. For eksempel:
Øk avstanden mellom de enkelte navigasjonselementene.
Velg en passende tekststørrelse.
Men denne tilnærmingen fungerer egentlig bare for nettsteder som har korte menyer og få elementer å navigere i. For større nettsteder er en mobil navigasjonsdesign med flere nivåer et mer brukervennlig alternativ.
Nedtrekksmenyer
Nedtrekksmenyer lar deg tilby alle de samme alternativene som på skrivebordsnettstedet ditt, men i et oppsett som passer bedre for mobilshopping. Når brukeren trykker på et menypunkt, foldes navigasjonsalternativene ut over innholdet. Derfor kalles denne typen meny for mobilnettsteder også en overleggmeny.
Utfellingsmenyer
På mobilsider er utfellingsmenyer en mer praktisk menytype enn nedtrekksmenyer. Når en utfellingsmeny åpnes, dekker den ikke innholdet på siden, men skyver det nedover i stedet. Da kan kunden fortsatt bla ned og se innholdet hvis de vil, også når menyen er åpen. Denne typen meny er litt vanskeligere å programmere, men er veldig populær blant brukerne.
Off-canvas-navigasjon
Med dette alternativet er menyen ikke integrert i sidens oppsett, så den tar ikke opp plass på skjermen. Brukeren trenger bare å trykke på menyknappen for å åpne menyen, som dekker resten av siden. Deretter er nettstedets navigasjonsstruktur det eneste som vises på skjermen. Dette er et spesielt godt alternativ for nettsteder med mange underkategorier å navigere i.
Konklusjon: Hvor enkelt er det å navigere i nettbutikken din?
Det finnes mange måter å lage en brukervennlig meny for nettbutikken din på. Avhengig av hvilket butikksystem du bruker, kan du velge mellom mange ulike navigasjonsdesign. Uansett hva du velger, er det viktig å starte med å strukturere innholdet på nettstedet tydelig fra begynnelsen av. Hvis du har et stort produktutvalg, er det beste valget å bruke nedtrekksmenyer på skrivebordversjonen av nettstedet ditt og nedtrekksmenyer på mobilversjonen. Bruk sjekklisten nedenfor for å være sikker på at du ikke glemmer noen av tipsene våre når du utformer navigasjonsmenyen for nettstedet ditt.
Sjekkliste for å lage brukervennlige nedtrekksmenyer
Kategorinavnene er korte og lette å forstå.
Hovedkategoriene er sortert etter hvor relevante de er for brukeren.
Det er en visuell indikasjon (for eksempel en liten pil) ved siden av menynavnet som viser at menyen faller ned.
Nedtrekksmenyen åpnes i løpet av 0,1 til 0,5 sekunder når brukeren holder markøren over den i navigasjonsfeltet.
Nedtrekksmenyen åpnes helt fra starten. Kundene trenger ikke å klikke på en kategori for å se underkategoriene.
Visuelle indikatorer, som ikoner og ulike tekstfarger, brukes for å gjøre den utvidede nedtrekksmenyen enklere å navigere i.
Menyen lukkes ikke hvis brukeren flytter markøren bort fra navigasjonsfeltet og inn i den utvidede nedtrekksmenyen.
Alle nedtrekksmenyer er like store, uansett hvor mange underkategorier de inneholder.
Det finnes ingen interaktive funksjoner (som nyhetsbrevregistrering) inne i nedtrekksmenyene.
Den utvidede nedtrekksmenyen dekker ikke søkefeltet eller annet viktig innhold.
Sekundære funksjoner er listet i separate menyer (for eksempel i bunnteksten).
More updates
Hold deg oppdatert
Gå aldri glipp av en oppdatering. Få produktoppdateringer, nyheter og kundehistorier rett i innboksen din.