Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX for XR: Creating User Flows for Mixed Reality

864 views

Published on

This is my talk about UX design for mixed reality. I dive deep into how designers can create clear, compelling and concise user flows for mixed reality. Mixed reality is a new medium that requires a much different type of user flow than traditional web/mobile applications.

View my work and the mixed reality design template here:

https://www.lillianwarner.com/mixed-reality-userflows

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

UX for XR: Creating User Flows for Mixed Reality

  1. 1. UX for Mixed Reality: Creating User Flows Lillian Warner New York University Tandon School of Engineering Integrated Digital Media Program Seattle Interactive Conference 2017
  2. 2. Who am I?
  3. 3. HoloGlass: NYU UX/Microsoft Project
  4. 4. HoloGlass: 3D Art Portfolio
  5. 5. Mixed Reality
  6. 6. This is Mixed Reality Image from Iron Man 2
  7. 7. This is also Mixed Reality Image via Microsoft
  8. 8. Mixed Reality is Still Being Defined “The best way to predict the future is to invent it.” Ray Bradbury’s “The Veldt”
  9. 9. Traditional Web/Mobile User Flow
  10. 10. • Voice Interaction • 360 Sound • 3D Objects • Scaling, re-sizing, and placing objects • Gesturing • Video • Spatial Mapping • Gaze Input • Cortana Input Features Many Components to Design For
  11. 11. Mixed Reality User Flow: Scene, Not Screen Reality Sequence
  12. 12. What Designing Can Feel Like
  13. 13. Ideal End Result
  14. 14. Our Process
  15. 15. End Result Reality Sequence
  16. 16. Where to Start? 1. Research 2. Brainstorming 3. Protoyping 4. Keep Track of the Details
  17. 17. 1. Research
  18. 18. Microsoft “The user is the camera.” Image via Microsoft
  19. 19. Mixed Reality Design Lab GitHub Image via Microsoft
  20. 20. Interaction Fundamentals Image via Microsoft
  21. 21. 8ninths Image via 8ninths
  22. 22. Snapshot
  23. 23. Medium
  24. 24. 2. Brainstorming
  25. 25. Encourage All Kinds of Ideas
  26. 26. Storyboarding
  27. 27. 3. Prototyping
  28. 28. Act it Out
  29. 29. Consider Web & Mobile Prototyping Tools
  30. 30. Marvel Prototype
  31. 31. Marvel Prototype
  32. 32. Unity Unity HoloLens Emulator
  33. 33. 4. Keep Track of Everything
  34. 34. Spreadsheets Default Page Physical Space User Input (options available) Interaction Holographic Form Sound Big Web Place web on wall or ground Voice Command: Name of artist; Gesture: Airtap to select artist airtap, voice command 3D Web of artist Some sort of cool hover sound; default instructional audio: “To select an artwork, airtap it. Airtap and hold to move the artwork around. Drag the artwork with your fingers to enlarge it. Double airtap to go back” Artist Web Place web on wall or ground Voice Command: Information (artist bio plays). Gesture: Airtap name for artist bio; Gesture: email biography, contact info, or exhibition history airtap, voice command 3D Web of artworks No default audio. Artist Bio plays when selected Painting Place painting on wall or have tag along Gesture: Tap info icon; Gesture: tap Process icon; Gesture: double airtap to go back one step; Gesture: airtap for transcript to be emailed airtap, rotate, adjust size Painting No default audio. Artwork info plays when info is selected; Process audio plays when process is selected Sculpture Place sculpture on ground or have tag along Gesture: Tap info icon; Gesture: tap Process icon; Gesture: double airtap to go back one step; Gesture: airtap for transcript to be emailed airtap, rotate, adjust size Sculpture No default audio. Artwork info plays when info is selected; Process audio plays when process is selected Interactive Installation place cube on table or floor Gesture: Tap info icon; Gesture: airtap cube to experience the installation; Gesture: tap Process icon; Gesture: double airtap to go back one step; Gesture: airtap for transcript to be emailed airtap, rotate, adjust size Holographic rain drops/responsive vertical cord/3d cube of experience Instructional audio by default plays: "To enter the installation, airtap. Walk around to experience the installation. To exit, say 'exit.'" Artwork info plays when info is selected; Process audio plays when process is selected 360 Video place video still on wall Gesture: Tap info icon; Gesture: airtap play button to play video; Gesture: tap Process icon; Gesture: double airtap to go back one step; Gesture: airtap for transcript to be emailed airtap, rotate, adjust size Immersive video Instructional Audio by default plays: "To play the video, airtap the play button. To pause the video, say 'pause.'" Artwork info plays when info is selected; Process audio plays when process is selected Info Page Physical Space User Input (options available) Interaction Holographic Form Sound
  35. 35. End Result: Reality Sequence
  36. 36. Describe What Is Happening Scene Input Options Audio User Input Icon Key
  37. 37. Scene
  38. 38. Input Options
  39. 39. ”To make a selection, gaze at the target or say ’Select.’ To move an artwork, air tap and hold. To adjust an artwork’s size, air tap, gaze, and drag. To email a transcription of the audio recording, say ’Email.’” Audio: What Does the User Hear?
  40. 40. User selects Artist 1 via air tap > > Previous Scene Next Scene Input Selection (User Action)
  41. 41. What isn’t Happening
  42. 42. Reality Sequence Template
  43. 43. Reality Sequence Template
  44. 44. Why Now? Why Mixed Reality?
  45. 45. 1. Industry Growth Image via McKinsey
  46. 46. 2. XR Design Skills are in Need
  47. 47. 3. XR is Good for Designers • VUI • AR • VR • Game Dev. • 3D Modeling • Sound Design
  48. 48. Other Research
  49. 49. Context Map Created by Shannon Holloway Shannon.Holloway@nyu.edu
  50. 50. Relational Context: UX Equation Created by Adelle Lin Adelle.Lin@nyu.edu
  51. 51. Created by Adelle Lin Adelle.Lin@nyu.edu
  52. 52. Thank You! lillian.warner@nyu.edu www.lillianwarner.com Reality Sequence Template:

×