Vad är interaktionsdesign?

Transcript

1. Jonas Söderström • 2022 Vad är interaktionsdesign? Jonas Söderström • Måndag 11 okt 2022 Interaktionsdesign och prototyping • Nackademin ht 22
2. Jonas Söderström • 2022 Vadå interaktionsdesign? 🤔
3. Jonas Söderström • 2022 Vadå IxD? 🤔
4. Jonas Söderström • 2022 Akademiska de fi nitioner ”utforma platser för mänsklig kommunikation och interaktion” Winograd ”frågorna varför och hur i våra dagliga interaktioner när vi använder datorbaserade system” Thackara ”konsten att underlätta interaktioner mellan människor genom produkter och tjänster ” Dan Sa ff er
5. Jonas Söderström • 2022 Praktisk definition – 
 utgå från användaren
6. Jonas Söderström • 2022 Vilka bra recept! Vilka snygga skor!
7. Jonas Söderström • 2022 Vilka bra recept! Vilka snygga skor! Syfte / innehåll
8. Jonas Söderström • 2022 Vilka bra recept! Vilka snygga skor! Vilken snabb sajt! Den här appen kraschar aldrig! Syfte / innehåll Teknik
9. Jonas Söderström • 2022 Vilka bra recept! Vilka snygga skor! Vilken snabb sajt! Den här appen kraschar aldrig! Syfte / innehåll Teknik Design
10. Jonas Söderström • 2022 Syfte / innehåll Teknik Design
11. Jonas Söderström • 2022 Vad lätt att hitta! Vad lätt att förstå! Vad snyggt! Vad häftigt! Vad enkelt! Så lätt att göra!
12. Jonas Söderström • 2022 Se Uppleva Känna Hitta Tolka Förstå Agera Handla Göra Visuell design Infor- 
 mations- 
 design Inter- 
 aktions- 
 design Användarens fokus
13. Jonas Söderström • 2022 Men WTF … varför kan jag inte hitta? Fula färger… tråkiga bilder…. &%£#! 11 klick för att komma vidare!?!
14. Jonas Söderström • 2022 Visuell design Infor- 
 mations- 
 design Inter- 
 aktions- 
 design DESIGN (”UI”) UX 🙁 😀 🙂
15. Jonas Söderström • 2022 HASTIGHET DESIGN 11 186 m/s bränsle form motor
16. Jonas Söderström • 2022 Färg, form, linje, skuggor …
17. Jonas Söderström • 2022 Vilka rubriker ska vi ha? Hur många? I villken ordning? 
 Vad placeras under varje rubrik? Information Service Tjänster Om Process
18. Jonas Söderström • 2022 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?
19. Jonas Söderström • 2022 Hund Katt Husdjur Välj husdjur Hund Katt V Husdjur Hund Katt X Katt Hund Varg Tiger
20. Jonas Söderström • 2022 Speci fi ka interaktions-sätt
21. Jonas Söderström • 2022 Ordningsföljd
22. Jonas Söderström • 2022 Välj försäkring Bas Stor V Husdjur Hund Katt X
23. Jonas Söderström • 2022 Välj försäkring Bas Stor V Husdjur Hund Katt X
24. Jonas Söderström • 2022
25. Jonas Söderström • 2022
26. Jonas Söderström • 2022 Constraints ≈ Saker vi hindrar användaren att göra
27. Jonas Söderström • 2022 Inaktiv
28. Jonas Söderström • 2022 Aktiv
29. Jonas Söderström • 2022 Den som inte tar bort luddet 
 från torktumlaren ska dö!
30. Jonas Söderström • 2022
31. Jonas Söderström • 2022
32. Jonas Söderström • 2022 Prioritering - hierarki ≈ Saker vi ”nudgar” användaren att göra
33. Jonas Söderström • 2022 Ja, gör det! Nej, avbryt
36. Jonas Söderström • 2022 När hierarkin blir fel…
46. Jonas Söderström • 2022 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 

47. Jonas Söderström • 2022 Interaktionsdesign Smal Bred Speci fi ka interaktions- detaljer Allt arbete med interaktiva (digitala?) produkter
48. Jonas Söderström • 2022 Interaktionsdesign Smal Bred Speci fi ka interaktions- detaljer Allt arbete med interaktiva (digitala?) produkter UX
49. Jonas Söderström • 2022 Ergonomi
50. Jonas Söderström • 2022 Från 145 till 313 klick Godkänna ny vapenlicens
51. Jonas Söderström • 2022
52. Jonas Söderström • 2022
53. Jonas Söderström • 2022
54. Jonas Söderström • 2022
55. Jonas Söderström • 2022
56. Jonas Söderström • 2022 IxD i röststyrka system?
57. Jonas Söderström • 2022 ” ’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!
58. Jonas Söderström • 2022 IxD finns överallt
59. Jonas Söderström • 2022
60. Jonas Söderström • 2022
61. Jonas Söderström • 2022 Statiska
62. Jonas Söderström • 2022
63. Jonas Söderström • 2022 Vad är signifiers?
64. Jonas Söderström • 2022 ”Signifiers” (”A ff ordances”) (”A ff ordances”) Håll här Lägg något här
65. Jonas Söderström • 2022 ”Signifiers” (”A ff ordances”) Huh? ???
66. Jonas Söderström • 2022 The design of everyday things Don Norman
67. Jonas Söderström • 2022 ”Signifiers” (”A ff ordances”) 3 av 4 uppfattade detta som en knapp och tryckte på den för att beställa
68. Jonas Söderström • 2022 Interaktionsdesign: 
 att designa hur användarna konkret interagerar med en tjänst eller produkt
69. Jonas Söderström • 2022 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
70. Jonas Söderström • 2022 Visuell design Informations- 
 design Interaktions- 
 design Utvecklare Kommunikatörer Verksamhets- representanter Varumärkes- folk Frontend- utvecklare
71. Jonas Söderström • 2022 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
72. Jonas Söderström • 2022 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
73. Skisser
75. Jonas Söderström • 2022 Wireframes
76. Sida Innehåll på bred sida. Visas här utan meny, navigation eller sidfot. 76 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
77. Sida Innehåll på bred sida. Visas här utan meny, navigation eller sidfot. 77 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
78. Med meny, sidhuvud, -fot
79. Jonas Söderström • 2022 Researcher IxD Frontend AD Kund Er utbildning – och alltför ofta i arbetslivet
80. Jonas Söderström • 2022 Researcher IxD Frontend AD Kund Lorem Ipsum Lorem Ipsum [God UX]
81. Jonas Söderström • 2022 Stop
82. Jonas Söderström • 2022 x • Jobba i par eller max som trio • Hitta och utforska minst två exempel på interaktionsdesign. • Analog eller digital, eller kombinerat. • Försök kartlägga och beskriva så detaljerat som möjligt vad användaren måste göra. Alla steg. • Leta efter exempel på ordning, constraints, prioriteringar, hierarki , ergonomi – bättre eller sämre. Varför har de valt de lösningar de gjort? • Se om ni kan föreslå tänkbara alternativa lösningar.
83. Jonas Söderström • 2022 Er uppgift (2) • Ni redovisar på fredag • Samlas i grupper om tre par • Redovisa minst ett exempel per par 
 för de andra (fredag fm) • Gruppen väljer sedan ett exempel 
 som ni redovisar för hela klassen, 
 plus ett i reserv