Presentation laddar. Vänta.

Presentation laddar. Vänta.

Det digitala ekosystemet The Capital of Scandinavia.

Liknande presentationer


En presentation över ämnet: "Det digitala ekosystemet The Capital of Scandinavia."— Presentationens avskrift:

1 Det digitala ekosystemet The Capital of Scandinavia

2 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 Innehåll

3 Vad är det digitala ekosystemet? En översiktsbild

4 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 PlattformFristå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 Felanmälan Boka träningspass Kulturskolan Prenumerations- och kontakttjänster RSS E-post Ett urval av digitala tjänster i ekosystemet

5 Målsättning

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

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

8 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. stockholm.se Inloggnings- tjänster Jämförelse- tjänster E-tjänster Andra webb- platser

9 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. ?! Prestanda Påverkas av exempelvis upptider, laddningstider och antal klick Grafiskt uttryck Exempelvis följer stadens varumärkesmanual, konsekvent, tydlig avsändare Plattformsoberoende Att det fungerar bra oavsett webbläsare, skärmstorlek och enhet för de som har behov av våra tjänster Tillgänglighet Innefattar exempelvis fungerande tangentbordsnavigering, logisk uppbyggnad, anpassad för extern skärmläsare, rätt kontrastvärden Vad påverkar upplevelsen?

10 Scenario: Boka träningspass Eriksdalsbadet på stockholm.se ✚ 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. Hitta vart jag bokar

11 Scenario: Boka träningspass E-tjänst Aktivitetsbokningen −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. Hitta träningspass

12 Scenario: Boka träningspass Inloggning på Aktivitetsbokningen ✚ 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. Logga in

13 Scenario: Boka träningspass E-tjänst Aktivitetsbokningen −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. Genomföra bokning

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

15 Exempel på användarresa genom ekosystemet

16 Förbättringsåtgärder 4 tips på vad du kan göra

17 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.

18 Exempel på laddningstider

19 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.WCAG 2.0Webbriktlinjerna från E-delegationen 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.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.

20 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 e- tjänster.webbenappar 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.designguidelines framtagna för stadens e-tjänster

21 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.Webbriktlinjernas riktlinje 10 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.Se stadens tips för responsivt innehåll

22 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).URL:er 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.

23 Framtida utveckling

24 Se träningsutbud 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. Framtida utveckling


Ladda ner ppt "Det digitala ekosystemet The Capital of Scandinavia."

Liknande presentationer


Google-annonser