Träff #21 • UX process, nudging, bild på webb • 20 april • vt 23 UX Writing • Nackademin

Transcript

1. Jonas Söderström • 2023 Bra sak UX process Nudging (?) Bilder på webb UX writing • Trä ff #21 • 20 april Jonas Söderström • Nackademin • Vt 2023
2. Jonas Söderström • 2023 Lite repetition, och lite nytt
3. Jonas Söderström • 2023 Hänvisa inte till platser eller riktningar på skärmen • Se faktarutan till höger • Använd knappen i vänsterspalten • Fyll i formuläret nedan 👎 • Se faktarutan ”Så röstar du” • Använd knappen ”Skapa enkät” • Fyll i formuläret ”Beställ ny dator” 👍
4. Jonas Söderström • 2023 Ge begripliga och beständiga tidsangivelser • senare i år • föregående kvartal • nästa månad 👎 • under 2023 • Sista kvartalet 2022 • i maj 2023 • i dag, måndag 17 april 👍
5. Jonas Söderström • 2023 Mindre viktiga Viktiga
6. Jonas Söderström • 2023 Rubriker är ännu viktigare för att hjälpa läsaren 
 att välja! Slutsats:
7. Jonas Söderström • 2023 Gör rättelser synliga • I slutet – inklusive datum
8. Jonas Söderström • 2023 Kränkande eller olämpligt 
 digitalt innehåll • Ta bort det som är fel, så det inte längre är sökbart eller möjligt att retweeta. • Men bevara samtidigt sammanhanget kring det på något ställe, så det är möjligt att rekonstruera vad som hände.
9. Jonas Söderström • 2023 George Orwell Never use a long word 
 where a short one will do. 
 If it is possible 
 to cut a word out, 
 always cut it out. Ur Rules for the English language (1946) ’’
10. Jonas Söderström • 2023 Erik Wellander När satserna på detta sätt blåsas upp och ordmassan alltså ökas utan motsvarande ökning 
 av tankeinnehållet, 
 så blir följden, 
 som vid all in fl ation, 
 en värdeminskning. Ur Riktig svenska, 1939 (s 145) ’’
11. Jonas Söderström • 2023 Lite mer om att testa text … men först:
12. Jonas Söderström • 2023 Bra sak!
13. Jonas Söderström • 2023 Att testa text
14. Jonas Söderström • 2023 Bestäm vad du behöver ha reda på • Testa ofta och små delar under arbetets gång … • Testa i varje sprint! • …och sedan den stora helheten.
15. Jonas Söderström • 2023 Förstår de våra begrepp? Vad fi nns under ”Studiemedel”, tror du? Tja, pennor, block, linjaler och sånt …
16. Jonas Söderström • 2023 Förstår de våra begrepp? Vad fi nns under ”Studiemedel”, tror du? 💶 = studiebidrag
17. Jonas Söderström • 2023 Verktyg i research- och analysarbetet Testkort • Vi tror att… (hypotes) • För att veri fi era det 
 kommer vi att… (test) • Och mäta… (mätpunkt) • Vi har rätt om… (kriterier) •
18. Jonas Söderström • 2023 Scenariotestning
19. Jonas Söderström • 2022 Praktiska tips • Vara två: en lyssnar (och frågar), en antecknar och har ett stoppur rullande • Spela in men anteckna också. Gå inte igenom band efteråt. • Om det är något särskilt bra, anteckna tiden. 
 Hitta just det stället • Jag skriver hellre för hand än på dator • Sätt av en timme direkt efter intervjun för att förtydliga anteckningarna och kort diskutera med varandra • Man orkar knappast mer än tre eller fyra intervjuer per dag
20. Jonas Söderström • 2022 Justera löpande • Gör en test run på en eller två intervjuer • Utvärdera frågor, scope, tid, plats, urval • Repeat if necessary
21. Jonas Söderström • 2022 Att rekrytera intervjupersoner 1. Låt kunden göra det, och sätta upp tider 
 (efter dina instruktioner om time slots, pauser etc) 2. Använd en agentur. Jag har haft bra samarbete med Norstat. 3. Gerillaundersökningar / fältstudier. Gå på random folk 
 på plats, i lunchkön, etc.
