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
   

   View Slide

2. Jonas Söderström • 2022
   Vadå
   interaktionsdesign?
   🤔
   

   View Slide

3. Jonas Söderström • 2022
   Vadå IxD?
   
   
   🤔
   

   View Slide

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
   

   View Slide

5. Jonas Söderström • 2022
   Praktisk definition –
   

   utgå från användaren
   

   View Slide

6. Jonas Söderström • 2022
   Vilka bra recept!
   Vilka snygga skor!
   

   View Slide

7. Jonas Söderström • 2022
   Vilka bra recept!
   Vilka snygga skor!
   Syfte /
   innehåll
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Jonas Söderström • 2022
    Syfte /
    innehåll
    Teknik Design
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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!?!
    

    View Slide

14. Jonas Söderström • 2022
    Visuell
    design
    Infor-
    

    mations-
    

    design
    Inter-
    

    aktions-
    

    design
    DESIGN (”UI”) UX
    🙁 😀
    🙂
    

    View Slide

15. Jonas Söderström • 2022
    HASTIGHET
    DESIGN
    11 186
    m/s
    bränsle
    form
    motor
    

    View Slide

16. Jonas Söderström • 2022
    Färg, form, linje, skuggor …
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

19. Jonas Söderström • 2022
    Hund Katt
    Husdjur
    Välj husdjur
    Hund
    Katt
    V
    Husdjur
    Hund
    Katt
    X
    Katt Hund Varg
    Tiger
    

    View Slide

20. Jonas Söderström • 2022
    Speci
    fi
    ka interaktions-sätt
    

    View Slide

21. Jonas Söderström • 2022
    Ordningsföljd
    

    View Slide

22. Jonas Söderström • 2022
    Välj försäkring
    Bas
    Stor
    V
    Husdjur
    Hund
    Katt
    X
    

    View Slide

23. Jonas Söderström • 2022
    Välj försäkring
    Bas
    Stor
    V
    Husdjur
    Hund
    Katt
    X
    

    View Slide

24. Jonas Söderström • 2022
    

    View Slide

25. Jonas Söderström • 2022
    

    View Slide

26. Jonas Söderström • 2022
    Constraints
    ≈ Saker vi hindrar användaren att göra
    

    View Slide

27. Jonas Söderström • 2022
    Inaktiv
    

    View Slide

28. Jonas Söderström • 2022
    Aktiv
    

    View Slide

29. Jonas Söderström • 2022
    Den som inte tar bort luddet
    

    från torktumlaren ska dö!
    

    View Slide

30. Jonas Söderström • 2022
    

    View Slide

31. Jonas Söderström • 2022
    

    View Slide

32. Jonas Söderström • 2022
    Prioritering - hierarki
    ≈ Saker vi ”nudgar” användaren att göra
    

    View Slide

33. Jonas Söderström • 2022
    Ja, gör det!
    Nej, avbryt
    

    View Slide

34. View Slide

35. View Slide

36. Jonas Söderström • 2022
    När hierarkin blir fel…
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

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
    

    

    View Slide

47. Jonas Söderström • 2022
    Interaktionsdesign
    Smal Bred
    Speci
    fi
    ka
    interaktions-
    detaljer
    Allt arbete med
    interaktiva
    (digitala?)
    produkter
    

    View Slide

48. Jonas Söderström • 2022
    Interaktionsdesign
    Smal Bred
    Speci
    fi
    ka
    interaktions-
    detaljer
    Allt arbete med
    interaktiva
    (digitala?)
    produkter
    UX
    

    View Slide

49. Jonas Söderström • 2022
    Ergonomi
    

    View Slide

50. Jonas Söderström • 2022
    Från 145 till 313 klick
    Godkänna ny vapenlicens
    

    View Slide

51. Jonas Söderström • 2022
    

    View Slide

52. Jonas Söderström • 2022
    

    View Slide

53. Jonas Söderström • 2022
    

    View Slide

54. Jonas Söderström • 2022
    

    View Slide

55. Jonas Söderström • 2022
    

    View Slide

56. Jonas Söderström • 2022
    IxD i röststyrka system?
    

    View Slide

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!
    

    View Slide

58. Jonas Söderström • 2022
    IxD finns överallt
    

    View Slide

59. Jonas Söderström • 2022
    

    View Slide

60. Jonas Söderström • 2022
    

    View Slide

61. Jonas Söderström • 2022
    Statiska
    

    View Slide

62. Jonas Söderström • 2022
    

    View Slide

63. Jonas Söderström • 2022
    Vad är signifiers?
    

    View Slide

64. Jonas Söderström • 2022
    ”Signifiers”
    (”A
    ff
    ordances”)
    (”A
    ff
    ordances”)
    Håll här
    Lägg något
    här
    

    View Slide

65. Jonas Söderström • 2022
    ”Signifiers”
    (”A
    ff
    ordances”)
    Huh?
    ???
    

    View Slide

66. Jonas Söderström • 2022
    The design of
    everyday things
    Don Norman
    

    View Slide

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
    

    View Slide

68. Jonas Söderström • 2022
    Interaktionsdesign:
    

    att designa hur användarna
    konkret interagerar med en
    tjänst eller produkt
    

    View Slide

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
    

    View Slide

70. Jonas Söderström • 2022
    Visuell
    design
    Informations-
    

    design
    Interaktions-
    

    design
    Utvecklare
    Kommunikatörer
    Verksamhets-
    representanter
    Varumärkes-
    folk
    Frontend-
    utvecklare
    

    View Slide

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
    

    View Slide

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
    

    View Slide

73. Skisser
    

    View Slide

74. View Slide

75. Jonas Söderström • 2022
    Wireframes
    

    View Slide

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
    

    View Slide

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
    

    View Slide

78. Med meny, sidhuvud, -fot
    

    View Slide

79. Jonas Söderström • 2022
    Researcher IxD Frontend
    AD Kund
    Er utbildning – och alltför ofta i arbetslivet
    

    View Slide

80. Jonas Söderström • 2022
    Researcher
    IxD
    Frontend
    AD Kund
    Lorem Ipsum
    Lorem Ipsum
    [God UX]
    

    View Slide

81. Jonas Söderström • 2022
    Stop
    

    View Slide

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.
    

    View Slide

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
    

    View Slide