Sitemap

Grundidén

En sitemap — webbplatskarta — är ett träd över alla sidor i en webbplats eller app. Startsidan överst, sektionerna under, och sidorna i varje sektion under dem. Den svarar på två frågor: vilka sidor behövs? och hur hittar man dit?

Inte samma sak som sitemap.xml. Ordet används också om en XML-fil som ligger på en färdig webbplats och listar alla adresser åt Google och andra sökmotorer. Den genereras oftast automatiskt. Den här sidan handlar om planeringsverktyget — bilden teamet ritar innan sidorna finns.

Vad används det till?

• Planera omfånget — hur många sidor handlar det om? Det påverkar hela tidsplanen
• Bestämma navigeringen — det som ligger på nivå 1 blir oftast huvudmenyn
• Dela upp arbetet i teamet — en sektion per person eller par
• Skilja på MVP och senare — vilka sidor måste finnas i första leveransen? (se User story och MVP)
• Se var inloggning behövs — det styr både design och säkerhet

Delarna och vad de heter

En sitemap visar struktur, inte flöde. Pilar som visar “först gör man det här, sen det här” hör hemma i en kundresa eller en processkarta.

Exempel — bokningsappens webbplats

Teamet som bygger bokningsappen för grupprum ritar sin sitemap i sprint 0. De markerar direkt vilka sidor som ingår i MVP:n, så att det syns att resten kan vänta.

Vad teamet lärde sig av att rita den:

• MVP:n är nio sidor av nitton. Det går att leverera på två sprintar — resten blir egna backlog-poster.
• Varje MVP-sida motsvarar en user story. Rumslista ↔ “Som student vill jag se vilka rum som finns”, Avboka ↔ “Som student vill jag kunna avboka så att rummet blir ledigt för andra”. Saknas en story för en sida — behövs sidan verkligen? Saknas en sida för en story — då har ni glömt något.
• Integritetspolicyn är med i MVP:n. Appen sparar namn och bokningar, alltså personuppgifter. Då måste användarna kunna läsa hur uppgifterna hanteras redan från första dagen.
• “Logga in” ligger utanför trädet men länkas från startsidan, eftersom alla låsta sidor skickar dit.

När ska du välja en sitemap?

Vanliga misstag

• För djupt träd. Mer än tre nivåer betyder att användaren måste klicka sig djupt för att hitta saker. Platta ut.
• Sitemap som flödesschema. Pilar mellan syskon (“sen går man till…”) hör inte hemma här.
• Glömma de tråkiga sidorna. Felsidor, integritetspolicy, “glömt lösenord”, tom-lägen (“du har inga bokningar”). De tar också tid att bygga.
• Rita teamets organisation istället för användarens behov. “Säljavdelningen” är ingen bra sektion; “Priser” är det.
• Rita en gång och glömma. Uppdatera kartan när en sida läggs till eller stryks — annars ljuger den om omfånget.

Mall att kopiera

En indenterad lista är en sitemap i textform — snabbt att skriva och lätt att ändra i ett PR.

Startsida
├── Sektion 1                     [MVP]
│   ├── Sida 1.1                  [MVP]  story: #
│   └── Sida 1.2                  [senare]
├── Sektion 2                     [MVP] [inloggning]
│   ├── Sida 2.1                  [MVP]  story: #
│   └── Sida 2.2                  [senare]
└── Sektion 3                     [senare]
Globalt (sidfot): Integritetspolicy [MVP], Tillgänglighet, Kontakt
Utanför trädet: Logga in, Felsida (404)

Övning

Rita en sitemap för er skolas webbplats som den ser ut idag. Hur många nivåer har den? Finns det sidor ni aldrig hittar? Rita sedan om den som ni tycker att den borde se ut för en ny student — och markera vilka fem sidor som skulle vara MVP:n.

TL;DR