Informationsarkitektur

Din webbplats struktur.

Hur gör man en bra meny?

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å.

Behöver du en sökmotor till din webbplats?

Om du vill ha en enkel, kraftfull sökmotor till din webbplats så kan du titta på Fluid Dynamics Search Engine.

Det är en sökmotor som kan användas på både lokala och externa webbplatser. Utseendet kan ändras genom mallar och det verkar väldigt lättanvänt (du kan testa att själv anpassa sökmotorn i deras demo, inga krångligheter där inte).

Versioner finns för både freeware och shareware och sökmotorn används tillsammans med Perl.

50 procent av besökarna använder sökfunktion

Mer än hälften av alla besökare på en webbplats letar efter en sökfunktion. En femtedel väljer däremot att leta sig fram bland länkarna och den tredje gruppen använder både och. (Siffror från useit.com.)

Så därför kan det vara bra med några tips när du placerar ut din sökfunktion:

  • Använd inte länkar till sökfunktionen, utan placera en sökruta på varje sida väl synlig. Just det, varje sida.
  • Sökmotorn bör söka igenom allt redan från början. Glöm avgränsande sökningar i nyheter eller något annat. Den form av sökning ska läggas på den avancerade sökningen, om du ens har någon sådan.
  • Booleanska sökningar bör undvikas (alltså AND och OR med flera). Som sagts i föregående punkt så bör det endast göras i den avancerade sökningen.
  • Sökrutan bör vara stor nog. En bra tumregel är att du kan få plats med frasen ”Får jag plats med detta?” i sökrutan.

Den enklaste formen av sökfunktion vinner alltså. Därmed inte sagt att tekniken för att leverera resultatet är enkel. 😉

Här är ett dåligt exempel på sökfunktionens utformning:

Sökruta hos filmdatabasen IMDb.com

Filmdatabasen IMDb.com har placerat två sökrutor nära varandra. Det vållar problem när man bara sätter markören i närmsta ruta och trycker enter. Visst ska man promota sina egna funktioner, men jag går inte till IMDb för att söka på nätet. Och att lägga ”IMDbPro.com free trial” under webbplatsens sökruta känns malplacerat. Det är bättre att lägga den på resultatsidan i stil med ”With IMDbPro you can search better because…”. Då är jag mer benägen att använda den.

Här är ett bra exempel på en sökfunktion:

Sökruta hos Microsoft.com

Nu sätter väl alla Linuxfanatiker i vrångstrupen, men Microsoft har faktiskt en bra utformad sökfunktion. Sökrutan är stor, tydlig och placerad längst upp på sidorna. Liksom IMDb försöker Microsoft promota sin egen sökmotor (MSN Search). Men jag besöker inte Microsoft för att söka på nätet. Sidan med sökresultat är det däremot lite si och så med. Det brukar vara lättare att gå till Google och söka efter innehållet på Microsoft. Lite ironiskt. 😉

I övrigt har både mjukvarutillverkaren Microsoft och filmdatabasen IMDb bra webbplatser, båda inom sitt respektive område, späckat till tusen med nyttig fakta.

Bra struktur löser den osynliga tillgängligheten

Det finns mycket skrivet om tillgänglighet på nätet. Men det mesta koncentrerar sig på det vi faktiskt kan se på den enskilda sidan och de som ”har funktionshinder”. I ett större sammanhang kan informationsarkitekturen drastiskt påverka hur man använder en webbplats, och samtidigt minska tillgängligheten till informationen.

Informationsarkitektur – Svårt ord? Javisst, men det handlar bara om att lägga upp alla webbsidor på ett enkelt och logiskt sätt. Att placera dem i olika grupper som man sätter namn på. Svårare än så behöver det inte vara. Det viktiga är att man är tydlig. För enkelhetens skull använder vi ordet struktur.

Man kan säga att struktur är en osynlig form av tillgänglighet. Det går inte att peka på och säga ”på rad 42 så saknas det och det” eller ”om du gör så, så kommer blinda Lasse få det enklare”. Det kan endast läras genom kunskap.

Några böcker inom ämnet:

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites av Louis Rosenfeld och Peter Morville. Jag har inte läst den själv (än), men planerar att köpa in den inom kort. Jag har hört mycket gott om den och den anses tydligen vara The Book inom informationsarkitektur på nätet. Någon som har läst den kanske kan kommentera? Ges ut av O’Reilly.

