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
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!
Utmaningen
Alla är kunder Utbetalningar årligen: 200 miljarder kronor 6 % av Sveriges BNP
Målbild digitalisering Nöjda kunder Transparent organisation År 2020 ska 75 % av alla interaktioner med Försäkringskassan vara digitala. Kostnadseffektiv verksamhet
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
1 Analysera behov i kundresorna
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?
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
2 Tänk inkluderande från början
Symboler för funktionsnedsättning
Vissa funktionsnedsättningar syns inte på utsidan
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
Helhetssyn i process och kompetens Tillgänglighet Koncept Design Implementation Interaktionsdesign Copy Grafisk design Teknik
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
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å.
3 Bygg Mobile First
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
4 Titta på beteende
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
Beteendetyper Aktiv Orolig Självgående Irrationell Rationell Uppgiven Anspråkslös Passiv
Beteende hos kunderna Många kommer från sökmotorer Gör oftast en sak i taget föräldrapenning när man
5 Skissa tidigt, testa och utvärdera!
Många iterationer med wireframes och prototyper 60-70 tänk-högt-intervjuer i flera förfiningssteg Testade på wireframes redan i förstudie Utvärderade prototypverktyg
Validering av hypotesen med betasajt maj-nov 2015
Kill your darlings! Processöversikten är ju både fin och nyttig för kunderna! Vi har ju alltid haft en meny! Sid 26
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
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
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.
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
6 Hur man designar för hela befolkningen
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
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.
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
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
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
7 Sajten lanserad, sen då?
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...
Feedback från kunder Kundsynpunkter från samtal med kundcenter Kundundersökningar Web-enkäter Användningstester efter lansering
Statistik kontakter till kundcenter Lansering av nya webbplatsen
Statistik självbetjäningsgrad
Statistik användningsmönster 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% -1m 1-5 min 5-10 min 10-30 min 30-60 min >60
Sid 43 Näst på tur: Mina sidor
Tack för att ni har lyssnat Marcus Davidsson Lead Interaction Designer Sebastian Leinehed Lead Art Director Anders Lewin Språkkonsult Sid 44