Navigering och menyer

När du fått in besökare till din webbplats är det viktigt att de hittar vad de letar efter. De kanske inte kommer direkt till den sidan de letar efter eller så är de nyfikna och vill veta mer om vad du och ditt företag arbetar mer med. För att dina besökare lätt ska hitta på din webbplats är det viktigt att ha en enkel, tydlig och effektiv menystruktur. Men vad behöver man då tänka på när man bygger sin meny?

Antalet kategorier

Antalet kategorier i din meny beror helt på vilken typ av innehåll du har och hur mycket. För mindre eller väldigt fokuserade webbplatser räcker det ofta med ett fåtal kategorier i menyn. Större sajter med ett bredare utbud behöver dock ofta fler kategorier och kanske till och med flera menyer för att ge besökarna en bättre överblick.

Urbanears är ett exempel på ett företag med ett fokuserat produktutbud. De behöver inte mer än fem huvudkategorier i sin meny för att visa upp sitt utbud och göra det lätt för besökaren att hitta vad de letar efter.

Urban ears menystruktur

Elgiganten däremot är ett företag som erbjuder ett mycket större utbud av elektroniska produkter, där räcker det inte med få kategorier utan de behöver istället jobba med många fler huvudkategorier men även många subkategorier för att göra det enkelt för deras besökare att hitta de produkter de är intresserade av. Dessutom har de menyer på flera ställen för att skilja produkterna från annan typ av information som till exempel kundservice och kundportal.

Menystruktur för Elgiganten
 
Gör inte misstaget att kategorisera din webbplats utifrån avdelningar och hur ni arbetar, kategorisera istället era produkter och tjänster efter hur era potentiella kunder använder dem. Alcro gör ett bra jobb med detta i sin meny. De har få huvudkategorier där du kan välja om du ska måla inomhus eller utomhus. I en av undermenyerna kan du dessutom välja vad du ska måla för att få både tips och produkter som passar för ändamålet.
 
Menystruktur för Alcro
 

Ordningen på kategorierna

När du vält bestämt vilka kategorier som är relevanta för er verksamhet så är det dags att ordna dem, men ska du göra det alfabetiskt eller i någon annan ordning? Det beror så klart på många olika faktorer: vilka andra sorterings ordningar som känns relevanta, i hur stor utsträckning besökarna känner till kategorinamnet samt hur många kategorier du har.

Ordna efter användning och förväntan

Oftast finns det en annan ordning som är mer relevant än alfabetisk ordning, till exempel hur frekvent besökarna använder olika menyalternativ. Genom att lägga de mest använda menyvalen längst till vänster så slipper dina besökare läsa igenom hela menyraden innan de hittar vad de letar efter. Vissa val förväntar man sig dessutom ofta att de ska ligga längst till höger, till exempel Om oss eller Kontakt. Om det är någonstans där det lönar sig att vara förutsägbar så är det på din webbplats! Lägg menyer och menyval där dina besökare oftast förväntar sig att hitta dem så slipper de mycket frustration och letande.

Ordna alfabetiskt

Men i många fall är det också väldigt effektivt att sortera alfabetiskt, till exempel när dina besökare vet precis vad kategorin heter och skannar din sida efter just det ordet. Det kan till exempel vara när dina kategorier består av varumärken eller produktnamn. En alfabetiskt ordning kan du göra det lättare att hitta, men det förutsätter såklart att dina besökare är bekanta med din terminologi.

Alfabetisering av menyn på din webbplats kan också underlätta navigationen om du har många kategorier. Då behöver dina besökare inte läsa igenom hela listan för att hitta vad de letar efter. Men det fungerar enbart om du använder standardiserade fraser som kategorirubriker och dina besökare är bekanta med dessa. Om inte måste besökaren ändå läsa igenom hela listan och då hjälper alfabetisering inte nödvändigtvis.

Blanda sorteringar

I vissa fall kan det vara bra att använda en blandad sortering, det vill säga en del ovanför med de viktigaste och mest använda kategorierna och sedan en del under med alla kategorier. Då får du ofta en bra effekt där de vanligaste kategorierna inte försvinner i mängden samtidigt som alla de andra hittas enkelt.

Funktionalitet och styling

Fixerad meny

En fixerad meny, eller sticky-meny, hänger med och när du scrollar på en webbsida. Den lägger sig i överkant på skärmen och försvinner alltså inte när du kommer längre ner på sidan. Det här är ett bra sätt att hjälpa dina besökare snabbt hitta vad de letar efter. De slipper scrolla upp hela vägen för att byta kategori om innehållet är väldigt långt, till exempel på en e-handel.

