Det digitala ekosystemet The Capital of Scandinavia

Innehåll Vad är det digitala ekosystemet Målsättning Vad påverkar upplevelsen? Exempel på användarresa: Boka träningspass Förbättringspunkter Framtida utveckling

Vad är det digitala ekosystemet? En översiktsbild

Ett urval av digitala tjänster i ekosystemet Externa digitala kanaler Google Facebook Twitter Instagram Insyn Sverige Verksamhetswebbar Stadsarkivet Stadmuseet Medeltidsmuseet Kampanjsajter Kul1415 stockholm.se Temasajter Stockholm växer Opendata Stockholm Appar Upptäck Stockholm Felanmälan Anmäl frånvaro Pedagogik-tjänster Skolwebbarna Skolverktyg Stockholmskällan Pedagog Stockholm Plattform Fristående Stockholms stadsbibliotek Eriksdalsbadet Jämförelsetjänster Hitta Hitta och jämför service Inloggning Personnummer Lösenord Certifikat Bank-ID E-tjänster Mini Ansöka & anmäla Omfattande Buller Radon Ansöka till förskola Boka träningspass Kulturskolan Prenumerations- och kontakttjänster RSS E-post Stadens digitala ekosystem består av väldigt många tjänster som samverkar på olika sätt. Detta är endast ett urval av olika typer av tjänster som finns med exempel.

Målsättning

Målsättning Att olika delar i det digitala ekosystemet samverkar för att skapa en bra och sammanhållen upplevelse.

Varje tjänst är en del av en större helhet En användarresa innefattar vanligtvis flera olika digitala tjänster i ekosystemet. www www Jämförelse-tjänst E-tjänst Annan webbplats Stockholm.se Inloggning

Varför förbättra helhetsupplevelsen? För en användare förväntas alla Stockholms stads digitala tjänster uppträda som en helhet. Därför är det viktigt att hålla ihop och förbättra upplevelsen genom hela Stockholms stads digitala ekosystem. Jämförelse- tjänster Användarupplevelsen påverkas av hur hela resan upplevs, är det något som inte funkar bra så påverkar det helhetsintrycket. Därför är det viktigt att helhetsupplevelsen och inte varje digital tjänst för sig fungerar bra. Som ansvarig/leverantör av en digital tjänst i användarresan kan det vara svårt att ändra i övriga digitala tjänsterna i samma användarresa, men då är det viktigt att vi ändå tar hänsyn och tänker på hur de olika tjänsterna kan påverka min tjänst och hur min tjänst påverkar andra tjänster. Sträva efter att skapa möjlighet att samarbeta för att få helheten att fungera så bra som möjligt. Inloggnings- tjänster E-tjänster stockholm.se Andra webb- platser

Vad påverkar upplevelsen? Grafiskt uttryck Exempelvis följer stadens varumärkesmanual, konsekvent, tydlig avsändare Prestanda Påverkas av exempelvis upptider, laddningstider och antal klick Plattformsoberoende Att det fungerar bra oavsett webbläsare, skärmstorlek och enhet för de som har behov av våra tjänster Det finns många faktorer som påverkar helhetsupplevelsen. I denna presentation har vi lyft fram 5 områden och tagit fram tips på vad du kan göra och tänka på för varje område i strävan mot att ge användarna en bättre upplevelse. De 5 områden vi har lyft upp är prestanda, grafisk uttryck, tillgänglighet, begriplighet, plattformsoberoende. Begriplighet Exempelvis förstå hur jag hittar det jag söker, förstår hur jag ska göra, språket är begripligt. Detta ska alltid utgå ifrån användarens perspektiv. ?! Tillgänglighet Innefattar exempelvis fungerande tangentbordsnavigering, logisk uppbyggnad, anpassad för extern skärmläsare, rätt kontrastvärden

