Informationsarkitektur

Välj vad som ska byggas

Du har nu ett företag och en persona. Nästa fråga är: vilka sidor behöver webbplatsen?

Det är lätt att lista tio sidor som vore trevliga att ha. Det som är svårt är att välja bort. En webbplats med tre genomarbetade sidor slår alltid en webbplats med sju halvfärdiga. Att projektet kryper utanför sin ursprungliga plan kallas scope creep och det är ett av de vanligaste skälen till att projekt aldrig blir klara.

Sitemapen: välj dina sidor

En sitemap är en översikt över webbplatsen, vilka sidor som finns och hur de hänger ihop. Den ritas som ett träd.

Ta cykelverkstaden från förra delen. En första önskelista kanske innehåller sex sidor: startsida, priser, om verkstaden, blogg, galleri och kontakt. Sedan prövar vi listan mot Majas tre användarberättelser, och då händer något:

• “…se om de reparerar punkteringar samma dag…” pekar på startsidan. Svaret ska stå där direkt.
• “…se priser utan att behöva ringa…” pekar på Priser & tjänster.
• “…klicka på telefonnumret direkt…” pekar på Kontakt & öppettider.

Ingen berättelse pekar på bloggen, galleriet eller om-sidan. Alltså ryker de, hur trevliga de än vore att ha. Kvar står ett träd som går att bygga klart:

Startsida
├── Priser & tjänster
└── Kontakt & öppettider

Tre till fyra sidor är rätt skala för det här projektet. Fler är scope creep, du hinner inte göra dem bra. Regeln är enkel: varje sida ska vara motiverad av en användarberättelse. Om ingen berättelse pekar på sidan, ta bort sidan.

Wireframes: layout före design

Nästa steg är att skissa sidorna. En wireframe är en skiss av en sidas layout, och lo-fi (low fidelity, låg detaljnivå) betyder att skissen är medvetet grov: lådor med namn som visar var saker ska vara, inte hur de ser ut. Motsatsen kallas hi-fi (high fidelity), en detaljerad skiss med färger, typsnitt och riktiga bilder som ser ut nästan som den färdiga sidan. I planeringen är lo-fi rätt nivå, för nu är det bara layoutbesluten som räknas.

Du känner igen metoden från Webbens mönster i Tema 1, där du skissade en känd webbplats på papperslappar: liggande papper för desktop (16:9), stående för mobil (9:16). Det är exakt samma teknik. Att skissa innan man bygger är en vana som följer med genom hela yrket, proffsen släpper den aldrig.

Så här kan cykelverkstadens startsida se ut som lo-fi wireframe i desktop-vy:

+--------------------------------------+
|  LOGO                         MENY   |
+--------------------------------------+
|                                      |
|   HERO: Punktering? Lagad i dag.     |
|            [ Boka tid ]              |
|                                      |
+--------------------------------------+
|  ÖPPETTIDER      |  PRISER, utdrag   |
+--------------------------------------+
|  FOOTER: adress, telefon             |
+--------------------------------------+

Varje låda har ett namn, ingenting mer. Bredvid sektionerna noterar vi vilken användarberättelse de svarar mot: heron och knappen finns där för pendlaren som vill få cykeln lagad samma dag, telefonnumret i sidfoten för mobilbesökaren som vill ringa direkt. En sektion som inte svarar mot någon berättelse får samma fråga som sidorna i sitemapen: behövs den?

Sektionerna en företagssida byggs av

Där tar det ofta stopp. Du vet att sidan ska ha en hero, och sedan sitter du med ett tomt papper. Det är inte layouten som är svår, det är att du inte har orden.

Företagssidor världen över återanvänder samma handfull sektioner. Att kunna deras namn är inte fusk, det är yrkesspråk: det är så en utvecklare och en kund pratar om en sida innan den finns. Här är de vanligaste, och vad de faktiskt är till för.

Katalogen är en meny, inte en checklista. En sektion kommer med i skissen av exakt samma skäl som en sida kommer med i sitemapen: någon användarberättelse pekar på den. Har du ingen berättelse som pekar på Social proof, så bygger du ingen Social proof.

Två skisser, samma verkstad

Här är cykelverkstadens startsida i två versioner. Båda är lo-fi, båda ser ut som riktiga företagssidor.

Skiss A

+--------------------------------------+
|  LOGO                         MENY   |
+--------------------------------------+
|  HERO: Punktering? Lagad i dag.      |
|            [ Boka tid ]              |
+--------------------------------------+
|  ÖPPETTIDER      |  PRISER, utdrag   |
+--------------------------------------+
|  FOOTER: adress, telefon             |
+--------------------------------------+

Skiss B

+--------------------------------------+
|  LOGO                         MENY   |
+--------------------------------------+
|                                      |
|   HERO: stor bild på en cykel        |
|         "Vi älskar cyklar"           |
|                                      |
+--------------------------------------+
|  VÅR HISTORIA SEDAN 1994             |
+--------------------------------------+
|  OMDÖMEN   |  OMDÖMEN   |  OMDÖMEN   |
+--------------------------------------+
|  GALLERI: bilder från verkstaden     |
+--------------------------------------+
|  FOOTER: adress, telefon             |
+--------------------------------------+

Maja är pendlaren från förra delen. Hon vill veta om punkteringen lagas i dag, se priser utan att ringa, och kunna trycka på telefonnumret direkt. Vilken skiss bygger du åt henne, och varför?

Commits som kommunikation

Du committar genom hela projektet, och meddelandena du skriver är din processdokumentation. Formatet typ: vad du gjorde från Publicera på webben gäller här, och milstolpen kräver det.

Pröva själv: sitemapen baklänges

Informationsarkitektur går att läsa av utifrån. Välj en webbplats du använder ofta och titta bara på huvudmenyn.

1. Rita webbplatsens sitemap som ett träd på papper, med menyn som karta.
2. Fundera över valen. Vilka sidor har fått plats i menyn, och vad tror du har valts bort?
3. Kolla facit. Skriv /sitemap.xml direkt efter domännamnet, till exempel svt.se/sitemap.xml. Många webbplatser publicerar hela sin sidstruktur där, som en fil sökmotorer läser för att hitta alla sidor. Alla webbplatser har den inte, så prova ett par. Sitemapen du ritar på papper är alltså inte bara en skiss, den finns på riktigt i produktion.