I juni började vi arbetet med att lägga till ett nytt ramverk på uppsala.se. Ramverket heter Bootstrap och är ett välkänt ramverk bland webbutvecklare.

Ett ramverk sparar tid när man bygger en ny webbplats och när man bygger vidare på en befintlig. I ett ramverk finns det förutbestämda regler för hur innehållet ska placeras, hur mycket luft det ska vara mellan kolumner och hur innehållet ska visas för en besökare som har en liten eller stor skärm.

Tidigare har vi arbetat med ett egenutvecklat ramverk som togs fram till arbetet med nya uppsala.se 2012/2013. Anledningen till att vi har ersatt det med Bootstrap beror främst på att vi är ett för litet team för att jobba med ett eget ramverk. Vi lägger vår tid på att bygga nytt och förvalta tidigare byggda sidtyper, e-tjänster och system, istället för att gå vidare med det egenutvecklade ramverket.

Men varför startade vi arbetet med att lägga till ett nytt ramverk i juni, när semesterperioden startar? Svaret är att det är det bästa tillfället att utföra denna typ av ändring. Ett nytt ramverk innebär förändringar i hela webbplatsens struktur och det är nästintill omöjligt att göra sådana ändringar när det är full produktion med annat.

Uppdaterad form

När vi la till ett nytt ramverk fick vi möjlighet att göra uppsala.se bredare och detta visas för de som besöker vår webbplats via en dator med en normalstor eller stor skärm.

Rent visuellt har vi ändrat utseendet på startsidan för att lyfta de olika ingångarna (Boende och trafik, Stöd och omsorg etcetera) ytterligare.

På sidor med mycket innehåll har vi lagt till en vit bakgrundsplatta som vi kallar för arket. Det är en ganska vanlig lösning man kan ta till för att göra det lättare för besökaren att läsa.

Ny sidtyp, kampanjsida

Uppsala kommuns webbplats, uppsala.se, innehåller en stor mängd information och innehållet varierar från att visa upp dokument kopplade till kommunfullmäktiges möten (kallelse, ärenden, protokoll) till hur man går tillväga för att söka bygglov. Vi utgår från våra användares behov och skapar innehåll och tjänster som är efterfrågade och till nytta för många.

När vi har tagit fram en ny mall för kampanjsidan har vi lyssnat in vår egen organisations behov av att kommunicera innehåll som inte är kopplat till ett specifikt behov hos en användare. Det kan handla om att uppmuntra medborgare till att vara en smart trafikant eller att få fler att cykla till jobbet. Denna typ av innehåll har vi tidigare försökt att lyfta på flera olika sätt genom att använda sidtyper som egentligen är skapade för andra typer av innehåll.

På vår nya kampanjsida kan vi använda en stor bild (foto eller illustration) som bakgrund. De personer som har sett kampanjen i en annons, på sociala medier eller i annan kanal kan då lätt känna igen sig.

Redaktören kan nu lägga till knappar för att lyfta fram viktiga funktioner/viktigt innehåll, till exempel anmäla sig eller fylla i en enkät. Det går nu också att dölja innehåll i in- och utfällbara paneler för att sidorna inte ska bli så höga/långa.

I dagarna har vi lanserat sidor om Uppsala kommuns Mål och budget på uppsala.se. Mål och budget är kommunens främsta styrdokument och har funnits för allmän beskådan och läsning sedan många år tillbaka. Där finns beskrivet vad kommunen ska sträva mot på en ganska konkret nivå, och där finns även årets budget inlagd.

Komplicerat arbete och svårt att få insyn

Det är många som är inblandade i arbetet med Mål och budget. Både tjänstepersoner och politiker deltar i många sittningar och förhandlingar innan allt är spikat. Trots att det här är ett otroligt viktigt arbete är det rätt svårt för den oinvigde att förstå vad som egentligen sker.

Enkla frågor som “hur stor är kommunens budget?” eller “hur jobbar man för att öka jämställdheten i kommunen?” har varit riktigt kluriga att få svar på, man måste vara ganska ihärdig för att hitta rätt bland långa texter och bilagor i dokumentet Mål och budget.

Vi har jobbat för att det ska bli lättare att förstå hur allt hänger ihop

