UX-process • Nackademin 6 sep

Transcript

1. Jonas Söderström • 2022 UX-processen Nackademin • 6 sep 2022 Jonas Söderström
2. Jonas Söderström • 2022 ACD Design thinking , service design, tjänstedesign…
3. Jonas Söderström • 2022 ACD: Användarcenterrad design Inte ”användarstyrd"!
4. Jonas Söderström • 2022 Sex steg Stanford
5. Jonas Söderström • 2022 Design thinking, service design, tjänstedesign, UX-process
6. Jonas Söderström • 2022 Double diamond
7. Jonas Söderström • 2022
8. Jonas Söderström • 2022
9. Designprocess (Ej färdig) 9
10. Designprocess – en översikt Sätta syfte och mål 
 Vår designprocess börjar med att se till att vi förstår vilken förändring vi ska möjliggöra. Vi enas om konkreta effektmål och scope. 
 Förstå användarna 
 Så snart som möjligt därefter vill vi lära känna användarna, 
 för att förstå deras drivkrafter, behov, frustrationer och livssituation. Syntes och Idéarbete 
 Nu kan vi väga verksamhetens krav och användarnas mot varandra, och börja skapa designidéer. 
 Vi vill generera många idéer, även de som kan låta galna, för att uppmuntra nya perspektiv. Detta görs alltid tillsammans med uppdragsgivaren. Interaktionsdesign och ux-copy 
 När vi valt inriktning börjar arbetet med interaktionsdesign. 
 Vi jobbar iterativt, med regelbundna avstämningar för att ta beslut. Även i detta steg involverar vi användarna. Visuell design 
 Designarbetet fortsätter till prototyper med hög detal j­ rikedom och färdig visuell stil. 
 Här fokuserar vi också på regelrätta användnings- 
 tester. Utveckling och uppföljning 
 Slutligen ser vi till hur 
 vi kan designa införande och lansering av produkten eller tjänsten. Vi ser hur en förvaltning för framtiden kan behöva organiseras. 
 Vi utvärderar också själva projektet tillsammans med beställaren. Syntes och idéarbete Sätta syfte och mål Förstå 
 användarna Interaktions- 
 design och 
 ux-copy Visuell 
 design Utveckling 
 och 
 uppföljning Testa och iterera Leverans
11. De här bidrar från oss - Designstrateger - Effektkartläggare - Projektledare - Systemarkitekt 
 Det här behöver vi från uppdragsgivaren - Genomföra ett antal workshops med rätt deltagare - Sätta en klar bild av målen som alla är överens om - Tillgång till några nyckelpersoner - Tillgång till relevant tidigare dokumentation - Identifiera och prioritera grupper av användare för att undersöka i nästa steg Exempel på leverabler - Effektkarta - Effektmål 11 Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Sätta syfte, scope och effektmål Vi börjar med att skaffa oss en gedigen kunskap om verksamhetens mål och uppdragets förutsättningar. 
 Det viktigaste är få en djup förståelse för vilka utmaningar och problem som kunden har. - Varför vill man skapa nytt eller göra om 
 det man har? - Vad ska den bestående förändringen vara 
 när arbetet är avslutat? Vi intervjuar ledande personer i verksamheten. 
 Vi läser också in oss på bakgrundsmaterial, inklusive grafisk profil, varumärke s­ strategi, värdeord, tonalitetsdokument. Vi gör utkast till syfte, scope och konkreta 
 effektmål som vi diskuterar i en eller flera workshops. Där tar vi med en bred grupp av representanter från organisationen. Det är viktigt att ledande personer är med, så att syfte och ramar för projektet har godkänts på högsta möjliga nivå. Vi sätter upp en hypotes om vilka användargrupper 
 vi måste ­ nå ut till, för att lyckas med projektet. Dessa kommer vi att undersöka närmare i nästa steg .­ Överlämning och uppföljning Designprocess /
