En vägg av väg till information

Transkript

1 En vägg av väg till information 7 insikter från när vi byggde om Sveriges största myndighetssajt Marcus Davidsson Lead Interaction Designer Sebastian Leinehed Lead Art Director Anders Lewin Språkkonsult

2 Program 1 Analysera behov i kundresorna 5 Skissa, testa och utvärdera! 2 Tänk inkluderande från början 6 Hur man designar för hela befolkningen 3 Bygg mobile first 7 Sajten lanserad, sen då? 4 Titta på beteende!

3 Utmaningen

4 Alla är kunder Utbetalningar årligen: 200 miljarder kronor 6 % av Sveriges BNP

5 Målbild digitalisering Nöjda kunder Transparent organisation År 2020 ska 75 % av alla interaktioner med Försäkringskassan vara digitala. Kostnadseffektiv verksamhet

6 Allas rättighet Alla har rätt till socialförsäkri ngen Alla måste kunna få sina rättigheter tillgodosedda Funktionsvariation Digitala tjänster måste utformas för alla Teknisk kompetens och tillgång Språk

7 1 Analysera behov i kundresorna

8 Den generella kundresan FÖRE UNDER HANDLÄGGNING EFTER Vad har jag rätt till? Hur gör jag? Hur ansöker jag? Vad förväntas av mig? Vad händer i mitt ärende? När tar ni beslut? När kommer pengarna? Hur gör jag? När kommer pengarna? Har jag rätt till andra bidrag? Hur ändrar jag?

9 Sortering och struktur Hela tiden utifrån frågorna i kundresan Formulera regler för placering av information Sortera fysiskt: skriva ut, klippa isär, lägga i lådor Skapa intern styleguide

10 2 Tänk inkluderande från början

11 Symboler för funktionsnedsättning

12 Vissa funktionsnedsättningar syns inte på utsidan

13 Tillgänglighet är för alla, ta till vara på allas potential Vem som helst kan få en tillfällig eller bestående funktionsnedsättning Allt fler med funktionsnedsättning tar plats i arbetslivet

14 Helhetssyn i process och kompetens Tillgänglighet Koncept Design Implementation Interaktionsdesign Copy Grafisk design Teknik

15 Tillgänglighet gynnar alla HYPOTES Det som är bra för personer med funktionsnedsättning är bra för alla. Vi kan få fler nöjda kunder i alla segment om vi förenklar och bygger med tillgänglighet i fokus och följer standards

16 Ingen lättläst version Alla texter ska vara lättlästa. Speciella lättlästa texter kan lätt bli alibi för att inte arbeta tillräckligt med att skapa bra texter för alla. Lättläst blir svårt att hitta. Lättläst är inte alltid lätt att förstå.

17 3 Bygg Mobile First

18 Mobile First Varför då? Snabb ökning av mobila användare och tydlig förväntan hos kunderna! Teknisk tillgänglighet nåbara i flera kanaler och skapa igenkänning mellan kanalerna

19 4 Titta på beteende

20 Mobile first rimmar med tillgänglighet Ta hänsyn till liten yta delad uppmärksamhet skakiga miljöer och dålig ljudnivå otåliga användare Krav på förenkling rimmar väl med behoven vid olika funktionsnedsättningar

21 Beteendetyper Aktiv Orolig Självgående Irrationell Rationell Uppgiven Anspråkslös Passiv

22 Beteende hos kunderna Många kommer från sökmotorer Gör oftast en sak i taget föräldrapenning när man

23 5 Skissa tidigt, testa och utvärdera!

24 Många iterationer med wireframes och prototyper tänk-högt-intervjuer i flera förfiningssteg Testade på wireframes redan i förstudie Utvärderade prototypverktyg

25 Validering av hypotesen med betasajt maj-nov 2015

26 Kill your darlings! Processöversikten är ju både fin och nyttig för kunderna! Vi har ju alltid haft en meny! Sid 26

27 Koncept: Innehållsnavigering Primär navigation är via innehållet. Menyn är bara ett komplement. Tydliga ingångar och val i varje steg Sökväg för överblick Det är ok att skrolla och med fler klick, bara jag vet vart jag är på väg och har överblick. Sid 27

