Mer om interaktionsdesign

Transcript

1. Jonas Söderström • 2022
   Mer om
   interaktionsdesign
   Jonas Söderström • Måndag 14 nov 2022
   Interaktionsdesign och prototyping • Nackademin ht 22
   

   View Slide

2. Jonas Söderström • 2022
   Lite repetition
   

   View Slide

3. Jonas Söderström • 2022
   Interaktionsdesign
   I smal mening I bred mening
   Speci
   fi
   ka
   interaktions-
   detaljer
   Allt arbete med
   interaktiva
   (digitala?)
   produkter
   

   View Slide

4. Jonas Söderström • 2022
   Några interaktionsprinciper
   

   View Slide

5. Jonas Söderström • 2022
   Anpassa till användarna
   och till verksamheten
   

   View Slide

6. Jonas Söderström • 2022
   Gör tydligt
   

   i vilket läge
   

   systemet är
   

   View Slide

7. Jonas Söderström • 2022
   Information Service Om Process
   Tjänster
   Exempel:
   
   
   Menyn visar alltid var
   användaren är
   

   View Slide

8. Jonas Söderström • 2021
   Vara Frakt Betalning Bekräfta
   Försäkring
   Flöden kräver normalt
   tre design-varianter
   

   (färg, form, typ)
   

   View Slide

9. Jonas Söderström • 2021
   

   View Slide

10. Jonas Söderström • 2021
    X
    Ofta tar vi bort huvudnavigation i
    ett flöde – för att hålla kvar/styra
    användaren.
    

    Men det ska alltid gå att hoppa ur
    flödet - till exempel med ”Stäng (x)”
    

    View Slide

11. Jonas Söderström • 2021
    Vara
    Frakt
    Betalning
    Bekräfta
    Försäkring
    Frakt
    Betalning
    Försäkring
    

    View Slide

12. Jonas Söderström • 2021
    

    View Slide

13. Jonas Söderström • 2022
    Statusmeddelanden
    Användarens
    status
    Tjänsten/
    systemets
    status
    Andra
    användares
    status
    

    View Slide

14. Jonas Söderström • 2022
    1. Användarens status
    

    View Slide

15. Jonas Söderström • 2022
    2. Systemets status
    

    View Slide

16. Jonas Söderström • 2022
    3. Andra användares status
    

    View Slide

17. Jonas Söderström • 2022
    Ge användaren
    kontroll…
    

    View Slide

18. Jonas Söderström • 2021
    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.
    

    View Slide

19. Jonas Söderström • 2021
    Till betalning >
    < Tillbaka till frakt Hitta försäkring
    Om det finns flera
    alternativ framåt får de
    olika vikt i designen
    

    View Slide

20. Jonas Söderström • 2021
    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
    

    View Slide

21. Jonas Söderström • 2022
    Automatisera repetitiva
    uppgifter – minska belastning
    

    View Slide

22. Jonas Söderström • 2022
    

    View Slide

23. Jonas Söderström • 2022
    Närhetens lag
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. Jonas Söderström • 2022
    Lösnings-
    förslag 1
    

    View Slide

29. Jonas Söderström • 2022
    Lösnings-
    förslag 2
    och 3
    

    View Slide

30. Jonas Söderström • 2022
    Lösnings-
    förslag 4
    

    View Slide

31. Jonas Söderström • 2022
    Närhetens lag
    Saker som är nära varandra,
    

    tolkar vi som att de hör ihop.
    

    View Slide

32. Jonas Söderström • 2022
    Likhetens lag
    Saker som är lika varandra (form, färg)
    
    
    tolkar vi som att de hör ihop.
    

    View Slide

33. Jonas Söderström • 2022
    Linjering
    Saker som linjerar med varandra,
    

    uppfattar vi som att de hör ihop.
    

    View Slide

34. Jonas Söderström • 2022
    Mikro-friktioner
    Ibland ska man inte göra det för enkelt
    

    View Slide

35. Jonas Söderström • 2022
    Avsluta-knappen i Zoom
    fl
    yttar sig,
    

    för att förhindra att man avslutar av missstag.
    

    View Slide

36. Jonas Söderström • 2022
    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
    

    View Slide

37. Jonas Söderström • 2022
    Gör det svårt att göra fel
    

    View Slide

38. Jonas Söderström • 2022
    Gör det enkelt att ångra /rätta
    

    View Slide

39. Jonas Söderström • 2022
    Medge flera
    användningssätt
    Gör inte olika – hitta standarder
    

    View Slide

40. View Slide

41. Jonas Söderström • 2022
    

    View Slide

42. Jonas Söderström • 2022
    

    View Slide

43. Jonas Söderström • 2022
    Konsistens
    Gör inte olika – hitta standarder
    

    View Slide

44. 👎
    

    View Slide

45. Jonas Söderström • 2022
    Takeaways:
    Anpassa till användarna
    

    och till verksamheten
    

    View Slide

46. Jonas Söderström • 2022
    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 k onsistens och använd standards
    

    View Slide

47. Jonas Söderström • 2022
    Gruppuppgift 1
    • Grupperna diskuterar och väljer vad ni vill jobba med:
    
    
    • nackademin.se
    
    
    • Studentportalen
    
    
    • ”Jag är OK” – app i mobilen för att underrätta ett urval
    anhöriga om att man inte är drabbad av olycka etc
    
    
    • Uppmärksamma chef på att hens medarbetare inte uppdaterat
    sidor på intranätet
    
    
    • Eget val
    

    View Slide

48. Jonas Söderström • 2022
    Tisdag
    • Grupperna diskuterar det ni vill jobba med:
    
    
    • Ta fram och beskriva tjänsteidé
    
    
    • Sätta upp mål för tjänsten
    
    
    • De
    fi
    nera målgruppen
    
    
    • Börja med idéer för design
    

    View Slide

49. Jonas Söderström • 2022
    Onsdag med Ulf
    • Ta fram en analog prototyp till gruppuppgiften
    
    
    • Testa prototypen på 2-3 personer (även torsdag)
    

    View Slide

50. Jonas Söderström • 2022
    Torsdag
    • För
    fi
    na och bygga på skiss till mer utvecklad skiss /
    wireframe utifrån resultatet av tester
    

    View Slide

51. Jonas Söderström • 2022
    Fredag med Jonas
    • Kort etappredovisning
    
    
    • Föreläsningsämne: Inkluderande design / Empati
    
    
    • Beskriva och utveckla den analoga prototypen utifrån
    ett inkluderande perspektiv
    
    
    •
    

    View Slide