22. Jonas Söderström • 2023 Observera och utvärdera • Hur många lyckas med uppgiften? • Är de säkra på att de gjort rätt? • Hur många gör fel? • Hur många gör fel men tror att de gjort rätt? • Hur många ger upp och lyckas inte slutföra? • Tid att genomföra uppgift? • Om de lyckats: Kan de förklara för en tredje person hur de gjorde?
23. Jonas Söderström • 2023 Exempel på test
24. Jonas Söderström • 2023 Överstrykningsmetoden
25. Jonas Söderström • 2023 Läs igenom texten. Stryk över ord eller uttryck med den färg som motsvarar vad du känner: • Det här var enkelt. • Det här gjorde att jag kände mig säker/trygg. • Det här förstod 
 jag inte riktigt. • Det här gjorde mig nervös, som om något dåligt skulle kunna hända. Vi och våra leverantörer lagrar och/eller får åtkomst till information på en enhet, exempelvis cookies, samt bearbetar personuppgifter, exempelvis unika identi fi erare och standardinformation som skickas av en enhet för personanpassade annonser och andra typer av innehåll, annons- och innehållsmätning samt målgruppsinsikter, samt för att utveckla och förbättra produkter. Med din tillåtelse kan vi och våra leverantörer använda exakta uppgifter om geogra fi sk positionering och identi fi ering via skanning av enheten. Du kan klicka för att godkänna vår och våra leverantörers uppgiftsbehandling enligt beskrivningen ovan. Alternativt kan du få åtkomst till mer detaljerad information och ändra dina inställningar innan du samtycker eller för att neka samtycke. Observera att viss behandling av dina personuppgifter kanske inte kräver ditt samtycke, men du har rätt att invända mot sådan uppgiftsbehandling. Du kan när som helst ändra dina preferenser genom att återvända till den här webbplatsen eller besöka vår integritetspolicy. Välj de egenskper 
 du vill kolla!
26. Jonas Söderström • 2022 Vilka är UX-skribentens viktigaste verktyg? 
 Programvara/onlineverktyg etc som är bra att ha koll på? Figma är för närvarande det mest populära programmet för ux/ui-design. Ändras snabbt.
27. Jonas Söderström • 2023 Ett par frågor
28. Jonas Söderström • 2022 Finns det någon modell/process/upplägg/steg-för-steg-guide att utgå från om man ska ta sig an ett "förbättringsprojekt"? Dvs att det är en redan existerande app/system/program där man ska gå in och styra upp och förbättra UX-texten?
29. Jonas Söderström • 2022 ”UX-process”
30. Jonas Söderström • 2022 Design thinking, service design, tjänstedesign, UX-process
31. Jonas Söderström • 2022 Double diamond
32. Jonas Söderström • 2022
33. Jonas Söderström • 2022
34. Designprocess 35
35. Oavsett hur omfattande ett projekt är; oavsett om vi arbetar med hela processen från start till mål eller bara med en enstaka del, 
 så har vi ett antal grundtankar som genomsyrar varje åtagande – stort som litet. 
 Här redovisar vi kort tre av dem. Våra grundtankar 1. Mervärdet av att arbeta i team 2. Vikten av att i varje situtation 
 lyssna, lära och ompröva 3. Alla ska med
36. Grundtankar Ett team är mer än summan av sina delar. Ett team gör att vi kan säkra mångfald och bredd. Vi sätter ihop team för de uppdrag vi får och de problem som ska lösas. Medlemmarna har olika kompetenser och olika bakgrunder: vi skapar tvärfunktionella grupper där unga konsulter med de färskaste kompetenserna paras ihop med seniora konsulter med lång erfarenhet. Konsulter med erfarenhet från e-handel kan ge värdefulla insikter till uppdrag i offentlig sektor. En bakgrund i systemutveckling ger nya perspektiv på visuell design. Teamwork betyder också färre överlämningar, och mindre risk för att insikter och kunskaper går förlorade under processen gång. Vi vet helt enkelt att samarbete ger bättre kvalitet till dig som kund. 1. Arbeta i team
37. Våra grundtankar Upptäcka - Hitta insikter - Förfina och lägga till detaljer - Främja gemensam förståelse - Dokumentera 
 Skapa - Utforma idéer - Ta fram skisser och prototyper 
 Validera - Säkra att våra antaganden och 
 lösningar stämmer med faktiska behov - Kvalitativa eller kvantitativa metoder Vår designprocess består av flera steg, där vi för ihop stakeholders, slutanvä n­ dare och våra egna yrkesdiscipliner. I varje steg har vi fokus på att ställa rätt ­ frågor, förstå de nödvändiga sammanhangen, och säkra att våra slutsatser stämmer överens med verkligheten. Lärdomar från ett steg skapar så grunden för följande steg. Upptäcka Skapa Validera 2. Lyssna, lära och ompröva
