Det digitala ekosystemet The Capital of Scandinavia Innehåll o Vad är det digitala ekosystemet o Målsättning o Vad påverkar upplevelsen? o Exempel på användarresa: Boka träningspass o Förbättringspunkter o 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 Kampanjsajter stockholm.se Jämförelsetjänster Kul1415 Pedagogik-tjänster Hitta Hitta och jämför service Temasajter Skolwebbarna Skolverktyg Stockholmskällan Pedagog Stockholm Verksamhetswebbar Stockholm växer Opendata Stockholm Plattform Fristående Stadsarkivet Stadmuseet Medeltidsmuseet Stockholms stadsbibliotek Eriksdalsbadet E-tjänster Appar Upptäck Stockholm Felanmälan Anmäl frånvaro Mini Buller Radon Ansöka & anmäla Omfattande Ansöka till förskola Felanmälan Boka träningspass Kulturskolan Inloggning Personnummer Lösenord Certifikat Bank-ID Prenumerations- och kontakttjänster RSS E-post 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 Stockholm.se www Jämförelse-tjänst E-tjänst Inloggning Annan webbplats 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örelsetjänster Inloggningstjänster stockholm.se E-tjänster Andra webbplatser Vad påverkar upplevelsen? Prestanda Grafiskt uttryck Plattformsoberoende Påverkas av exempelvis upptider, laddningstider och antal klick Exempelvis följer stadens varumärkesmanual, konsekvent, tydlig avsändare Att det fungerar bra oavsett webbläsare, skärmstorlek och enhet för de som har behov av våra tjänster ?! Tillgänglighet Begriplighet Innefattar exempelvis fungerande tangentbordsnavigering, logisk uppbyggnad, anpassad för extern skärmläsare, rätt kontrastvärden 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. 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. Eriksdalsbadet på stockholm.se − 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. 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. E-tjänst Aktivitetsbokningen − 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. 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. Inloggning på Aktivitetsbokningen − Inloggningsalternativen är otydliga. Flera användare missar att det finns fler sätt att logga in än med e-post och lösenord. 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. E-tjänst Aktivitetsbokningen − Svårt att veta hur jag går vidare om jag inte har kort. Scenario: Boka träningspass Hitta var jag bokar Hitta träningspass Logga in Genomföra bokning Snabba laddningstider + − + − Responsiv + + − + Tagentbordsnavigering + − + − Följer stadens grafiska profil + + + + Förstå hur jag hittar det jag söker − − − − Bra helhetsupplevelse? Scenario: Boka träningspass Exempel på användarresa genom ekosystemet Förbättringsåtgärder 4 tips på vad du kan göra 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 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. Grafiskt 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 etjä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. ?! 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. Plattformsoberoende 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 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.