ADDC 2019 - Karolina Miekina - Designing for Interface Next

With interfaces breaking out of the comfortable rectangles of laptops and smartphones, designers have ever expanding user needs to account for. How does one prepare to solve for new interfaces or for devices with no interfaces at all? A mixture of practical advice using real world examples of what’s out there and how you can pivot to prepare.

Recordings & more: https://addconf.com/

Transcript

1. Kara Miekina
   Senior Design Lead | UX
   Microsoft
   @kina_miekina
   Designing Interface
   Next
   

   View Slide

2. Image source: Marvel Studios @kina_miekina
   

   View Slide

3. Image source: Microsoft @kina_miekina
   

   View Slide

4. Physical Digital
   @kina_miekina
   

   View Slide

5. Mixed Reality
   @kina_miekina
   

   View Slide

6. Mixed Reality
   AR
   (Augmented Reality)
   VR
   (Virtual Reality)
   @kina_miekina
   

   View Slide

7. Microsoft Confidential | Mixed Reality at Work 7
   Our mission is to empower every person 

   and every organization on the planet 

   to achieve more.
   Satya Nadella, Microsoft CEO
   @kina_miekina
   

   View Slide

8. Video source: Microsoft
   Video source: Microsoft @kina_miekina
   

   View Slide

9. Video source: Microsoft
   Video source: Microsoft @kina_miekina
   

   View Slide

10. Mixed Reality
    Image source: Chatbot by Oksana Latysheva, Smart Speaker by Becris, HoloLens by Henning Gross, ar by Sinistrad from the Noun Project
    Chatbots Voice User
    Interface
    Head Mounted
    Displays
    Mobile Augmented
    Reality
    @kina_miekina
    

    View Slide

11. We envision a future that is
    both impossible in what
    technology can achieve and
    retro in showing concepts
    that are not user friendly.
    Image source : Legendary Television Distribution @kina_miekina
    

    View Slide

12. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

13. Breathe!
    @kina_miekina
    

    View Slide

14. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

15. Image Source: driller by tezar tantular, screw by Lloyd Humphreys, Picture Frame by Nancy from the Noun Project
    Product Use
    @kina_miekina
    

    View Slide

16. Image Source: driller by tezar tantular, screw by Lloyd Humphreys, Picture Frame by Nancy from the Noun Project
    Product Outcome
    @kina_miekina
    

    View Slide

17. Image Source: driller by tezar tantular, screw by Lloyd Humphreys, Picture Frame by Nancy from the Noun Project
    Product Outcome
    @kina_miekina
    

    View Slide

18. Image Source: driller by tezar tantular, screw by Lloyd Humphreys, Picture Frame by Nancy from the Noun Project
    Product Outcome
    @kina_miekina
    

    View Slide

19. Useful
    1
    Image Source: Jobs to Be Done by Intercom
    2 Useable
    3
    @kina_miekina
    

    View Slide

20. Useful
    Image Source: Jobs to Be Done by Intercom
    2 Useable
    3
    1
    @kina_miekina
    

    View Slide

21. Image Source: Facebook @kina_miekina
    

    View Slide

22. Desirable
    Image Source: The Climb @kina_miekina
    

    View Slide

23. Image Source: Facebook
    Desirable
    Useable
    @kina_miekina
    

    View Slide

24. Image Source: Facebook
    Desirable
    Useable
    Useful ?
    @kina_miekina
    

    View Slide

25. Image Source: Facebook @kina_miekina
    

    View Slide

26. Image Source: Facebook @kina_miekina
    

    View Slide

27. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

28. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

29. Video source: 20th Century Fox DreamWorks Pictures Amblin Entertainment Blue Tulip Productions, Cars Garage & Toyota @kina_miekina
    

    View Slide

30. Image source: Pablo Stanley @kina_miekina
    

    View Slide

31. Image source: Pablo Stanley
    Avoid actions that are below the
    waist and above the shoulder
    BEST
    PREFERRED
    @kina_miekina
    

    View Slide

32. Image source: Pablo Stanley
    Avoid actions that are below the
    waist and above the shoulder
    Avoid extended use of stretch out,
    unsupported arms
    @kina_miekina
    

    View Slide

33. Image source: Pablo Stanley
    Avoid actions that are below the
    waist and above the shoulder
    Avoid extended use of stretch out,
    unsupported arms
    Avoid the need to perform the
    same or similar tasks repetitively
    @kina_miekina
    

    View Slide

34. Image source: Pablo Stanley
    Avoid actions that are below the
    waist and above the shoulder
    Avoid extended use of stretch out,
    unsupported arms
    Avoid the need to perform the
    same or similar tasks repetitively
    Avoid forcing the user to leave
    their productive position
    @kina_miekina
    

    View Slide

35. Image source: Pablo Stanley
    Avoid actions that are below the
    waist and above the shoulder
    Avoid extended use of stretch out,
    unsupported arms
    Avoid the need to perform the
    same or similar tasks repetitively
    Avoid forcing the user to leave
    their productive position
    @kina_miekina
    

    View Slide

36. Image source: Microsoft @kina_miekina
    

    View Slide

37. Image source: Microsoft @kina_miekina
    

    View Slide

38. Image source: Microsoft @kina_miekina
    

    View Slide

39. Video source: Microsoft @kina_miekina
    

    View Slide

40. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

41. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

42. We started by
    trying to make
    computers feel
    like our world…
    @kina_miekina
    

    View Slide

43. Image source: awwwards.com
    … and then
    flattened it to
    match our 2D
    world.
    @kina_miekina
    

    View Slide

44. Image source : Marvel Studios @kina_miekina
    

    View Slide

45. Image source : Legendary Pictures @kina_miekina
    

    View Slide

46. Photo by Samantha Gades on Unsplash
    8:10 am 98%
    75°
    @kina_miekina
    

    View Slide

47. Photo by Samantha Gades on Unsplash
    8:10 am 98%
    75°
    

    00:13 03:12
    Glen
    What’s the status?
    @kina_miekina
    

    View Slide

48. Image source : @gulpost @kina_miekina
    

    View Slide

49. Image source: Microsoft @kina_miekina
    

    View Slide

50. @kina_miekina
    

    View Slide

51. @kina_miekina
    

    View Slide

52. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

53. Breathe!
    @kina_miekina
    

    View Slide

54. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

55. @kina_miekina
    

    View Slide

56. Photo by Kevin Bhagat on Unsplash @kina_miekina
    

    View Slide

57. @kina_miekina
    

    View Slide

58. @kina_miekina
    

    View Slide

59. - hotel offering parity
    What We Expected
    - similar results from sample size
    - users would ask for help
    - error correction opportunities
    @kina_miekina
    - situational memory
    

    View Slide

60. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

61. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    @kina_miekina
    

    View Slide

62. Image Source: Spark AR @kina_miekina
    

    View Slide

63. Image Source: Wannakicks @kina_miekina
    

    View Slide

64. Image Source: Spark AR Studio @kina_miekina
    Spark AR Studio
    

    View Slide

65. @kina_miekina
    Dialogflow
    

    View Slide

66. Image Source: Spark AR @kina_miekina
    Maquette
    

    View Slide

67. Image Source: Spatial Stories @kina_miekina
    Spatial Stories
    

    View Slide

68. Strip the novelty
    Observe the body
    Human patterns > computer patterns
    No interface, no rules
    There’s a _____ for that!
    

    View Slide

69. Kara Miekina
    Senior Design Lead | UX
    @kina_miekina
    Thanks!
    Illustration source: ar by supalerk laipawat from the Noun Project
    

    View Slide