Vad är IxD • mån 30 okt • UX23 • ht 23 Nackademin

Transcript

1. Jonas Söderström • 2023 Vad är interaktionsdesign? Jonas Söderström • Måndag 30 okt 2023 Interaktionsdesign och prototyping • ht 23 • UX 23 Nackademin
2. Jonas Söderström • 2023 Vad är … UX? Service design? Design thinking? Usability? Product design? Visceral design? UI design? Experience design? Visual design? Human factors? Information design? Behavioural design?
3. Jonas Söderström • 2023
4. Jonas Söderström • 2023
5. Jonas Söderström • 2023
6. Jonas Söderström • 2023
7. Jonas Söderström • 2023
8. Jonas Söderström • 2023
9. Jonas Söderström • 2023
10. Jonas Söderström • 2023 NONSENS
11. Jonas Söderström • 2023 Vad är ”UX”? 🤔
12. Jonas Söderström 2023 Vi ska bygga … . . . en webbsajt
13. Jonas Söderström • 2023
14. Jonas Söderström • 2023
15. Jonas Söderström • 2023
16. Jonas Söderström 2023 Färg, form, linje, skuggor …
17. Jonas Söderström 2023 … typsnitt Information Men vad innehåller flikarna? Vad heter avdelningarna?
18. Jonas Söderström 2023 Vad placeras under respektive rubrik? Hur många avdelningar? I villken ordning kommer de? Information Service Tjänster Om Process
19. Jonas Söderström 2023 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?
20. Jonas Söderström • 2023 Visuell design Infor- mations- design Inter- aktions- design Se, uppleva, känna Hitta, tolka, förstå Agera, handla, göra User interface – gränssnitt
21. Jonas Söderström • 2023 Uppgift: snabb gruppdiskussion • Försök komma på exempel på tjänster (sajter, appar, system …) som nästan enbart präglas av antingen: • Visuell design • Informationsdesign • Interaktionsdesign
22. Jonas Söderström • 2021 Snabb gruppdiskussion
23. Jonas Söderström • 2023 Vi byter perspektiv
24. Jonas Söderström • 2023 Vad ”innehåller” en digital produkt / tjänst? • Fyra perspektiv
25. Jonas Söderström • 2023 Fyra perspektiv på en digital produkt / tjänst • Gör tjänsten något värdefullt? • Fyller den ett behov? Syfte, innehåll
26. Jonas Söderström • 2023
27. Jonas Söderström • 2023 Fyra perspektiv på en digital produkt / tjänst • Är den tekniskt stabil, tillförlitlig, kompatibel…? Teknik, kod, hårdvara
28. Jonas Söderström • 2023 Fyra perspektiv på en digital produkt / tjänst • Läcker inte persondata • Svår att hacka • Mina pengar oåtkomliga Säkerhet, integritet
29. Jonas Söderström • 2023 Fyra perspektiv på en digital produkt / tjänst • Behaglig, enkel att använda Design
30. Jonas Söderström • 2023 Vad ”innehåller” en digital produkt / tjänst? Låt oss zooma in på design! Design Syfte, innehåll Teknik, kod, hårdvara Säkerhet, integritet
31. Jonas Söderström • 2023 Vad lätt att hitta! Vad lätt att förstå! Vad snyggt! Vad häftigt! Vad enkelt! Så lätt att göra!
32. Jonas Söderström • 2023 Vad enkelt att anmäl sig! Toppen! Hittar sajten Det här ser snyggt, coolt, seriöst ut! Ah, här finns kvällskursen om vikingatiden! UX – vad människor upplever när de använder din app, sajt, tjänst 😀
33. Jonas Söderström • 2023 Men WTF … varför kan jag inte hitta? Fula färger… tråkiga bilder…. &%£#! 11 klick för att komma vidare!?!
34. Jonas Söderström • 2023 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
35. Jonas Söderström • 2023 Visuell design Infor- mations- design Inter- aktions- design Se, uppleva, känna Hitta, tolka, förstå Agera, handla, beställa Användarens fokus
36. Jonas Söderström 2023 UX är (strängt taget) ett kvalitetsmått på slutresultatet
37. Jonas Söderström • 2023 Visuell design Infor- mations- design Inter- aktions- design DESIGN (”UI”) UX 🙁 😀 🙂
38. Jonas Söderström • 2023 HASTIGHET DESIGN 11 186 m/s bränsle form motor
39. Jonas Söderström 2023 UX är (strängt taget) ett kvalitetsmått på slutresultatet … men …
40. Jonas Söderström 2023 UX har blivit en paraplyterm (egentligen yrket designer) (egentligen mest interaktionsdesign) (egentligen user research) (egentligen designprocess) … ja, vadå? UX-are UX-design UX-research UX-process UX-writing
41. Jonas Söderström • 2023 Se Uppleva Känna Hitta Tolka Förstå Agera Handla Göra Visuell design Infor- mations- design Inter- aktions- design Användarens fokus
42. Jonas Söderström • 2023 Talsvarssystem?
43. Jonas Söderström • 2023 Dialekt, röstkvalitet, talhastighet, prosodi Meny- organisation: ”tryck 1 för x, tryck 2 om du vill … Tid för att reagera? ”Press ahead”? User Interface / Gränssnitt Voice
44. Jonas Söderström • 2023 Visceral design Infor- mations- design Inter- aktions- design Utseende, ljud, berörings- känsla, doft … Hitta, förstå, tolka Göra, handla, agera ”Direkt till sinnena”
45. Jonas Söderström • 2023 Visuell design Infor- mations- design Inter- aktions- design Se, uppleva, känna Hitta, tolka, förstå Agera, handla, göra User interface – gränssnitt
46. Jonas Söderström • 2023 Ambition? • Stora resurser spenderas traditionellt på visuell (gra fi sk) design • Informationsdesign – på senare tid har man börjat inse vikten (”ux copy”) • Interaktionsdesign – fi ck fart under 2000-talet.
47. Jonas Söderström • 2023 Risk? • Svag visuell design är den största tröskeln för att acceptera och börja använda en tjänst • Användare dömer digitala system mycket snabbt! • Svag informationsdesign är det största problemet i användning • Svag interaktionsdesign har största potential att skada ditt varumärke och dina kundrelationer under lång tid
48. Jonas Söderström • 2023 Interaktionsdesign: att designa hur användarna konkret interagerar med en tjänst eller produkt
49. Jonas Söderström • 2023 Interaktionsdesign är mycket brett: Detaljkontroller Kompletta systems funktioner
50. Jonas Söderström • 2023 Hund Katt Husdjur Välj husdjur Hund Katt V Husdjur Hund Katt X Katt Hund Varg Tiger
51. Jonas Söderström • 2023 Speci fi ka interaktions-sätt
52. Jonas Söderström • 2023 Automatisering 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! ’’ Besparar oss ”onödig” interaktion!
53. Jonas Söderström • 2023 Ordningsföljd (processer och flöden)
54. Jonas Söderström • 2023 Välj försäkring Bas Stor V Husdjur Hund Katt X
55. Jonas Söderström • 2023 Välj försäkring Bas Stor V Husdjur Hund Katt X
56. Jonas Söderström • 2023 Kan man backa? Kan man ångra? Kan man avbryta? Kan man hoppa över?
57. Jonas Söderström • 2022 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? 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?
58. Jonas Söderström • 2022 Informationsdesign (inklusive ux-text) 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”?
59. Jonas Söderström • 2023
60. Jonas Söderström • 2023 Constraints ≈ Saker vi hindrar användaren att göra
61. Jonas Söderström • 2023 Inaktiv
62. Jonas Söderström • 2023 Aktiv
63. Jonas Söderström • 2023 Den som inte tar bort luddet från torktumlaren ska dö!
64. Jonas Söderström • 2023
65. Jonas Söderström • 2023
66. Jonas Söderström • 2022 Erbjuda alternativ Gör inte olika – hitta standarder
67. Jonas Söderström • 2022
68. Jonas Söderström • 2023 Prioritering - hierarki ≈ Saker vi ”nudgar” användaren att göra
69. Jonas Söderström • 2023 Ja, gör det! Nej, avbryt
70. Jonas Söderström • 2023
71. Jonas Söderström • 2023
72. Jonas Söderström • 2023 När hierarkin blir fel…
73. Jonas Söderström • 2023
74. Jonas Söderström • 2023
75. Jonas Söderström • 2023
76. Jonas Söderström • 2023
77. Jonas Söderström • 2023
78. Jonas Söderström • 2023
79. Jonas Söderström • 2023
80. Jonas Söderström • 2023
81. Jonas Söderström • 2023
82. Jonas Söderström • 2023 Ergonomi
83. Jonas Söderström • 2023 Från 145 till 313 klick Godkänna ny vapenlicens
84. Jonas Söderström • 2023
85. Jonas Söderström • 2023
86. Jonas Söderström • 2023
87. Jonas Söderström • 2023
88. Jonas Söderström • 2023
89. Jonas Söderström • 2023 IxD i röststyrda system?
90. Jonas Söderström • 2023 ” ’My speech is slow, and I slur some words’, said Dagmar Munn, a retired wellness instructor who has amyotrophic lateral sclerosis. ’Although I am careful to enunciate and carefully pronounce a command, the device stops listening by my second word. I just can’t speak fast enough to satisfy the preset listening time,’ Ms. Munn said.” Interaktions -design!
91. Jonas Söderström • 2023 Visceral design Infor- mations- design Inter- aktions- design Haptik (vibration) Hitta, förstå, tolka Göra, handla, agera ”Direkt till sinnena”
92. Jonas Söderström • 2023 Haptik (vibration)
93. Jonas Söderström • 2023 IxD finns överallt
94. Jonas Söderström • 2023
95. Jonas Söderström • 2023
96. Jonas Söderström 2023 Statiska Förklara interaktion
97. Jonas Söderström • 2023
98. Jonas Söderström • 2023 Vad är signifiers?
99. Jonas Söderström 2023 ”Signifiers” (”A ff ordances”) (”A ff ordances”) Håll här Lägg något här
100. Jonas Söderström 2023 ”Signifiers” (”A ff ordances”) (”A ff ordances”) Huh? ???
101. Jonas Söderström • 2023 Don Norman: The design of everyday things
102. Jonas Söderström • 2023 ”Signifiers” (”A ff ordances”) 3 av 4 uppfattade detta som en knapp och tryckte på den för att beställa
103. Jonas Söderström • 2023 När vi jobbar med interaktionsdesign
104. Jonas Söderström • 2023 Visuell design Infor- mations- design Inter- aktions- design DESIGN (”UI”) UX 🙁 😀 🙂
105. Jonas Söderström • 2023
106. Jonas Söderström • 2023 Vad kunderna kan säga UI-designer Visuell design Infor- mations- design Inter- aktions- design Grafisk designer Visuell designer Art Director Informations- designer -arkitekt (IA) UX-copy Interaktions- designer UX-designer Experience designer
107. Jonas Söderström • 2023 Informationsdesign: Etiketter, rubriker, textdesign: stycken, urval, SEO Informativa bilder: kartor, diagram instruktioner, symboler, tabeller Interaktionsdesign Knappar, menyer, fl öden, inloggad eller ej, mouseover, progress bar Vad vi arbetar med Visuell design: Färg, animeringar, bildmanér, typogra fi , grid, storlekar, styrkor
108. Jonas Söderström 2023 Om vi jobbar med design, vilka är våra grannar?
109. Jonas Söderström • 2023 Visuell design Informations- design Interaktions- design Utvecklare Kommunikatörer Verksamhets- representanter Varumärkes- folk Frontend- utvecklare
110. Jonas Söderström • 2023 Ikoner Bildmanér Moodboard Grafisk profil Färgscheman Visuell identitet Typografispecar Färdig CSS (style sheet) Visuell design Infor- mations- design Inter- aktions- design Vad behöver kunden? Typiska leverabler UX-copy Flödesdiagram, skisser, wireframes, prototyper Design- system Webbstrukturer
111. Jonas Söderström • 2023 Skisser
112. Jonas Söderström • 2023
113. Jonas Söderström • 2023 Wireframes
114. Jonas Söderström 2023 Innehåll på bred sida. Visas här utan meny, navigation eller sidfot. Brödsmulor visar hierarkin Upp- daterad senast Call-to-action: Länk till verktyg, tjänst eller liknande. Kan fi nnas fl er än en. H2 H1 H3 Kontakt-person är länkad men inte publicerare Ingress Senast uppdaterad visas inte under texten, enbart upptill Wireframe
115. Jonas Söderström 2023 Brödsmulor visar hierarkin Upp- daterad senast Call-to-action: Länk till verktyg, tjänst eller liknande. Kan fi nnas fl er än en. H2 H1 H3 Kontakt-person är länkad men inte publicerare Ingress Senast uppdaterad visas inte under texten, enbart upptill Nu med gra fi sk design Innehåll på bred sida. Visas här utan meny, navigation eller sidfot.
116. Jonas Söderström • 2023 Med meny, sidhuvud, -fot
117. Jonas Söderström • 2023 Det viktigaste sker i samarbets- områdena!
118. Jonas Söderström • 2023 Visuell design Infor- mations- design Inter- aktions- design User Interface / Gränssnitt Vi sätter olika färg på tabbarna så blir det lättare att hitta Animeringar gör interaktionen tydligare Klickbara taggar tar en till relaterat innehåll
119. Jonas Söderström • 2023
120. Jonas Söderström • 2023 Er uppgift • Jobba enskilt, eller i par – eller max som trio. • Hitta och utforska två exempel på interaktionsdesign. • Digitalt, kombinerat analogt–digitalt, eller helt analogt • Försök kartlägga och rimligt detaljerat beskriva vad användaren gör, steg för stega. • Leta efter exempel på ordning, constraints, prioriteringar, hierarki , ergonomi – bättre eller sämre. Fundera över varför har de valt de lösningar de gjort?
121. Jonas Söderström • 2023 Kolla till exempel efter • Kan samma sak göras på flera sätt? • Får man feedback? • Kan man backa? • Kan man göra fel? • Kan man ångra? • Kan man avbryta? • Kan man hoppa över?
122. Jonas Söderström • 2023 Exempel på möjlig saker att kolla • Enkla digitala spel • Träningsapp från gymkedja • Parkeringsappar • Studentportalen • Dela innehåll från ngt till annan kanal • Antal manövrer (steg, klick) för att betala räkning • Bokning av tvättstugan
123. Jonas Söderström • 2023 Redovisning: • Beskriv / dokumentera din spaning. • Lämpligt format kan vara 2–4 powerpoint-slajds per tjänst, med några skärmdumpar eller foton och kommentarer. • Spara som pdf. • Döp fi len med namn och initial först, och därefter "uppgift 1 IxD" – alltså till exempel ”Eva E och Anna A uppgift 1 IxD". • Ladda upp via studentportalens inlämningslänk. • Var beredd att visa och kortfattat berätta om din spaning på lektionen på fredag.