12. Datadriven utveckling av webben stockholm.se

Stockholms stads logotypDesignstrategen Johannes Söderlund berättar hur de på stockholm.se arbetat utifrån data om hur webben används samt med användartester. En erfarenhet är bland annat att besökare på webben navigerar antingen djupt i strukturen eller ytligt beroende på hur synliga menyerna är.

Datadriven utveckling

En viktig och konceptuell del på stockholm.se som under flera år har utvecklats ur bland annat det datadrivna perspektivet är principen för de navigationsidor som ligger under varje ämnesrubrik i toppnavigeringen.

Anledningen till att vi först började studera och fundera över användartrafiken var utifrån ett användartest som genomfördes med en grupp pensionärer för att se hur pass lättnavigerad informationen om äldreomsorg var.

En förvirring hos användarna som deltog i testet uppstod när olika typer av omsorgsinsatser fanns blandat i samma sidnavigation. De fick det svårt när navigationsnivåerna blev för djupa och bytte därför lätt omsorgsform av misstag och fick då fel information.

När vi tittade på besökarbeteendena statistiskt sett så såg vi att det verkade överensstämma även med användarflödena där många rörde sig mellan olika typer av omsorgsinsatser. Sannolikt också på grund av att liknande begrepp användes inom flera områden.

Detta beteende verkade finnas även på andra delar av webbplatsen. Bland annat upplevde föräldrar en osäkerhet kring ingångssidan för förskola och då information om väldigt många skolformer blandades.

Skärmdump från stockholms.se. Menyerna innehåller 12 val av typen skolform men även "trygghet och säkerhet" och "utbildningsförvaltningen"

Förskola & Skola på stockholm.se. Många menyalternativ till exempel Förskola, Förskoleklass, Skolbarnomsorg – fritidshem och fritidsklubb, Grundskola, Gymnasium, Vuxenutbildning,

 

Ny strategi 2011/2012: ämnesöar

2011/2012 ledde detta till att vi då delade upp de olika områdena till olika så kallade ”ämnesöar” istället för att ha dem klustrade i en och samma sidmeny.

Då fick varje område istället en egen ingång och sidmeny som även innehöll e-tjänstlänkar. Detta för att hålla samman relevant material som rörde den specifika frågan istället för att blanda dem med andra frågor.

Detta gjorde att det blev lättare att följa besöksstatistiken och att vidare trimma innehållet. Det visade också snart på beteendet att användare mest rör sig mellan information och tjänster inom en och samma ”ämnesö”.

Vidare så gjordes en del andra designval på den övergripande navigationssidan. Till exempel så fick varje ingång också en egen bild för att tydligare illustrera ämnet och en lista med snabblänkar till det innehåll som besöksmässigt sett såg ut att vara populärast.

 

Sidan "Förskola & Skola" efter indelningen i "ämnesöar". Varje ämne presenteras som en rubrik med tillhörande bild och med några länkar under

Sidan Förskola & skola efter indelningen i ämnesöar

Principen för navigationssidorna var dock något som vi började ifrågasätta och studera igen i början av året. Dels för att vi statistiskt sett såg att de ämnesöar som låg längre ned på navigationssidorna fick sämre klick men också för att en stor del av snabblänkarna knappt användes.

Detta kombinerades med kunskap från ett användartest där det visat sig att tiden det tog för användarna att först överblicka navigationssidorna och sedan klicka sig vidare tog längre tid än vad som borde vara nödvändigt.

Nuvarande design – ämnesöar med få länkar och pictogram snarare än bilder

Detta ledde till det senaste designbeslutet att ta bort bilderna och ersätta dem med mindre pictogram som ett visuellt navigationsstöd. Detta för att minska den vertikala ytan på sidan.

Även de ämnesspecifika snabblänkarna togs bort, men eftersom några av dessa var välanvända så togs beslutet att visa ett begränsat men prioriterat antal samlade snabblänkar i början av sidan istället.

Skärmdump av avsnittet Förskola & skola på stockholm.se. Ämnesöarna är som textrutor med en rubrik och en kort beskrivande text samt en ikon som ska symbolisera ämnesön. Ämnesöarna är "Hitta snabbt" (som har några länkar under sig), "Förskola och pedagogisk omsorg", "Grundskola och särskola", "Förskoleklass", "Gymnasieskola och gymnasiesärskola", "Svenska för invandrare", "vuxenutbildning", "Fritidshem & fritidsklubb" och "Kulturskolan".

Ingångssidan för Förskola & Skola efter att bilderna för ämnesöarna ersatts med ikoner och snabblänkarna tagits bort

Slutsats

Utifrån erfarenheterna tänker designteamet ungefär så här: Att låta användningsdata styra designvalen känns både rätt och fel. Egentligen vill vi inte ta fram lösningar som är helt baserade på vad data säger eftersom det kan vara svårt att veta vad bakgrunden till datat och beteendena då egentligen betyder. Däremot så är det viktigt att använda data som en pusselbit och kombinera detta med kringliggande kunskap för att det ska bli riktigt bra.

Till exempel: Frågar vi användarna vad de vill ha så är det inte säkert att de vet det, men kombinerar vi önskemål med besöksdata kring beteenden i typer av tillämpningar och sedan verifierar med användartester så kan det bli riktigt bra.

 

Senast uppdaterad: 17 november, 2015

Ingen har kommenterat ännu