12. Jonas Söderström • 2021
13. Jonas Söderström • 2022
14. Jonas Söderström • 2022
15. Jonas Söderström • 2022
16. socialstyrelsen.se ska öka följsamheten till Socialstyrelsens ställningstaganden om hur vården och socialtjänsten uppnår god kvalitet • 1a: Öka kännedomen om de regelverk och rekommendationer som Socialstyrelsen tar fram • 1b: Öka användningen av dem • 1c: Öka dialogen kring dem • 2a: Öka kännedomen om den kunskap som Socialstyrelsen tar fram • 2b: Öka användningen av kunskapen • 2c: Öka dialogen kring den Dom ska göra som vi säger!
17. De här bidrar från oss I det här steget jobbar oftast två user researchers i par. 
 Det här behöver vi från uppdragsgivaren - Normalt sett sparar det tid om uppdragsgivaren kan ordna det praktiska kring rekrytering av potentiella intervjupersoner. - Uppdragsgivaren kan ha en representant som observatör i intervjuer med användare, men deltar inte aktivt. - Vi kan behöva tillgång till statistikkällor som sökloggar, besök- eller användnings-statistik, webbanalyser etc. Exempel på leverabler - Kundresekartor - Beskrivningar av typanvändare/grupper - Vägledning om prioritering - Insiktsrapporter 17 Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Förstå användarna I det här steget samlar vi kunskaper och insikter om användarna: deras behov och drivkrafter som är relevanta för att verksamheten ska nå de eftersträvade effekterna. Vi försöker hitta mönster så vi att kan samla användarna i tydliga grupper. Vi arbetar både med kvalitativa och kvantitativa metoder. Vi samlar insikter genom djupintervjuer och observationer i användarnas normala miljö. 
 Vi analyserar data som sökloggar, besök- eller användningsstatistik, etc. Vi fokuserar inte på demografi utan på beteenden, roller och djupare behov. Vi tänker inte bara på slutanvändarna, utan även de interna användarna, så de kan jobba så effektivt med systemet som möjligt. Resultaten blir en eller flera artefakter, där vi så fylligt som möjligt ger en grund för att prioritera vilka användargrupper som har störst möjlighet att bidra till de givna effektmålen. Överlämning och uppföljning Designprocess / Charles Deluvio / Unsplash
18. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning Data Vi analyserar data Kontextuella intervjuer Vi intervjuar användare i deras miljö. Så vi samtidigt kan observera, samla artefakter, ta bilder Så här arbetar vi för att förstå användarna 18 Observationer Observationer lorem ipsum Konkurrentanalys Lorem ipsum
19. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning Användarresa Journey map Customer journey map En användarresa är en mer komplett kartläggning av alla de steg en användare tar när hon löser en större uppgift. I kartan noterar man alla kontaktpunkter som användaren har med tjänsten, hur de upplever de olika stegen, vilka öppna frågor som finns, vilka andra system eller organisationer som också är engagerade. Användarbeskrivningar ”Personor” Vi beskriver ett antal typanvändare, baserat på vår research. Tonvikten ligger på att beskriva övergripande drivkrafter och beteenden, inte på demografiska faktorer. 
 Beskrivningarna kan lista gruppens förutsättningar eller förkunskaper, vanliga situationer i förhållande till tjänsten eller produkten, deras upplevda friktioner, och vad som skulle ge dem en ”wow”-känsla för tjänsten eller produkten. Användargrupperna förs in i effektkartan. Leverabler Förstå användaren (översikt 1) 19 Jobs to be done-scenarios Ett scenario kan vara en beskrivning av en specifik uppgift som användaren vill eller ska kunna utföra med tjänsten/ produkten, för att verksamhetsmålen ska uppfyllas. Rapport Redovisar insikter En allmän redovisning av insikter och slutsatser
20. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning Effektkarta Yyyyyy Service blueprint Användargrupper ”Personor” Service blueprints kan ses som en ännu mer omfattande användarresa. Förutom kundens aktiviteter redovisar man också på djupet vilka interna system som tas i bruk när kunden t ex beställer en biljett, och vilka stödprocesser som måste fungera för att varje interaktion eller kontaktpunkt ska fungera och leda vidare. De två perspektiven kallas frontstage alltså vad kunden ser och upplever, och backstage som fokuserar på vad företaget gör för att kunden ska uppleva det denne upplever. 20 Xxxxxx Zzzzzz Lorem ipsum Empatikarta Empathy map Lorem ipsum Leverabler Förstå användaren (översikt 1)
21. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning En användarbeskrivning består oftast av • Ett deskriptivt namn • En kort beskrivning av viktiga drag, exempel på typiska situationer som hen befinner sig i • Sammanfattade användningsmål som har bäring på effektmålen, formulerade som ”Vill…” eller ”Ska …” • En särskild ”designutmaning”, som klargör det viktigaste som designen måste lösa för att denne användare ska bli nöjd. • Man kan också definiera en förflyttning som denna användargrupp ska genomgå, om projektet ska lyckas: ”den tveksamme” ska bli ”den övertygade”, etc Bra att komma ihåg är att användarbeskrivningen är en situation eller kanske roll. Det betyder att en individ kan tillhöra flera olika användargrupper beroende på kontexten och tillfället. Leverabler: Användarbeskrivningar 21
22. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning En användarresa beskriver en specifik användar(grupp)s upplevelser över tid – oftast både innan och efter hon konkret använder den undersökta tjänsten. Bra att komma ihåg är att användarresan inte är en processbeskrivning ur verksamhets synvinkel. Den beskriver kundens/användarens upplevelse(r). Leverabler: Användarresa / Kundresa 22
23. Jonas Söderström • 2021
24. De här bidrar från oss - Designstrateg - Tjänstedesigner Det här behöver vi från uppdragsgivaren - Rätt deltagare i workshops för att få brett kompetens- perspektiv - Få tillgång till nyckelpersoner för att kunna ställa frågor kring rangordning av idéer och tester Exempel på leverabler - Idé-workshops - Konceptutveckling - Design Thinking-processer 
 24 Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning Designprocess / Nu gäller det att skapa en syntes av verksamhetens krav och användarnas behov och problem. Vad finns det för lösningar som tillfredsställer båda? Vi jobbar med att ta fram en mångfald av idéer och perspektiv och använder flera metoder för att hitta så många idéer med så hög kvalitet som möjligt. Via workshops tillsammans med olika kompetenser hos uppdragsgivaren får vi en bra spridning och olika vinklar på idéerna. Idéerna går igenom en urvalsprocess och prioritering. De mest lovande tas vidare till nästa steg för att bli skisser som kan testas på användare. Syntes och idéarbete Jason Goodman / Unsplash
