Träff #21 • IxD • 29 maj • vt 24 UX Writing • Nackademin.

Transcript

1. Jonas Söderström • 2024 Interaktionsdesign UX process UX writing • Trä ff #21 • Onsdag 29 maj Jonas Söderström • Nackademin • Vt 2024
2. Jonas Söderström • 2023 Din uppgift: Text i ett tänkt system för smitto-begränsning G • SMS: Du riskerar att ha blivit smittad (=varit nära någon smittad). Här är en länk till landningssida med instruktioner. • Landningssidan med instruktioner om vad du ska göra (isolera dig, beställa test). VG • Dementi-SMS: Det var falskt alarm, du var utom risk (just då).
3. Jonas Söderström • 2024 Attityder hos befolkningen Jag får panik av att höra om detta Jag litar på myndigheterna Vet man om det är säkert? Jag tror inte på det där Få så många som möjligt att följa råden
4. Jonas Söderström • 2023 Din uppgift – gäller både G och VG: • Välj en målgrupp som du utformar dina förslag för. • Motivera varför du valt den. • Anpassa ton, välj innehåll, utformning för din målgrupp. • Utförlig skriftlig beskrivning kommer att fi nnas på Studentportalen och i Slack. • Inlämning på Studentportalen senast måndag 10 juni kl 23.59.
5. Jonas Söderström • 2024 Lite repetition
6. Jonas Söderström • 2024 A Typsnittsformer A Linjär Grotesk Sans serif Antikva Serif-typsnitt Medieval- antikva Garald Didon Nyantikva A Mekan Egyptienne Slab serif A Real Transantikva A
7. Jonas Söderström • 2024 oceas oceas Slutna former gör bokstäverna svåra att skilja från varandra i små grader oceas 38 Mabry Myriad BBC Reith Helvetica 29 Mabry 29 Open Sans 38 oceas Myriad Helvetica Öppna bokstavsformer bidrar till bra läsbarhet, särskilt i små grader
8. Jonas Söderström • 2024 Ill Bokstavsformer och bokstavspar bör vara distinkta! Ill Helvetica Tahoma Ill Trebuchet nh Arial Avenir nh Ill Atkinson Hyperlegible lo b Helvetica Trebuchet lo b lo b Atkinson Hyperlegible
9. Jonas Söderström • 2024 Bra typsnitt: • PT Sans • Open Sans • Ubuntu • Myriad • Lato • Atkinson Hyperlegible • BBC Reith • PT Serif • Georgia • Adobe Garamond • Minion • Times
10. Jonas Söderström • 2024 While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced Långa rader kräver mer radavstånd. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well- informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and Radavstånd 1 rad Radavstånd 1,3 rader
11. Jonas Söderström • 2024 While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Försök att hålla ihop tankar och uttryck över radbrytningar. • Mellan preposition och sitt huvudord (i Stockholm) • Mellan verb och verbpartikel (bryta av) • Mellan antals-si ff ra och sitt huvudord (100 slajds) • Mellan bestämd artikel och sitt huvudord (ett bord) • I sammansatta uttryck (project manager) • Efter första ordet i en mening • Efter första ordet i en bisats (… sajten, som …) Bryt helst inte:
12. Jonas Söderström • 2024 While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Typogra fi uttrycker tonläge
13. Jonas Söderström • 2024 Interaktionsdesign
14. Jonas Söderström • 2024 Vadå interaktionsdesign? 🤔
15. Jonas Söderström • 2024 Vadå IxD? 🤔
16. Jonas Söderström • 2024 Vad lätt att hitta! Vad lätt att förstå! Vad snyggt! Vad häftigt! Vad enkelt! Så lätt att göra!
17. Jonas Söderström • 2024 Se Uppleva Känna Hitta Tolka Förstå Agera Handla Göra Visuell design Infor- mations- design Inter- aktions- design Användarens fokus
18. Jonas Söderström • 2024 Färg, form, linje, skuggor …
19. Jonas Söderström • 2024 Vilka rubriker ska vi ha? Hur många? I villken ordning? Vad placeras under varje rubrik? Information Service Tjänster Om Process
20. Jonas Söderström • 2024 Och vad kan man göra? Information Service Tjänster Om Process • Vad kan man göra med menyn? • Hur reagerar den vid mouseover? • Om man klickar på den? Tjänster • Går man till en annan sida? • Fälls det ut en undermeny? •Fälls den ihop eller stannar? • Om man klickar på en annan tab?
21. Jonas Söderström • 2024 Hund Katt Husdjur Välj husdjur Hund Katt V Husdjur Hund Katt X Katt Hund Varg Tiger Katt Ka Katt Kamel Kameleont Kanin
22. Jonas Söderström • 2024 Informationsdesign: Vad står det på menyn? Husdjur Välj husdjur Hund Katt V I bokstavs- ordning? Är ”husdjur” ett bra samlande begrepp? Fiskar Iller Papegoja Råtta Undulat Eller lägga de vanligaste först? ”Fiskar” … eller ”Akvariefiskar”?
23. Jonas Söderström • 2024 Vara Frakt Betalning Bekräfta Försäkring Grafisk design: Flöden kräver normalt tre designer (färg, form, typ) Interaktions- design: Hur många steg är rimligt, eller nödvändigt på grund av teknik? Informations- design: Vad kallar vi de olika stegen? Får de rum? Både och: I vilken ordning kommer de? Vad innehåller varje steg?
24. Jonas Söderström • 2024 Speci fi ka interaktions-sätt
25. Jonas Söderström • 2024 Inte bara input
26. Jonas Söderström • 2024 Vad enkelt! Så lätt att göra! Så bra – postadressen hämtades direkt när jag fyllt i postnumret ’’ Snyggt, den bytte till si ff ertangenterna när jag klickade i fältet för telefonnummer! ’’ Automatisering – besparar oss ”onödig” interaktion! Wow, den stopppade spelningen av låten när hörlurskontakten rycktes ur! ’’
27. Jonas Söderström • 2024 • Ta skärmdump • Stänga denna och gå till hemskärmen • Öppna Bilder • Markera bilden • Kopiera bilden • Stäng Bilder och gå till hemskärmen • Öppna Telegram • Välja kanal • Klistra in bild • Skicka
28. Jonas Söderström • 2024
29. Jonas Söderström • 2024 Ordningsföljd
30. Jonas Söderström • 2024 Välj försäkring Bas Stor V Husdjur Hund Katt X
31. Jonas Söderström • 2024 Välj försäkring Bas Stor V Husdjur Hund Katt X
32. Jonas Söderström • 2024 •Eller ange resenärer först?
33. Jonas Söderström • 2024
34. Jonas Söderström • 2024 Constraints ≈ Saker vi hindrar användaren att göra
35. Jonas Söderström • 2024 Inaktiv
36. Jonas Söderström • 2024 Aktiv
37. Jonas Söderström • 2024 Den som inte tar bort luddet från torktumlaren ska dö!
38. Jonas Söderström • 2024
39. Jonas Söderström • 2024
40. Jonas Söderström • 2024
41. Jonas Söderström • 2024
42. Jonas Söderström • 2024 Paus till 16.05!
43. Jonas Söderström • 2024 Prioritering - hierarki ≈ Saker vi ”nudgar” användaren att göra
44. Jonas Söderström • 2024 Ja, gör det! Nej, avbryt
45. Jonas Söderström • 2024 När hierarkin blir fel…
46. Jonas Söderström • 2024
47. Jonas Söderström • 2024
48. Jonas Söderström • 2024
49. Jonas Söderström • 2024
50. Jonas Söderström • 2024
51. Jonas Söderström • 2024
52. Jonas Söderström • 2024
53. Jonas Söderström • 2024
54. Jonas Söderström • 2024
55. Jonas Söderström • 2024 Inget varningsmeddelande! UX COPY FAIL!
56. Jonas Söderström • 2024
57. Jonas Söderström • 2024
58. Jonas Söderström • 2024 Nu vill jag göra … Börjar använda Hur ser det här ut? Var finns det jag söker? Det går inte! 🤬 Kan inte hitta – sticker 😠 Fult, konstigt – sticker 🙁 När dålig ui-design ger användarna en dålig upplevelse
59. Jonas Söderström • 2024 Ergonomi
60. Jonas Söderström • 2024 Från 145 till 313 klick Med nya systemet: Godkänna ny vapenlicens
61. Jonas Söderström • 2024
62. Jonas Söderström • 2024 Min scanner-programvara
63. Jonas Söderström • 2024
64. Jonas Söderström • 2024
65. Jonas Söderström • 2024
66. Jonas Söderström • 2024
67. Jonas Söderström • 2024
68. Jonas Söderström • 2024 Några interaktionsprinciper
69. Jonas Söderström • 2024 Anpassa till användarna och till verksamheten
70. Jonas Söderström • 2024 Gör tydligt i vilket läge systemet är
71. Jonas Söderström • 2024 Information Service Om Process Tjänster Exempel: Menyn visar alltid var användaren är
72. Jonas Söderström • 2024 Vara Frakt Betalning Bekräfta Försäkring Flöden kräver normalt tre design-varianter (färg, form, typ)
73. Jonas Söderström • 2024 Vara Frakt Betalning Bekräfta Försäkring Frakt Betalning Försäkring
74. Jonas Söderström • 2024 Ge användaren kontroll…
75. Jonas Söderström • 2024 Till betalning > < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Ångra/backa är nedtonad Primär action är tydligast …som möjlighet att backa.
76. Jonas Söderström • 2024 Till betalning > < Tillbaka till frakt Hitta försäkring Om det finns flera alternativ framåt får de olika vikt i designen
77. Jonas Söderström • 2024 UX-text hjälper till Till betalning > Avbryt < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Lugn! Du kan ändra varan även i nästa steg
78. Jonas Söderström • 2024 Automatisera repetitiva uppgifter – minska belastning
79. Jonas Söderström • 2024
80. Jonas Söderström • 2024 Mikro-friktioner Ibland ska man inte göra det för enkelt
81. Jonas Söderström • 2024 Avsluta-knappen i Zoom fl yttar sig, för att förhindra att man avslutar av missstag.
82. Jonas Söderström • 2024 Superenkel bekräftelse med ansikts- igenkänning … men av fel vara. https://www.linkedin.com/posts/sara-wennersten_sl- tra fi kfaemrvaltningen-ux-activity-6839490107892871168-ybqm
83. Jonas Söderström • 2024 Gör det svårt att göra fel
84. Jonas Söderström • 2024 Gör det enkelt att ångra /rätta
85. Jonas Söderström • 2024 Medge flera användningssätt Gör inte olika – hitta standarder
86. Jonas Söderström • 2024
87. Jonas Söderström • 2024 Takeaways: Anpassa till användarna och till verksamheten
88. Jonas Söderström • 2024 Takeaways: • Gör tydligt i vilket läge systemet är • Ge användaren maximal kontroll • Automatisera repetitiva eller enkla uppgifter – minska belastning • Gör det svårt / omöjligt att göra fel • Gör det enkelt / möjligt att ångra eller rätta • Använd mikrofriktioner för att motverka ”slarvfel” • Respektera/använd närhetens lag och likhetens lag • Medge fl er sätt att interagera • Sträva efter konsistens och använd standards
89. Jonas Söderström • 2024 ”UX-process”
90. Jonas Söderström • 2024 Design thinking, service design, tjänstedesign, UX-process
91. Jonas Söderström • 2024 Sex steg Stanford
92. Jonas Söderström • 2024
93. Jonas Söderström • 2024
94. Jonas Söderström • 2024 UX på svenska Torbjörn Ryber: Modern UX 2021
95. Jonas Söderström • 2024 UX på svenska Mattias Arvola: Interaktionsdesign och UX – om att skapa en god användar- upplevelse 2022
96. Jonas Söderström • 2024 Onsdag Juni 5 Onsdag Juni 12 Onsdag Juni 19 = lämna in uppgift 3 senast måndag 10 juni kl 23.59 Avslutning SEO. Testa text. Genomgång uppgift 3.
97. Jonas Söderström • 2024 Onsdag Juni 19 Avslutning 🏆 🥂 🎉 🍾 🎂