Den vertikala navigationen

2014.09.12

Vi fortsätter på navigationsspåret och går denna gång in på den vertikala navigationen. En renodlad vertikal navigation är för mig lite nostalgisk. Den var betydligt vanligare i internets begynnelse än vad den är idag. Jag höll på att ge Aftonbladet som ett exempel på en sajt där man navigerar vertikalt… men även där har man sedan några år tillbaka skaffat sig en horisontell toppmeny ”ovanför” den vertikala. Jag menar inte att vertikala navigationer är ovanliga, oh nej, de är tvärtom jätte(!)vanliga som undernavigation. Däremot är sajter med en ren vertikal navigation mer sällsynt, två exempel är dock URplay och TSL. Så vad är då fördelarna med en vertikal navigation? Jo:

+ Navigationen är lätt att få överblick över då listningar i vertikalled (vilken en meny som denna i grund och botten är) snabbt går att scanna av med ögat. Detta förutsätter dock att texten är vänsterställd, vilket hänger ihop med att vi läser från det hållet. För de språk som läser från höger till vänster bör texten istället högerställas.

+ Navigationskonceptet är klassiskt. De allra flesta känner igen denna typ av navigering och vet hur den fungerar. De har därför inga problem att hitta djupare i strukturen.

+ Informationssajter har många gånger innehåll strukturerade i flera nivåer. En vertikal navigation stödjer rent konceptuellt ett oändligt antal nivåer… även om jag inte för allt i världen skulle rekommendera fler än max 4 nivåer. 

+ Innehållet, som bör vara det viktigaste på sajter, kan börja allra högst upp på sidan. 

En hel del av kritiken mot en vertikal navigation hänger ihop med hur den utformas och sedan även hur den hanteras av en webbredaktör. Därför vill jag ge lite riktlinjer kring just detta för att ge de bästa möjliga förutsättningarna för en bra vertikal navigation.

* Fler nivåer är 3-4 gör det svårt för användare att få en bild över hur mycket innehåll som strukturen egentligen består av. Försök därför att plana ut strukturen. Ett vanligt problem i djupa strukturer är att innehållet på nivå 1 handlar om en sak och på nivå 4 om något helt annat. Ha hellre fler menyval på nivå 1 som endast innehåller relevanta undersidor.

* I mötet med webbredaktörer upplever jag ibland att det finns en förutfattad mening kring hur många menyval det får finnas i nivå 1 på en sajt. Visst stämmer det att 5-7 i antal är någon form av magisk gräns för hur mycket en människa kan hålla reda på samtidigt… men att tvinga en sajt med mycket innehåll att endast hålla sig till 5 menyval i nivå 1 är en mardröm. Som en följd av att man försöker komma på en benämning som innefattar informationsmängder som egentligen inte alls hör samman tenderar menyvalen då att bli väldigt vaga. Så här vill jag ge samma rekommendation som i den tidigare punkten. Ha hellre fler menyval i nivå 1! Se till att döpa dessa med konkreta och beskrivande namn som tydligt återspeglar vad användaren kan förväntas hitta där.

* Långa sidnamn är något som bör undvikas. Så fort ett menyval löper på flera rader kommer navigationen att upplevas mer rörig. Alla sidor kan dock inte heta i stil med ”Kontakt” eller ”Produkter”. Det vi vill undvika här är onödigt långa sidnamn. Men det är en balansgång då vi fortfarande vill att sidnamnen tydligt ska återspegla det faktiska innehållet på sidan.

Så till nackdelarna med en vertikal navigation.

– Navigationen tar plats från innehållet i sidled. Så är det bara. Har man dessutom många långa sidnamn som verkligen inte går att korta ner så vore det ju bra om navigationen breddades för att minimera antalet menyval som behöver skrivas på flera rader… Men det tar ännu mer plats från innehållet, vilket gör att man får välja mellan menyval på flera rader eller mindre plats till innehållet. Inget lätt val även om jag tycker att innehållet är det som bör prioriteras i det här läget.

– Navigationen är dessutom känslig i bredd. Varje ny nivå måste skilja sig från den övre för att det ska vara tydligt för användaren vilket innehåll som tillhör vilken nivå. Det vanligaste sättet att visualisera detta är genom indrag/indentering. Indrag gör dock att ju djupare i strukturen sidan är desto mindre utrymme finns för själva sidnamnen i sidled vilket gör att sidnamn återigen riskerar att hamna på flera rader. Då känns det ju enkelt att bredda navigationen… och så var vi där igen. Breddad navigation tar plats från innehållet.

Med dagens större skärmar i kombination med ett responsivt tänk är jag själv nyfiken på att utforska möjligheterna med en vertikal navigation ytterligare. Jag kanske dock är partisk i denna fråga… För en väl utformad vertikal navigation skulle kunna fungera på i princip samma sätt oavsett skärmstorlek. Enda skillnaden när skärmstorleken blir mindre är att navigationen behöver ”fällas ut” istället för att ligga fast på sidan. Så jag ser fler möjligheter är problem. Mycket spännande!

Tycker du att jag är lite väl partisk i denna fråga så finns jag tillgänglig för diskussion :)!

Happy navigating!