38. Grundtankar Att skapa inkluderande tjänster 
 är en av våra grundstenar. Vi är övertygade om att tillgänglighet ger 
 en bättre användarupplevelse för alla, 
 inte bara för vissa specifika målgrupper. Vi säkrar att visuell design, interaktion och kod 
 i våra lösningar följer WCAG. Vi ser också till att skapa kognitiv tillgänglighet 
 genom lättförståelig text (UX copy) och form 
 som hjälper människor med kort uppmärksamhet 
 att fokusera. I user research och användningstester ser vi till att arbeta med så heterogena grupper som möjligt, så att förslag granskas ur ett mångfaldsperspektiv. ✓ Det finns permanenta hinder 
 som till exempel nedsatt syn. ✓ Att ha en skadad arm 
 är ett temporärt hinder. ✓ Ett situationellt hinder 
 kan vara att ha en bebis på armen 
 och begränsad koncentrationsförmåga. 3. Alla ska med.
39. 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
40. 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 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
41. 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 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
42. 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 
 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
43. I vårt idéarbete gör vi … 44 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
44. 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
45. 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 
 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
46. 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 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? 

47. Jonas Söderström • 2022 Nudging
48. Jonas Söderström • 2022 ”Nudging” • ”Knu ff a” – att påverka i riktning till ett önskat beteende. • Mindre att undervisa/förklara. 
 En de fi nition är att nudging 
 inte tillför ny information, 
 bara påminner. • Designval som framhäver ett alternativ, och gör andra mindre omedelbara.
49. Jonas Söderström • 2022 Trappor eller hiss? Mindre tallrikar
50. Jonas Söderström • 2022 Nudging = 
 design och ux-text Ja, skicka mig nyhetsbrev Nej tack, inga utskick
51. Jonas Söderström • 2022 Handdukar och restskatt • Att inte byta handdukar 
 varje dag är bra för miljön. • Åtta av tio gäster 
 på det här hotellet 
 behåller handdukarna 
 under vistelsen. • Åtta av tio gäster 
 i det här rummet 
 behåller handdukarna 
 under vistelsen. • Betala din restskatt i tid! • Åtta av tio i detta postnummerområde 
 betalar restskatten i tid. • Åtta av tio på den här gatan betalar restskatten i tid. 🤔 Men det kanske bara är en initial effekt som går över?
52. Jonas Söderström • 2022 ”Sludge” • Design som avser att hindra oss från att göra vissa saker • Lätt att prenumerera, 
 svårt att säga upp • ”Dark patterns”
53. Jonas Söderström • 2023 Bilder på webb
54. Jonas Söderström • 2023 Vi kommunicerar inte bara med skrivna ord … 
 … även bilder talar.
55. Jonas Söderström • 2023 Bilder på webben är (oftast) små
56. Jonas Söderström • 2023 Därför måste de vara 
 starkt laddade 
 för att ha en visuell ”impact”!
57. Jonas Söderström • 2023 Det viktigaste är 
 att beskära tätt – att zooma in 
 på de väsentliga delarna 
 av motivet i bilden!
58. Jonas Söderström 2022
59. Jonas Söderström 2022
60. Jonas Söderström 2022
61. Jonas Söderström 2022
62. Jonas Söderström 2022 Det finns inte mycket av intresse här! Resultatet blir en utspädning 
 av värdet på bilden …
63. Jonas Söderström 2022
64. Jonas Söderström 2022
65. Jonas Söderström 2022 Den här bilden kommunicerar och går fram på ett helt annat sätt!
66. Jonas Söderström 2022
67. Jonas Söderström 2022
68. Jonas Söderström 2022 Utspädning 
 av kraften!
69. Jonas Söderström 2022 Mycket tydligare fokus!
70. Jonas Söderström 2022
71. Jonas Söderström 2022 I stort format – hängd på en utställningsvägg! – kan den här bilden funka bra. Det fi nns ett djup. Men när bilden blir så liten som på webbsidan, tappar den sin styrka.
72. Jonas Söderström 2022
73. Jonas Söderström 2022 De är fortfarande på väg – men mycket tydligare
74. Jonas Söderström 2022
75. Jonas Söderström 2022
76. Jonas Söderström 2022 Även här kan vi gå närmare in!
77. Jonas Söderström 2022
78. Jonas Söderström 2022 Jämför:
79. Jonas Söderström 2022 Originalet
80. Jonas Söderström 2022 Bättre - men vi kan fokusera ännu mer!
81. Jonas Söderström 2022
82. Jonas Söderström 2022 Lutad horisont, mer dramatisk beskärning, suddig bakgrund förstärker känsla av snabbhet, brådska
83. Jonas Söderström 2022 Originalet
84. Jonas Söderström 2022 Originalet
85. Jonas Söderström 2022
86. Jonas Söderström 2022 Zooma in ännu mer för att förstärka budskapet i rubriken!
87. Jonas Söderström 2022 Originalet igen
88. Jonas Söderström • 2023 Vecka 17 Tisdag April 25 Genomgång uppgift 3 Torsdag April 27 Avslutning! AW från ca 17.00 
 Urban Deli, Nytorget, Stockholm Torsdag Maj 4 Frivilligt!