28 Koncept: Ensidesupplägg En målsida för varje innehållsdel, som har fasta (återkommande) rubriker och avdelningar Igenkänning ger trygghet och jag vet att jag läst allt. Sid 28

29 Koncept: Ensidesupplägg Om jag landat fel ska det vara enkelt att komma rätt igen, och att nå relaterad information Rubrikerna svarar mot identifierade behov i kundresan Minimera grundinformation Testimonials för exempel Alla vanliga frågor samlade som är relevanta för den här sidan.

30 Koncept: Tydliga vägar till action Sätt att gå vidare är tydligt utmärkta Vanligaste tjänsterna och verktygen lyfts fram tidigt i strukturen Driva till självbetjäning

31 6 Hur man designar för hela befolkningen

32 Grafiskt koncept: Förutsättningar Ny grafisk profil parallellt med projektet för vår nya webbplats Nytt hustypsnitt, Neue Haas Grotesk Denna behövde omsättas i ett designsystem för en ny webbplats Tillgänglighet. AA-kontrast måste uppnås. "We strive for a Design that is centered on the message rather than visual titillation. We like Design that is clear, simple and enduring. And that is what timelessness means in Design." - Massimo Vignelli

33 Grafiskt koncept Hur man väljer en grafisk design som riktar sig till hela svenska befolkningen som målgrupp Ska vara modern, estetiskt tilltalande men inte ta fokus från innehållet. Design som jobbar i det dolda. Ledord har varit struktur, standardisering, återanvändbarhet, modern, tydlig. Enkelt för användaren att förstå / intuitiv Inte leda följa standard Värdeord: Tryggare enklare mänskligare.

34 Grafiskt koncept The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. Josef Müller-Brockmann Less, but better because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Good design is as little design as possible

35 Google Material Design Material Design lanserades sommar 2014 som naturlig utveckling av Flat Design Standardiserat modulärt grafiskt uttryck Webbplatsen behöver vara modern, men samtidigt bekant och lättanvänd. Formspråk som sannolikt kommer att ha en lång livslängd. Google var tidiga med en utförlig interaktiv style guide med stor inverkan på det övriga digitala landskapet. Utöver detta var även Material Design den logiska efterföljaren till Flat Design som präglat webbdesignen de senaste åren. Och så använde vi Bootstrap som är ett av de ledande front end-ramverken. Inte leda följa standard

36 Tillgänglighet som designer När det gäller tillgänglighet är färgkontrast något som påverkar de grafiska möjligheterna. Ett exempel på hur vi möter tillgänglighetskraven är att allt grafiskt innehåll på webbplatsen möter AA-krav för kontrast. Som formgivare tvingas du att justera ditt tankesätt något om du är ovan att jobba med tillgänglighet, eftersom din färgpalett ser annorlunda ut. På en innehållstung sajt där innehållet är framför formen måste typografin vara god. God typografi med hög läsbarhet och mycket whitespace. Tydliga CTA:s. Sid 36

37 7 Sajten lanserad, sen då?

38 Hantera internt tryck Se upp för att låta konceptet degenereras Alla avdelningar vill lyfta fram sitt område och ha mer och prioriterat innehåll Alla är speciella i sina egna ögon Tydliga regler för samarbetet vem ansvarar för vad utifrån sin kompetens Dokument som stöd: bannerstrategi, innehållsstrategi, designguide, riktlinjer...

39 Feedback från kunder Kundsynpunkter från samtal med kundcenter Kundundersökningar Web-enkäter Användningstester efter lansering

40 Statistik kontakter till kundcenter Lansering av nya webbplatsen

41 Statistik självbetjäningsgrad

42 Statistik användningsmönster 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% -1m 1-5 min 5-10 min min min >60

43 Sid 43 Näst på tur: Mina sidor

44 Tack för att ni har lyssnat Marcus Davidsson Lead Interaction Designer Sebastian Leinehed Lead Art Director Anders Lewin Språkkonsult Sid 44