Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ADDC 2019 - Karolina Miekina - Designing for Interface Next

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/

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

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