25. I vårt idéarbete gör vi … 25 Klustring & urval av idéer Efter ideationsfasen klustrar vi liknande teman och ger varje idégrupp en titel. Grupperna få välja en eller flera idéer att gå vidare med utifrån definierade kriterier, t ex genom omröstning med hjälp av klisterpluppar eller rangordna idéer utifrån: - De teamkompetenser som behövs - Inkomstpotential mellan 1-4 - Arbetsinsats mellan 1-4 - Hur säker man är på ovanstående från 10-100% Om man multiplicerar inkomstpotential- siffran med procenttalet och delar med arbetsinsats-siffran får man ett poäng som går lätt att ställa i kontrast mot övriga ideer. How might we-frågor Vi brukar använda oss av “How might we”- frågor som vi skapar genom att omformulera de viktigaste insikterna från vår användarresearch till frågor. Det gör vi för att kunna vända problemen till designlösningar och samtidigt få en bra balans mellan ett konkret formulerat problemområde och tillräckligt med utrymme för kreativa tankar, till exempel inför ideation workshops. Skisser & tester De vinnande idéerna eller idén conceptualiseras och utvecklas sedan vidare till mer konkreta idéer som kan testas på användare. Ideation workshops Ideation och conceptutveckling är en bra process för att låta grupper arbeta kreativt och samarbeta för att generera en stor mängd kreativa idéer på kort tid. Det är bra att ha en bred kompetens- spridning bland de som är med. För att alla ska känna sig bekväma med att generera både bra och mindre bra idéer inför varandra brukar vi börja med några olika uppvärmningsövningar. Olika sätt att få fram ideer kan vara genom association, negativ brainstorming, användarperspektiv etc. Tiden för idé- generering bör hållas kort för att sätta lite press på grupperna. Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning
26. Leverabler i idéarbetet 26 Test och lärdomskort Vi använder ibland test och lärdomskort för att testa våra ideer och hypoteser på ett strukturerat sätt. Testkort Vi tror att… (hypotes) För att verifiera det kommer vi att… (test) Och mäta… (mätpunkt) Vi har rätt om… (kriterie) Lärdomskort Vi trodde att… (hypotes) Vi observerade… (observation) Från detta lärde vi oss att… (lärdomar och insikter) Därför kommer vi att… (beslut och handling framöver) Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning
27. 27 Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Interaktionsdesign och ux-copy Nu konkretiserar vi idéerna och koncepten genom att göra skisser, wireframes och enkla prototyper. Vi jobbar i gemensamma designprocesser, via workshops och ­ direkt i de specialiserade verktyg som vi använder. Vi skapar flöden, informationsstruktur och innehåll. 
 Vår ux-copy ser till att språket och tonaliteten anpassas till målgruppen samt följer riktlinjer för tillgänglighet. I detta skede arbetar vi med snabba iterationer och snabb feedback. Vi gör täta, regelbundna tester med slutanvändare och kunder, för att se om vår design fungerar – i början med enkla skisser och så småningom 
 med mer omfattande klickbara prototyper. Vi delar också löpande design med uppdragsgivaren, för att verifiera om vi uppfattat detaljerna rätt. Överlämning och uppföljning Designprocess / De här bidrar från oss - Interaktionsdesigners - UX-designers - UX-copy - Systemarkitekt Det här behöver vi från uppdragsgivaren - Snabb feedback på skiss och förslag - Tillgång till testpersoner - Verifiera tekniska lösningar Exempel på leverabler - Flödesschema - Wireframes - Klickbara prototyper - Riktlinjer för tonalitet - Skrivregler för UX-copy - Specifikationer till utvecklare - Specifikationer till grafiska designers Bild: Amélie Mourichon / Unsplash
