Navigationskoncept för responsiva webbplatser

Hur svårt kan det vara? Det finns ju många snygga och responsiva navigationskoncept att inspireras av på nätet. En snabb sökning på Google ger drygt 4 miljoner träffar. Den ena vackrare än den andra. Menyer som följsamt och stilfullt animerat åker in från sidan och öppnar sig som en lotus blomma i dagsljus.

Kolla t ex in den här , den här  och den här (minska fönstret under 480 pixlar)

Problemet är just det. Att navigationskoncept ofta är sprunget ur formgivning och tekniska funktioner. Konceptet för den lilla skärmen har ofta tagits fram från hittepå innehåll och har lite förankring i verklighetens innehåll. För vad händer när du puttar in allt innehåll från en kommunwebb eller annan innehållsrik webbplats i den responsiva menyn? Hur upplever användarna att det är att navigera sig runt på webbplatsen i mobilen? Ofta ganska frustrerande.

Typiska problem som användare har när de navigerar på en webbplats i mobilen

• Hur hittar jag menyn? Alla är inte förtrogna med tre strecks-ikonen (aka hamburger-ikonen) som ska symbolisera en innehållsmeny längst upp till höger eller vänster på skärmen.

• Tryckytorna är för små och länkarna ligger för nära varandra. Användaren trycker och hamnar på helt fel sida.

• Typsnittet är inte responsivt och anpassas inte för skärmen. Texten är för liten och radbryter heller inte vid långa ord utan spänner över visuella avskärmingar. Får det att se rörigt ut.

• Var befinner jag mig i strukturen? Formgivningen tar lite hänsyn till att hjälpa användaren att förstå var hen befinner sig på webbplatsen.

• Låååååånga listor med innehållslänkar. Scrollning i långa banor innan man hittar rätt.

• JavaScript som förvisso gör menyn cool och snygg segar upp hela navigeringskonceptet och får menyn att ladda långsamt och med viss hackig fördröjning.

• Är sidan borttagen? Man har av någon anledning valt att dölja vissa sidor för mobilsurfarna som hen kommer åt via desktop.

Varför blir det så här?

När vi separerar innehåll från teknik och formgivning missar vi en stor del av användarperspektivet. Vi behöver göra användartester med målgruppen på det faktiska innehållet, veta att lösningen passar dem. Det blir också ett problem när vi ”designar som alla andra gör” – det klassiska – att titta på andra, inspireras och göra exakt samma sak utan att veta om det verkligen är den bästa lösningen.

Hur kan vi göra?

Involvera dina användare i framtagning av navigationskoncept för din responsiva webbplats. Testa, skruva, testa, skruva, arbeta med detaljerna. Tänk på tillgänglighet och prestanda. Våga designa med dina användare i fokus, jag slår vad om att ni tillsammans kommer fram till en lösning som är 10 gånger bättre än reklambyråns.

7 Tips för navigationskoncept för responsiva webbplatser

1. Använd gärna ord som Meny eller Innehåll i kombination med hamburger-ikonen (om du av någon anledning bara MÅSTE ha den).

 

2. Gör tryckytor minst 44 pixlar så att det blir tryckvänliga och öka avstånden mellan länkar till det samma.

 

3. Använd ett responsivt typsnitt och öka textstorleken i mobilen till minst 16 pixlar som standard på brödtext. Testa hur rubriker flödar på webbplatsen och att de inte sticker utanför skärmen

Läs Techniques for Responsive Typographic

4. Visa tydligt i menystrukturen var besökaren befinner sig på webbplatsen. Om användaren stängt menyn och öppnar den se då till att den scrollar ner automatiskt till den sida som användaren befann sig på, så att hen inte behöver leta.


5. Testa prestanda och komprimera JavaScript för snabb laddning.

Google Page Speed

6. Ta dig en extra funderare på varför du skulle plocka bort sidor för det lilla fönstret som återfinns på desktop.

Läs Not your only strategy

7. Testa med riktigt innehåll och tillsammans med användarna.

Läs Användningstesta responsiva webbplatser