Vi har försökt berätta om det här nu på uppsala.se. Ambitionen är att göra det enkelt att förstå hur den kommunala demokratin går till och vad din röst i kommunalvalet egentligen ger för resultat.

Rent konkret har vi skapat tre nya delar på sajten:

En tidslinje visar steg för steg hur arbetet med att fastställa årets mål och budget går till.

Vi beskriver och visar status för inriktningsmålen – den politiska majoritetens vision för Uppsala kommun – och vad kommunen konkret ska göra för att komma dit. Här visar vi även hur det går med arbetet, tre gånger om året kan du ta del av en färsk statusrapport!

Löpande redovisning av budgeten – här visar vi månad för månad hur verksamheterna och nämnderna klarar eller inte klarar att hålla sin budget. Du kan även jämföra fördelningen av budgeten över tid och se hur den förtroendevalda majoriteten väljer att lägga resurserna.

Hjälp oss med inspel och synpunkter!

Vi är väldigt intresserade av att höra vad ni tycker om de här sidorna och har därför skapat en liten enkät som finns längst ner på varje sida. Det här är ett ganska svårt ämne och det kan hända att vi inte har lyckats förklara det så tydligt som det går. Kanske saknas något? Skicka gärna in din feedback, enkäten består av tio frågor och tar ca fem minuter att fylla i.

Tyck till om tidslinjen

Tyck till om inriktningsmålen

Tyck till om budgetsidan

Trevlig sommar önskar utvecklingsteamet!

Under våren fick vi i uppdrag att lansera ett nytt sätt för Uppsalaborna att felanmäla sådant som kommunen ansvarar för i utemiljön. Det nya sättet innefattar en webbtjänst och en app, med syfte att få in fler och bättre felrapporter från allmänheten. Webbtjänsten och appen hade en färdig lösning från företaget Infracontrol med över 300 felanmälankategorier och ett kartverktyg för att markera var felet fanns. Vi såg flera tekniska och innehållsmässiga förbättringsmöjligheter med tjänsten och kom överens med verksamheten om att få tid för att användningstesta och behovsanpassa tjänsten innan lansering. Bland annat såg vi att webbtjänsten som den var paketerad varken var responsiv eller tillgänglighetsanpassad.

Första användningstestet gjorde vi i början av juni. Hypotesen var att minska antalet kategorier och anpassa språket efter användarna för att öka användbarheten. Efter användningstestet fick verksamheten förslag på en ny struktur med klarspråk, färre kategorier och max tre nivåer. Läs om det första användningstestet av kategorierna

Parallellt med förbättringen av kategorierna började vi skissa på hur webbtjänsten skulle se ut och fungera. Vi gjorde en fältstudie hos verksamheten för att förstå hur fel kommer in och hur de hanteras internt. Samtidigt kikade vi på andra kommuners och organisationers lösningar. Efter en del skissande och omskissande hade vi ett användargränssnitt som kändes bra, och när det var implementerat och testbart gjorde vi fler användningstester med folk på stan för att säkerställa kvaliteten. Som alltid vid användningstester hittade vi ett par saker vi behövde förbättra ytterligare för att webbtjänsten skulle vara enkelt att använda. Vi gjorde några designjusteringar som utvecklingsteamet implementerade innan webbtjänsten lanserades.

Färsk statistik från verksamheten visar att 48% av alla fel som nu rapporteras kommer in via appen och webbtjänsten (26% från appen och 22% från webbtjänsten), något de är nöjda med.

När webbformuläret var färdigt såg vi över alla tidigare formulär som gick till olika typer av felanmälan. Det ledde till att vi slog ihop tre ingångar och skapade en gemensam ingång som heter Felanmäl trafik- och utemiljö.

Fortfarande finns egna sidor för den som vill anmäla till exempel felparkering eller matförgiftning, men det långsiktiga målet är att användarna ska kunna göra alla sorters felanmälningar på ett ställe.

Uppsala.se har precis fått ny funktionalitet. Den här gången rör det sig om en evenemangskalender med aktiviteter för asylsökande och nyanlända Uppsalabor.

Syftet med kalendern är att presentera föreningslivets arrangemang och initiativ på en gemensam plats – så att de blir enkla att hitta. I Uppsala kommun finns nämligen många föreningar och organisationer som ordnar aktiviteter för nyanlända i olika åldrar, men hittills har det inte funnits någon samlingsyta för dem.