Scenario: Boka träningspass Hitta vart jag bokar Snabb laddningstid. Med tider under 2 sekunder. Responsiv. Bra upplevelse på de vanligaste skärmstorlekar, enheter och webbläsare. Bra stöd för tangentbordsnavigering. Följer stadens grafiska profil. Inte alltid lätt att förstå hur jag hittar det jag söker. Länk till boka träningspass är lite dold. Kan lyftas mer. Eriksdalsbadet på stockholm.se

Scenario: Boka träningspass Hitta träningspass Långa laddningstider. Kan vara mer än 4 sekunder som skapar osäkerhet. Har jag tappat internetuppkoppling? Har systemet hängt sig? Har en dator- och mobilversion. Inget bra stöd för tangentbordsnavigering. Följer stadens grafiska profil. Hög tröskel att förstå hur jag använder tjänsten. Exempelvis har även vana användare svårt att förstå hur filtreringsverktyget fungerar. E-tjänst Aktivitetsbokningen

Scenario: Boka träningspass Logga in Snabb laddningstid för sidan. Mindre än 1 sekund, men svarstid varierar mycket beroende på vilken typ av inloggningstjänst man väljer. Endast anpassad för dator. Flera använder och vill använda tjänsten i mobilen. Bra stöd för tangentbordsnavigering på sidan. Följer stadens grafiska profil. Inloggningsalternativen är otydliga. Flera användare missar att det finns fler sätt att logga in än med e-post och lösenord. Inloggning på Aktivitetsbokningen

Scenario: Boka träningspass Genomföra bokning Långa laddningstider. Kan vara mer än 4 sekunder som skapar osäkerhet. Har en dator- och mobilversion. Inget bra stöd för tangentbordsnavigering. Måste välja om mina filtreringsval med filtreringsverktyget som jag inte kan tangentbordsnavigera igenom. Följer stadens grafiska profil. Svårt att veta hur jag går vidare om jag inte har kort. E-tjänst Aktivitetsbokningen

Scenario: Boka träningspass Hitta var jag bokar Hitta träningspass Logga in Genomföra bokning Bra helhetsupplevelse? + − − + + − − + Snabba laddningstider Responsiv Tagentbordsnavigering Följer stadens grafiska profil Förstå hur jag hittar det jag söker

Scenario: Boka träningspass Vi vill med ett exempel visa att helhetsupplevelsen påverkar användarens betyg för alla tjänster i användarresan Vi tittar på Laddningstid exempel på vad som påverkar prestanda Tangentbordsnavigering som påverkar tillgänglighet Följer grafisk profil på verkar grafisk uttryck Förstår hur jag hittar det jag söker som påverkar om det är begriplig Responsiv som har med plattformsoberoende Scenario: Boka träningspass Exempel på användarresa genom ekosystemet

Förbättringsåtgärder Här kommer några tips på vad som kan göras för att sträva mot bra upplevelse på de 5 områden som vi lyft i presentation. Att börja med dessa i hela användarresan är man bra bit på vägen till en bra helhetsupplevelse. Förbättringsåtgärder 4 tips på vad du kan göra

Prestanda 4 saker för att få bra prestanda Tiden det tar att genomföra ett ärende eller en uppgift påverkar starkt användarupplevelsen, framför allt effektiviteten. Att minimera ledtider är en viktig och ibland förbisedd uppgift. 4 saker för att få bra prestanda Sträva först och främst efter att ha snabba ladd- och svarstider. Laddningstider skall helst inte överstiga 3 sekunder. Vissa hjälpmedelsanvändare har svårt att upptäcka att systemet laddar, exempelvis skärmläsare, därför är det extra viktigt för personer som använder dessa hjälpmedel att laddningstiderna minimeras. Det du kan göra är att se över cachning, konkatenera och minimering av statiska filer. Se till att inte starta och ladda onödiga delar, exmpelvis en karta som inte visas på sidan. Ha bra och stabila upptider, inte bara för servern utan även för tjänsten. Kontrollera att hela tjänsten fungerar och att inte bara servern är uppe och sträva efter att ha snabba åtgärder vid nedtider. Användning av loader och återkoppling i användargränssnittet och att animering pågår medan innehåll laddas påverkar upplevelsen av laddningstider. Använd dessa verktyg för att förbättra upplevelsen. Testas genom jämförelsestudier med liknande tjänster eller användartester. Minimera antalet steg och klick för att slutföra ärendet. Till exempel, om vi redan vet att användaren är intresserad av Eriksdalsbadet så bör vi endast lista träningspass på Eriksdalsbadet. För att veta hur man kan minimera steg och klick görs det bäst genom jämförelsestudier med liknande tjänster eller användartester.

