Vad är det digitala ekosystemet?

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.