Nu kan arrangörer själva registrera aktiviteter i ett formulär och få dem presenterade på uppsala.se. Det kan till exempel röra sig om språkcaféer, träffpunkter och andra former av mötesplatser.

Tanken är att det i första hand är gode män, familjehem och personal på asylboenden eller HVB-hem som ska använda kalendern. Därför finns kalendariet idag bara på svenska.

Rapport från ett användningstest

Inför lanseringen av kalendariet besökte vi ett asylboende för att testa hur innehåll och interaktionsdesign fungerade för användarna. Två anställda fick var för sig utföra tre uppgifter:

1. Hitta ett sportevenemang som infaller någon gång i juni.
2. Ta reda på vad det kostar att gå på ett evenemang och hur du tar dig dit.
3. Ta reda på vilka fritidsgårdar som har öppet under sommaren.

Vi bad deltagarna att tänka högt när de utförde uppgifterna och efter testet fick de ge allmän feedback på kalendariet, samtidigt som vi kunde ställa frågor. Under besöket fick vi också träffa en av ungdomarna på boendet och lära oss mer om vad de tycker om att göra på fritiden.

Resultat och insikter

Det visade sig att deltagarna klarade samtliga tre uppgifter, samt att sökfunktionen och navigeringen i kalendariet fungerar bra. Deltagarna hade dock vissa svårigheter att hitta till kalendern från startsidan. Till en början noterade de inte heller att sökresultatet i kalendern laddades automatiskt eftersom sökresultaten låg för långt ned på 13”-skärmen.

Efter testet har vi minskat mängden text på kalendersidan så att sökresultaten hamnar högre upp samt lagt till en laddningseffekt när användaren söker eller filtrerar på sidan. Genom att flytta upp och lägga till ett par länkar på de sidor som leder fram till kalendariet har vi även förbättrat för dem som navigerar från startsidan.

Utöver de konkreta åtgärderna så fick vi även med oss ett par insikter att jobba vidare med. Till exempel fick vi veta att sportaktiviteter är populära, samt att pris och bussförbindelser är viktiga. Det här är givetvis något som vi tar med oss i det fortsatta arbetet med hur vi presenterar och lyfter fram aktiviteterna.

Kommunen har upphandlat ett nytt system för felanmälan som ska lanseras i höst. Tanken är att fler kategorier ska underlätta handläggning och att ett ärende snabbare ska nå fram till rätt handläggare.

Så långt allt väl. Men hur synkar detta med användarupplevelsen då? Jodå, systemet förbättrar också användarupplevelsen, främst i och med en ny kartfunktion.

För att ta reda på om de fördefinierade kategorierna fungerar att navigera sig igenom bad vi 14 testpersoner att felanmäla sju olika ärenden i det nya systemet. Under testet antecknade vi vilka kategorier testpersonerna valde. Vi passade också på att testa ett för oss nytt skärminspelningsprogram (Expression encoder).

För att undvika att påverka testpersonerna med ledord visade vi upp scenariobilder istället för att ställa frågor. Vi bad testpersonerna att resonera högt medan de genomförde uppgifterna och vi tog tid hur lång tid det tog att felanmäla varje ärende. Målet var att användarna skulle hitta rätt inom 30 sekunder.

Under testet upptäckte vi bland annat följande:

• För många olika kategorival gör det svårt för testpersonerna att hitta rätt. Snabbast gick det i de fall där det fanns maximalt sex olika alternativ att välja mellan.
• Specifika huvudkategorier som “idrott” och “friluft” är svåra att förstå. Många tycker att de snarare passar in under andra kategorier, som exempelvis “park, skog och natur”.
• Branschspecifika termer försvårar. Flera testpersoner kände inte igen ord som “sandsopning” och “potthål”.

Utifrån testresultaten har vi tagit fram förslag på en ny struktur med färre kategorier. Vi har kortat och förenklat flera val och slagit ihop närliggande kategorier. Fokus i det nya förslaget ligger på att berätta vad som är fel, inte var felet är – det hjälper ju den nya kartfunktionen till med.

