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?

Commits som kommunikation

När du jobbar med projektet committar du kod till GitHub. Det har du gjort sedan Tema 2. Det som förändras nu är vad du skriver i commit-meddelandet.

Din commit-historik är din processdokumentation. Läraren ser den. Du ser den om två veckor när du undrar vad du höll på med.

Jämför:

Formatet är enkelt: typ: vad du gjorde. Fyra prefix räcker:

• feat: ny funktionalitet eller sektion
• fix: något trasigt som nu fungerar
• style: visuella justeringar utan ny funktionalitet
• docs: README, kommentarer, dokumentation

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.