I bloggen hittar du nyheter från Plucera Webbyrå
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å.
- 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.
- 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.
- 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.
- 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.
- Arkiv
- april 2015
- mars 2015
- maj 2014
- december 2013
- november 2013
- juli 2013
- december 2012
- september 2012
- maj 2012
- februari 2012
- december 2011
- oktober 2011
- september 2011
- augusti 2011
- juni 2011
- maj 2011
- april 2011
- mars 2011
- februari 2011
- januari 2011
- december 2010
- november 2010
- oktober 2010
- september 2010
- augusti 2010
- juli 2010
- juni 2010
- maj 2010
- april 2010
- mars 2010
- februari 2010
- januari 2010
- december 2009
- november 2009
- oktober 2009
- september 2009
- augusti 2009
- juli 2009
- juni 2009
- maj 2009
- Kategorier
- 10-listor (2)
- Ängelholm (2)
- Användbarhet (1)
- Applikationer (6)
- Årsredovisning (1)
- Blaj (2)
- Design (3)
- Externa tjänster (5)
- Helsingborg (4)
- Innehåll (1)
- Jobb (3)
- Kundarbeten (44)
- Medarbetare (6)
- Meddelande (23)
- Nyhetsbrev (1)
- Okategoriserade (11)
- Plucera.se (15)
- Praktikant (3)
- Samarbeten (2)
- SEO (1)
- Tävling (1)
- Teknik (10)
- Twitter (1)
- Typsnitt (1)
- Webbdesign (9)
- Webbläsare (2)
- Webbyrå (6)
- Webbyråveckan (6)
- WordPress (25)