Backend Media

Jag fick ett e-brev av Johan Persson som undrade hur man gör en bra meny:

Om man har en hemsida med ett antal huvudmenyer och undermenyer, hur ska man på bästa sätt placera dessa på en hemsida? Jag tycker att en drop-down -meny i javascript funkar bra, men det är inte speciellt användarvänligt.

Jag skulle vilja ha tips på hur man ska göra för att få det på bästa möjliga och snyggaste sätt.

Först och främst tycker jag att man ska tänka på vad en meny egentligen är till för. Den är gjord för att vara ett sätt att ta sig från punkt A till B på en webbplats. Att navigera sig fram. Det går därför inte att säga ”så gör du en bra meny”. Det är helt beroende på vad för typ av tjänst eller innehåll som finns på webbplatsen, och vem som ska använda den.

För att ta några exempel:

• Annonsportalen Blocket har en meny som visar upp hela rikets län. Menyn är därför väldigt besöksfokuserad. Besökaren väljer sitt län och får upp alla annonser därifrån. Besökaren kan sedan filtrera ut annonser om stereoapparater eller liknande.
• Google har i princip ingen meny alls. Men det behövs inte, eftersom Google inte har något eget innehåll utan serverar ett unikt sökresultat varje gång. En sökruta är tillräcklig navigering.
• Ikea är ju ett varuhus med grejer för hemmet, så det naturliga för deras webbplats är att ha sortimentet även där.Först får man välja en allmän produktkategori, det finns exempelvis Bord, Dekoration, Kök, Småförvaring med mera. Under Kök får vi sedan fram fler underkategorier såsom Bänkskivor, Kökssystem, Vitvaror. Väljer man Vitvaror får man sedan fram Fläktar som redan är markerad och där man även kan välja andra typer av vitvaror.

  Som synes så börjar man väldigt allmänt (kök) och slutar väldigt detaljerat (kylskåpet Energisk CFS 300 S för 3 795 kronor). Man får helt enkelt klicka sig djupare.

• Dagens Nyheter har de vanligaste alternativen i sin huvudmeny: Nyheter, Ekonomi, Debatt, Ledare och så vidare. Under respektive meny finns det dessutom undermenyer. Väljer man Ekonomi får man upp bland annat Börs, Fonder, Min Portfölj med mera. Precis som Ikea får man klicka sig djupare. Det bidrar till upptäckarlust och håller ned nivån på information som visas. Det finns ju ingen mening att visa en undermeny om kultur, om användaren valt ekonomi.

Vad kan vi konstatera av detta? Att olika webbplatser har olika menyer och navigation? Självklart. Men vad som är mer viktigt är att vi på förhand vet vad som finns på respektive hemsidor och menyerna är anpassade efter vår uppgift, alltså det vi ska göra på webbsidan.

På Ikea vill vi inte söka likt Google. Vi vet oftast inte vad produkterna heter, utan det är vår uppgift att ta reda på. Dessutom är det lätt att hitta smala ämnen om man får klicka sig djupare.

Så menyer är till för att lösa problem. Problem med att ta sig från start till mål. Det finns inget givet svar vad ett ”mål” är för något, utan det är beroende av din webbplats. Din meny är inget som du bygger allra sist och försöker få att ”se snygg ut”. Det är en naturlig del av webbplatsen som bestäms av strukturen.

Om du inte vet hur du ska bygga menyn, så vet du förmodligen inte strukturen på din webbplats.

Några generella tips när du ska bygga din meny och struktur:

• Ta först reda på vem som ska använda din webbplats, och hur. Det är avgörande att veta om den ska anpassas för väldigt många personer (då bör den vara enkel och logisk) eller väldigt få (då kan den vara mer effektiv och ge fler alternativ).
• Gruppera så mycket som möjligt i så få grupper som möjligt. Om du säljer bilar så kan det vara klokt att börja med att separera Begagnat och Nytt. Sedan kan man välja bilmodell. Men se helst till att ta reda på om dina besökare gör som du tror. Testa en person framför din webbplats, och gör det tidigt.
• Om din struktur är djup, låt besökaren börja brett och låt klicka sig djupare. Det är inte farligt med många musklick, så länge de är relevanta. Att visa upp alla alternativ på en gång kan vara skrämmande och bli för stort.
• Använd inte drop-down-menyer, de går inte att överblicka och kräver javascript. Det ställer onödigt höga krav på båda besökaren och webbläsaren.
• Läs också hur du lägger upp en struktur som formar webbplatsen.
• Och om du fortfarande inte är nöjd så ska du se till att läsa böcker om informationsarkitektur som är detsamma som en webbplats struktur. Jag föreslår att du läser Is Navigation Useful? på Jakob Nielsens Alertbox också.