Navigation i mobilen

Det är snart tio år sedan designregeln ”mobile first” breakade på riktigt. Hur känner vi för den regeln idag? Njae! Det är självklart viktigt att ha en enkel, intuitiv och snabb mobilvariant av din sida. Men om ”mobile first”-regeln gäller dig beror helt på bransch, tjänster och användare.

Oavsett om du prioriterar desktop eller mobil är ett minimikrav att båda är lättnavigerade. Annars kan du säga hejdå till dina användare. De kommer leta efter content eller erbjudanden någon annanstans. Därför är det viktigt att fundera på om du behöver finputsa navigeringen på mobilversionen av din sajt!

Skala ner, dra ihop och gör det enklare

Din sajt behöver oftast mindre innehåll när den visas på mobilen. Fundera på i vilka sammanhang dina användare kan tänkas behöva använda din sajt när de är på språng. Gör sedan en karta med de sammanhangen och skala bort resten. Här är tre gyllene regler för mobilnavigation:

Minimalt. Dölj en hel del content från desktopversionen.
Konsekvent. Menyn ska se likadant ut oavsett var användaren är – här är igenkänning och inlärning superviktigt.
Självklart. När din användare ska slutföra en uppgift, ska de helst göra det utan att ens registrera det.

Ha ett färgkodsystem för aktiv, inaktiv och laddar/väntar. Då vet användaren var den är, när något inte går att komma åt och får bekräftelse på att den har klickat när sidan inte har hunnit laddats upp. Det räcker med en stark färg, en svagare variant och grått.

Här kommer fem tips på mobilmenyer som både är välbeprövade och bra.

Menyn i botten – med eller utan en extra listmeny

Den här godingen känner du igen från Instagram, vilket är positivt – flera är redan vana vid den. Här slipper du träningsvärken från att sträcka tummen hela vägen upp till hamburgarmenyn i hörnet. Känner du att det här är menyn för dig:

Använd bara ikoner som din användare känner igen (till exempel: förstoringsglas = sök).
Är du osäker, var extra tydlig! Förstärk ikonerna med rubriker.
Ha ordentligt med utrymme runt ikonerna, så användaren inte klickar fel. Ikonerna får inte bli fler än fem just av den anledningen.
Räcker det inte med fem val (glöm inte att du ska rensa)? Om ja: är du säker? I så fall får du tillstånd att komplettera med en klassisk listmeny, varsegod! Se exempel till höger i bilden:

Fullskärm – lista eller grid

Nu kommer två, lite mer visuella, varianter. Behöver du förtydliga eller locka med bilder? Har du ett stort utbud med flera kategorier? Då är det nog bäst att du tar över hela skärmen! Med de här menyerna kan du visa allt, utan att det känns för mycket. Här gör vi det även lättare för personer med dålig syn. Om det här är din grej:

Sortera upp din information eller dina produkter i kategorier och underkategorier, ta gärna hjälp av dina användare.
Två viktiga knappar att ha med: ”tillbaka” och ”klar”. Du vill inte hamna i en underkategori, scrolla långt ner och sedan behöva scrolla upp igen för att bekräfta eller ångra dig.

Menyn i toppen – med eller utan meny i botten

Den här känns bekant, det är ju en klassisk desktopmeny! Så bara där har du en fördel – om du har bra navigation för desktop är det bara att sno till mobilen. En kombo med huvudmeny i botten och en extra meny i toppen känner du säkert igen från Facebook. Om du bara har en toppmeny kan ditt innehåll ta mer plats!

Precis som med en meny i botten kan du max ha fem val, annars är det stor risk att tummen träffar fel.
Om du kör kombon kan du ha flera val. Med den kan du också göra menyn i toppen till underkategorier som byts ut beroende på vilken sida du är inne på.

Vad vi kan hjälpa dig med:

Research (till exempel ta hjälp av användare för att rensa och kategorisera), UX- och UI-design. Hör av dig om du behöver möblera om dina menyer!

12/08/2019

Lästid: 3 min