28. Jonas Söderström • 2022
29. Jonas Söderström • 2022
30. Jonas Söderström • 2022
31. Sida Meny, smala skärmar (1) Default + sök Logga länkad till startsidan 31 Klicka på sök fäller ut ett sökfält Direktlänk till webbmejl - ingen meny fälls ut. Notering visar antal olästa mejl. Meny och nav – se sida 7 och
32. Jonas Söderström • 2022
33. Sida Startsida, översikt (bred skärm) Visas här utan meny, navigation eller sidfot. Ev. utvalda genvägar 33 Flöde från Instagram-konto Upp till tre pu ff ar för särskilda ändamål (”banners”) Nyhets fl öde Aktivitet på diskussions- forum Kalendarium Toppbild - bygger identitet och varumärke
34. Sida Startsida, övre del (bred skärm) Visas här utan meny, navigation eller sidfot. 34 Bläddra månader Gångna dagar Idag Vald dag Indikatorer för att en dag har en eller fl era händelser Vald dags kalenderhändelse(r) visas här Personstyrda uppdateringar från diskussionsforum Mest aktiva ämne, mätt i antal nya inlägg sedan rullande sju dagar.
35. Jonas Söderström • 2022 Aktiveras inte förrän man gjort minst ett val
36. De här bidrar från oss - Art Directors - UI-designers - Grafiska formgivare 
 Exempel på leverabler - Moodboards - Grafisk profil - Typografi - Färgkarta - Bildmanér - CSS - Ikoner - Rörlig grafik 
 36 Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Visuell design Parallellt med interaktionsdesign och ux- copy arbetar vi med att ta fram rätt visuellt uttryck för tjänsten eller produkten: färg, form, typografi, bilder, ikoner och rörlig grafik. Ibland finns redan en färdig designprofil. 
 Då gäller det att lösa hur den på bästa sätt kan tillämpas den på den nya tjänsten eller produkten. Ibland gäller det att ta fram en visuell design från början, att hitta ett helt nytt uttryck 
 som kan skilja tjänsten från sina konkurrenter och locka rätt kunder eller användare. Vi säkrar alltid att formen uppfyller kraven på tillgänglighet: tillräckliga färgkontraster, läsbar typografi, bilder som är möjliga att tolka, och andra krav. Överlämning och uppföljning Designprocess / Zdan Ivan /Shutterstock
37. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning Leverabler i visuell design 37 Typografi Lorem ipsum Moodboard I en moodboard samlas exempel på bilder, färger och typsnitt som ska försöka fånga den känsla som den visuella designen ska skapa. Olika moodboards prövas och diskuteras Färgschema Från moodboard tas detaljerade färgscheman fram, specificerade så de kan användas såväl digitalt som i print. Samlad grafisk identitet Lorem ipsum
38. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning 38 Leverabler I en moodboard samlas exempel på bilder, färger och typsnitt som ska försöka fånga den känsla som den visuella designen ska skapa. Från moodboard tas detaljerade färgscheman fram, specificerade så de kan användas såväl digitalt som i print.
39. Designprocess / Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning 39 Leverabler Stylesheet xxxxx Ikoner xxxxx
40. De här bidrar från oss - Projektledare - Effektstrateg - Kommunikatör Det här behöver vi från uppdragsgivaren - Samarbete kring kommande steg Exempel på leverabler - Införandestrategi - Lanseringsmaterial - Backlog - Roadmap - Onboardingmaterial - Manualer - Mätplan 40 Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Utveckling och uppföljning Sista steget i vår designprocess handlar om att säkra att vi verkligen bidrar till beställarens övergripande syfte. Är den digitala produkten tillräcklig? Behövs det andra åtgärder? Hur ska den lanseras? Kan den vidareutvecklas? I detta steg tar vi fram vår mätplan. Vi bestämmer exakt vad ska vi mäta, när, och hur. Det ger oss tydliga kriterier för att säga om projektet är lyckat (eller om vi behöver göra mer). Vi samlar också ihop idéer om möjliga förbättringar. Vi summerar vår backlog och gör en preliminär utvecklingsplan (roadmap) för framtida utveckling. Slutligen gör vi, tillsammans med ­ uppdragsgivaren, 
 en utvärdering av själva projektet. Vad har fungerat bra, vad kan vi förbättra till nästa gång? Utveckling och uppföljning Designprocess / Priscilla Du Preez on Unsplash