Fixerad menystruktur för IKEA

Enligt Clicktale föredrar besökare i allmänhet en fixerad meny men de fungerar allra bäst på webbplatser som syftar till att besökaren gör någon form av handling, till exempel ett köp, en offertförfrågan eller liknande. En fixerad meny kan på denna typ av webbplatser bidra till att avvisningsfrekvensen minskar och konverteringarna ökar. Detta menar Clicktale beror på att en fixerad meny ger användare en känsla av kontroll då de hela tiden ser menyn och därmed enkelt kan leta sig vidare, och lätt nå konverteringspunkter.

Expanderbar meny

Expanderbara menyer, eller så kallade drop-downs, visar fler underkategorier vid klick eller när besökare hovrar över alternativen. Dessa ger ofta en snabb och smidig överblick för den som besöker din webbplats. Men menyer som bara visas vid hovring är ett problem för mobilanvändare. Därför är det viktigt att i mobilversionen gör en enklare klick-variant av menyn så att även dessa besökare kan hitta vad de letar efter. Speciellt viktigt blir det då mobilen numera är vanligare än desktop och även fortsätter att öka stadigt.

En expanderbar meny gör det ofta enkelt att visa fler kategorier utan att ta upp allt för stort utrymme. Men det kan vara svåra att använda när de har väldigt många alternativ eller när det finns subkategorier i flera led. Då blir det ofta svårt att se och ibland kanske till och med omöjligt att klicka på olika alternativ. Håll dem därför så enkla och rena som möjligt för användarvänlighetens skull.

Megameny

En megameny är en annan typ av expanderbar meny med många valmöjligheter i en tvådimensionell design. Megamenyer ger en överblick över alla menyval utan att man behöver scrolla. De olika kategorierna är också grupperade visuellt med hjälp av till exempel layout, typografi eller ikoner. Menyn kan öppna sig både via hovring eller klick.

Ett välkänt exempel på en megameny hittar man hos IKEA. Här är menyalternativen tydligt grupperade och skiljs åt med underrubriker. De har förtydligat sin “Börja här”-sida med en bildlänk vilket gör att den poppar. I ett eget grått fält till höger finns andra länkar som inte går direkt till produkter men som är relevanta för huvudkategorin.

Menystruktur för IKEA

Hamburgermeny

Hamburgermenyn är ett populärt menyalternativ för mobiltelefoner men vi ser det också oftare på desktop-versioner. Men i en studie gjord av Nielsen Norman Group framkom det att gömda menyer, som en hamburgermeny, är svårare att upptäcka för användare och färre är benägna att använda menyn. Om de använder menyn gör det också det senare under besöket jämfört med synliga menyer, som till exempel topplänkar.

Studien visade också att dolda menyer påverkade användarvänligheten negativt både på mobilen och desktop, även om det var en tydligare negativ effekt på desktop. De förklarar detta med att en liten ikon är svårare att hitta på en större skärm. De rekommenderar att man undviker hamburgermeny på desktop och bara använder den på mobil ifall det finns mer än fyra kategorier.

Många större företag har tagit bort sin hamburgermeny, till exempel Facebook, YouTube och Spotify. Platsbristen på mobilen är ett stort problem och det finns många kreativa och användarvänliga lösningar på detta, många av vilka Levi Kovacs presenterar i en artikel på UXplanet. Några populära lösningar är botten-meny med en “mer”-knapp för fler än fyra menyalternativ samt flikar i toppen på sidan som ibland går att scrolla för fler alternativ.

Läs mer:

https://www.nngroup.com/articles/ia-questions-navigation-menus/
https://uxplanet.org/5-ui-patterns-navigation-that-makes-good-ux-sense-92a65df7485d
https://www.nngroup.com/articles/hamburger-menus/
https://uxplanet.org/great-alternatives-to-hamburger-menus-d4c76d9414dd
https://www.nngroup.com/articles/mega-menus-work-well/
https://www.awwwards.com/fixed-navigation-bars-pros-and-cons.html
https://www.clicktale.com/resources/blog/the-3-golden-rules-of-sticky-navigation/

de senaste trenderna inom digital marknadsföring

4 steg till att synas när dina kunder googlar (SEO-copy)

4 steg till att synas när dina kunder googlar (SEO-copy)

Vad är det egentligen man ska tänka på när man ska skriva en text som är sökmotoroptimerad? Hur bör man konstruera en text om man vill öka chansen att den visas upp av Google? Mikael Högling, Seo-copywriter på Torget Updated reder ut begreppen. Inledning När du...

läs mer

Säg hej till oss!