Information  Architecture: Blueprints for the Web

Information Architecture: Blueprints for the Web av Christina Wodtke. Full av tydliga exempel och principer för hur man bäst strukturerar informationen. Verkar också läsvärd.

Och ett länktips från Kornet.nu:

Informationsarkitekter brukar framhålla att ingen längre bara surfar runt på måfå. Det kanske förekom i webbens barndom, säger vi; nu är det viktigt att förstå att surfare alltid har ett syfte när de ger sig iväg till en sajt.

Det är både sant, och inte sant.

Bra informationsarkitektur väcker upptäckarlusten

Dagens nyheter finns på två domäner – så får det inte gå till

Dagstidningen Dagens nyheter finns under både dn.se och dagensnyheter.se. Så får det inte gå till.

Det är bra att registrera olika former av ett tidningsnamn, men det ska bara finnas en version som är den rätta. Själv föredrar jag att skriva dn.se eftersom det är kortare. Således bör den bli den officiella webbplatsen och alla andra skickar besökaren vidare dit.

Det har däremot Göteborgs-Posten tänkt på och skickar användaren vidare till gp.se när man försöker skriva in goteborgs-posten.se (om du glömmer bindestrecket spelar det ingen roll, goteborgsposten.se är också registrerad och skickar dig vidare till gp.se).

Så planerar och bygger du en stor webbplats

Vill du bygga en stor webbplats? Det första du inte ska göra är att slänga dig på tangentbordet och börja knacka html. Inte än. Det är bättre om du först planerar vad du ska göra.

1. Bestäm din budget. Det behöver inte kosta ett öre att göra en stor webbplats, men det kan däremot ta lång tid. Bestäm i förväg hur mycket tid och energi du vill lägga ned.

2. Vem ska använda webbplatsen? Det är helt avgörande för vem du gör webbplatsen och ditt syfte med den.

3. Bestäm webbplatsens delar. Samla ihop ett gäng människor och spåna om alla tänkbara saker du kan göra med webbplatsen. Ta in alla idéer. Sedan börjar slakten.

Du kan använda en metod som kallas Moscow. Det är en lista på saker du vill ha, fast prioriterad.

  1. Must have (M). Det som måste finnas på din webbplats för att fungera.
  2. Should have (S). Det som borde finnas på din webbplats.
  3. Could have (Co). Det som kan finnas på din webbplats, men som inte är nödvändigt.
  4. Won’t have (W). Det som inte ska finnas på din webbplats.

Det är lätt hänt att alla saker hamnar på Must have eller Should have. Men var hård mot dig själv och välj endast det som verkligen är nödvändigt. Tanken är ju att du ska prioritera.

4. Skapa en struktur. När du har en färdig lista på vad som måste finnas på webbplatsen är det dags att skissa på en struktur. Det är faktiskt svårare än man kan tro, och det är här du bestämmer hela upplägget för din webbplats. Lägg mycket energi på detta!

Struktur med boxar

Några vanliga misstag vid strukturering är:

  • Bunta ihop samma typ av filer. Om du surfar in på en webbplats är du troligtvis inte intresserad av att gå till en avdelning som heter ”pdf-filer”. Men besökare är inte intresserade av filtyper, utan av ett ämne. En avdelning om musik kan innehålla alla möjliga typer av filer (ljud, video, pdf, flash och så vidare).
  • Spegla den egna organisationen. En meny med länkar som ”Policy”, ”Försäljning”, ”Marknad”, ”Kunder” och så vidare. Det är anpassat efter företagets interna organisation och det gör ingen besökare någon nytta. Lägg upp det efter besökarens behov i stället. Vad ska besökaren göra när denne kommer till webbplatsen?

Ta alla delar du bestämt dig för att använda på webbplatsen (Must have). Lägg dessa i olika högar och försök sedan sätta ett namn på varje hög. Namnet bildar sedan avdelningens namn, till exempel ”Sport, ”Nöje”, ”Inrikes” och ”Utrikes” för en dagstidnings webbplats.

5. Hur hänger allt ihop? Din struktur börjar ta form. Då är i alla fall en del av strukturarbetet gjort. För det kommer mer. Allt måste även hänga ihop, och på olika sätt. Vi människor fungerar ju på olika sätt, och då är det alltid bra med flera ingångar till samma material. Det kallas att man korslänkar och det är faktiskt rätt mycket arbete. Men det är mödan värt.