Exempel på laddningstider Vilket år gäller det?

Tillgänglighet 4 saker för att få bra tillgänglighet Stockholms stad erbjuder viktig funktionalitet genom sina digitala tjänster som ska vara tillgängliga för alla oavsett funktionsnedsättning. Bristande tillgänglighet för personer med funktionsnedsättning är enligt lag en form av diskriminering. Den tillgänglighetsstandard som Stockholms stad eftersträvar att följa är WCAG 2.0. Webbriktlinjerna från E-delegationen redogör på ett tydligt sätt riktlinjerna i WCAG 2.0. Dessa råd är underbyggda av forskning och gör webbplatsen bekväm för alla. Riktlinjer om tillgänglighet kan ge råd om allt i från kontrast på textfärg och bakgrund, till att menystrukturen ska vara tydlig. 4 saker för att få bra tillgänglighet Ska gå att tangentbordsnavigera genom webbplatsen och att det tydligt framgår vilket objekt som har fokus. Testas genom att exempelvis kontrollera att webbplatsen har en logisk tabbordning. En logisk tabbordning kan vara att följa innehållets prioriteringsordning eller den responsiva ordningen. Innehåll ska vara strukturerat och formaterat på ett sätt som gör att externa skärmläsare kan tolka innehållet rätt. Exempelvis ska allt som är klickbart vara uppmärkt som länk eller knapp. Testas med användartest. Rätt kontrastvärden på färger, storlek på typsnitt för bra läsbarhet. Läs mer om kontrasthantering för stadens webblösningar på utvecklingsbloggen. Ha inte för långa textrader. En textrad i brödtext bör inte vara mer än 75 tecken för att behålla bra läsbarhet. Länkar i texten: Webbriktlinjer http://webbriktlinjer.se/riktlinjer/?filter=on&guidelineorder=p&freetext-filter= WCAG 2.0 http://www.w3.org/Translations/WCAG20-sv/

Grafiskt uttryck 4 saker för att få bra grafisk uttryck Användandet av Stockholms stads grafiska profil är en utgångspunkt för att skapa en enhetlig upplevelse mellan olika system. Stockholms stads grafiska profil är anpassad för hög tillgänglighet avseende kontrastvärden, läsbarhet, m.m. 4 saker för att få bra grafisk uttryck Använd Stockholms stads Varumärkesmanual så långt det går. Se speciellt delarna för webben och appar och e-tjänster. Sträva efter enkelhet. Ha endast med det som är nödvändigt och skala bort det som går. Var konsekvent i grafiska lösningar. Till exempel, istället för att ta fram en ny design för en meny, utgå ifrån design som redan finns på stadens andra tjänster. Om du försöker lösa ett grafiskt problem, leta efter goda exempel på hur man har löst liknande problematik inom andra av Stockholms stads digitala lösningar. Det finns designguidelines framtagna för stadens e-tjänster. Länkar i texten: Varumärkesmanual: http://varumarkesmanual.stockholm.se/ För webben: http://varumarkesmanual.stockholm.se/webbplatser För appar och e-tjänster: http://varumarkesmanual.stockholm.se/appar-och-e-tjanster Designguideline för e-tjänster http://utveckling.stockholm.se/2013/11/05/nya-designguidelines-for-e-tjanster/

