Användbarhet: Menyer

8 mars 2011

Vi tänkte presentera en serie bloggposter inom området användbarhet. De kommer vara av varierande omfattning och skeppas ut lite då och då.

Vi gör detta för att det är ett område som ligger oss mycket varmt om hjärtat. Vad är det för mening att lägga en mängd tid, energi och pengar på något som sedan blir oanvändbart för den som det är tänkt ska använda den?

I vår första post kommer vi gå igenom menyer och navigering.

Horizontellt vs. vertikalt

Det finns inga regler utan undantag. Horizontella menyer är i de flesta fall bättre än vertikala. En horizontell meny kräver en väl fungerande innehållsstruktur, snappas bättre upp i och med det F-formade mönster som användare läser webbsidor på och skapar bättre möjligheter för drop-down-menyer. Louis Lazaris har skrivit en väldigt uttömmande artikel på Smashing Magazine om ämnet. Han listar också några av undantagen, som e-handelssidor eller webbsidor som växer i sådan takt att navigeringen/designen kommer behöva förändras ofta.

Drop-down

Nielsen har många gånger dömt ut användandet av drop-down-menyer. Många gånger för de faktiskt inte behövs. En användare som klickar på ett menyalternativ förväntar sig sällan att direkt behöva göra ett nytt val. En drop-down fungerar bäst för de som känner till strukturen på siten och det kanske är därför som många frågar efter detta när vi ska bygga webbsidor. Man har ju ofta bra koll på var informationen finns på sin egen sida och vill nå denna snabbt, vilket inte besökarna har på samma vis och där faller mycket av nyttan.

Om man ska använda sig av drop-downs finns det dock några saker att tänka på.

1. Visa tydligt att detta menyalternativ kommer att fälla ner en drop-down (ex. med en liten pil). Detta är extra viktigt om det finns alternativ i menyn som inte har någon drop-down.
2. Menyn ska visas efter att muspekaren vilat på alternativet en kort stund och inte försvinna förrän muspekaren varit utanför drop-down-menyn så lång tid att det inte är av misstag. Detta för att menyn inte ska öppnas bara man sveper över alternativet och råka försvinna bara för att man missat lite med muspekaren.
3. Se upp för diagonalaffekten. En drop-down för ett menyalternativ med kort text som fäller ut länkar med långa texter kan innebära att man råkar ut för diagonaleffekten. När man flyttar muspekaren för att välja en av länkarna råkar man samtidigt passera över ett annat menyalternativ och en annan drop-down fälls ut.
4. Använd aldrig mer än en nivå. En drop-down med ytterligare fold-outs kräver ytterligare förståelse för hur webbsidans struktur ser ut på ett sådant sätt att det troligen bara stämmer in på sidans ägare.

Mega drop-down

Till skillnad från vanliga drop-downs så har det man kallar mega drop-downs bevisade fördelar. Med en komplicerad informationsstruktur kan en sådan vara ett bättre alternativ än att försöka klämma in navigeringen på själva sidan.

Med en mega drop-down måste man också vara noga med att se upp för diagonaleffekten.

(Bild lånad från www.useit.com)

Högerjusterad meny

En meny som har högerjusterad text är svårare att använda. Då användare främst scannar menyalternativen kommer den ”hackiga” vänsterkanten göra att ögat måste ”hoppa” vilket gör alternativen mer svårscannade.