Verksamheten har tagit till sig mycket av de ändringar och förslag vi presenterade, bland annat har huvudingångar som ”idrott” och ”friluft” försvunnit och placerats under andra huvudingångar. Många branschspecifika ord såsom ”snöröjning”, ”sandsopning” och ”potthål” har exempelvis ändrats ”Snö och is”, ”grus”, ”gupp” och ”hål”.

Målet är att testa det justerade förslaget i augusti för att se om förändringarna hjälper testpersonerna att felanmäla snabbare. Därefter släpper vi på den nya felanmälantjänsten på uppsala.se.

Uppsala.se har nyligen fått en helt ny grund att stå på i form av ett rutnät. Den tekniska termen är ”fluid grids” och lite förenklat kan det jämföras med att vi nu har en bas att bygga vår responsiva webbdesign på. Som en stadig byggplatta att sätta ihop sitt legohus på. Ett litet lyft för den enskilda sidan men ett stort lyft för hela webbplatsen.

Med detta rutnät blir det mycket enklare att strukturera och presentera data. Det hjälper oss att bygga en webbplats som är responsiv och välstrukturerad.  För användarna märks detta genom att de känner igen sig – designen är konsekvent och kolumnerna är lika breda. För oss som förvaltar och vidareutvecklar blir det enklare att bygga sidor och placera innehåll där det hör hemma.

Webbplatsen blir helt enkelt bättre, både för användarna och för oss webbutvecklare!

Snabbare och mer konsekvent uppbyggd

Så varför beslöt vi att bygga om grunden för webbplatsens design? Jo, därför att det finns stora vinster att göra! För det första får användaren en robust sida som fungerar bra på alla sorters enheter, från den minsta av mobiler till den största av skärmar.

För det andra går det snabbare att ladda sidan eftersom mängden kod har minskat väsentligt. För den tekniskt insatta minskade i många fall den lokala CSS-koden med över 50 procent!

Men den stora vinsten ligger i att jobba med utveckling och förvaltning av webbplatsen. Vi får en bra grund att förhålla oss till när vi tar fram nya, tillgängliga sidmallar samtidigt som det går smidigt att implementera dessa. Kort sagt kan man säga att vi har gått från att behöva designa var sida var för sig till att luta oss tillbaka på rutnätet.

Så fungerar rutnätet

Själva rutnätet är uppbyggt av olika rader och kolumner. För varje rad anger man hur stor del av den totala bredden man vill att varje kolumn ska ta upp. Ett vanligt exempel från uppsala.se är att det ser ut såhär: I mobilen – fullbredd, i läsplattan – 2 kolumner á 50 procent och i datorn – 3 kolumner á 33 procent. Ett bra exempel på hur kolumnerna förhåller sig till varandra finns på gov.uk.

Utvecklingen fortsätter

Utvecklingen av uppsala.se fortsätter att gå framåt! I detta fall främst bakom kulisserna, men slutprodukten blir sakta men säkert bättre. Nu har vi en kraftfullare grund och kan fortsätta att utveckla vår responsiva webb så den kan uppfylla sitt syfte ännu bättre!

Nu var det ett tag sedan vi bloggade, men det betyder inte att det inte hänt bra saker på sajten! Till exempel har vi förbättrat designen på innehållsförteckningen i sidtypen guide (se till exempel Fjällnora friluftsområde), skapat nya sidtyper som idag används för sidorna om utegym och gjort förbättringar av sökmotorn som bland annat gett oss möjlighet att jobba på ett bättre sätt med best bets och utvalda träffar.

Har du förresten sett att uppsala.se finns med på Internetworlds årliga topp 100-lista över Sveriges bästa sajter? Vi var nominerade i kategorin kommuner tillsammans med Stockholm, Haninge, Lekeberg och Norrtälje. Stort grattis till Haninge som knep utmärkelsen årets bästa kommunsajt 2016!
Läs mer om topp 100-listan på Internetworlds webbplats.

Enligt Internetworld finns det en tydlig trend bland sajterna på årets topp 100-lista: fler och fler skalar av och gör minimalistiska webbupplevelser, där innehåll och funktion får ta plats snarare än ball design och flashiga lösningar. Det gäller i allra högsta grad även för uppsala.se. Att sajten fungerar bra ser vi också i våra egna användningstester. När vi jämförde uppsala.se med den vår tidigare sajt, vann den nya med hästlängder.
Läs resultat från användningstestet.