?! Begriplighet 4 saker för bra begriplighet Enkelhet och begriplighet är centralt i upplevelsen av digitala tjänster. Målet är att så många som möjligt ska kunna tillgodogöra sig Stockholms stads tjänster. Begriplighet testas genom användartester. 4 saker för bra begriplighet Det ska vara tydligt för användaren vad man ska/kan göra i tjänstens olika vyer och hur man gör det. Får användaren tag på det hen är ute efter? Får man svar på sina frågor och lyckas man göra det man vill göra? Support ska finnas på plats för att stötta med hjälp och svar på frågor. Till exempel bör kontaktuppgifter vara lättillgängliga. Använd inte internspråk och förkortningar utan förklaring. Exempelvis istället för att heta ”Zumba*” där ”*” betyder nybörjare, skriv ut att det är för nybörjare, d.v.s. ”Zumba för nybörjare”. Se Webbriktlinjernas riktlinje 10 för mer information om hur du ger användare begriplig information. Tänk på att sidans rubrik och text ska kunna stå för sig själv i en responsiv lösning. Se stadens tips för responsivt innehåll. Länkar i texten: Varumärkesmanual: http://varumarkesmanual.stockholm.se/ För webben: http://varumarkesmanual.stockholm.se/webbplatser För appar och e-tjänster: http://varumarkesmanual.stockholm.se/appar-och-e-tjanster Designguideline för e-tjänster http://utveckling.stockholm.se/2013/11/05/nya-designguidelines-for-e-tjanster/

Plattformsoberoende 4 saker för att vara plattsformsoberoende Mobilanvändningen står idag för 50 % av besöken i Stockholms stads digitala kanaler och ökar. Samtidigt ökar antalet skärmstorlekar och webbläsare, som alla ställer krav på anpassning. Därför är det kritiskt att stadens digitala tjänster fungerar bra oavsett skärmstorlek och plattform. Plattformsoberoende testas genom testning i de vanligaste enheter, webbläsare och skärmstorlekar. 4 saker för att vara plattsformsoberoende Välj responsiv webb framför parallella dator- och mobilversioner. Designa inte bara för en specifik plattform, utgå ifrån de som är vanliga och inte endast vad majoriteten använder. Exempelvis ska tjänsten funka bra både i Android och Iphone även om majoriteten av användarna använder iPhone. Ett annat exempel är stöd för att innehåll skall se bra ut på retina-skärmar. Ha unika URL:er (webbadresser) som gör det enklare för användare att använda, dela och länka till innehåll. Säkerställ också hur det visas och länkas i de kanaler som länken kan tänkas delas (exempelvis Facebook). Sträva efter att ha samma innehåll och funktionalitet oavsett skärmstorlek men anpassa efter plattform. Exempelvis använd högupplösta bilder för retinaskärm där de finns, men inte annars. Tips är att börja med den mobila designen. Funktionalitet och innehåll som fungerar bra mobilt fungerar oftast även i andra situationer.

Framtida utveckling

Se träningsutbud Framtida utveckling Det pågår ett arbete att ta det digitala ekosystemet till nästa nivå. Där eftersträvas bland annat: Smarta integrationer mellan tjänsterna som förbättrar användarupplevelsen. Varje tjänst skall dock fortfarande fungera enskilt. Högre utnyttjande av existerande 3:e-partstjänster som medborgare redan använder för bättre räckvidd och service. Fortsatt fokus på design som fungerar lika bra oavsett skärmstorlek, upplösning och plattform. Användaren ser hur många som är bokade på dagens träningspass på Eriksdalsbadet. I denna presentation har vi beskrivit några saker som påverkar upplevelsen i ekosystemet och vad som kan göras för att få ett mer enhetligt ekosystem. Detta arbete är en central del i förbättringsarbetet av Stockholms stads digitala service. Utöver de åtgärder som är beskrivna här pågår också ett arbete med att ta det digitala ekosystemet till nästa nivå. Där eftersträvas bland annat: Smarta integrationer mellan tjänsterna som förbättrar användarupplevelsen. Varje tjänst skall dock fortfarande fungera enskilt. Fortsatt fokus på design som fungerar lika bra oavsett skärmstorlek och plattform.