SlideShare une entreprise Scribd logo
1  sur  42
UX for Mixed Reality:
Creating User Flows
Lillian Warner
New York University Tandon School of Engineering
Integrated Digital Media Program
NYC Media Lab Future Reality Workshop 2017
Who am I?
HoloGlass:
NYU UX/Microsoft Project
Workshop Agenda
1. Mixed Reality User Flow Overview (10 min)
2. Groups of 3-4 and Pick Idea (5 min)
3. Brainstorm and Design Interactions (20 min)
4. Share (10 minutes/5 minutes each)
5. Wrap Up (5 minutes)
Mixed Reality
This is Mixed Reality
GIF from Iron Man 2
This is also Mixed Reality
Image via Microsoft
This is Mixed Reality
This is Mixed Reality
3 Communication Techniques
User Flow
Snapshot
Act it Out
Mixed Reality User Flows (Reality Sequences)
Traditional Web/Mobile User Flow
• 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
Mixed Reality User Flow:
Scene, Not Screen
Reality Sequence
Describe What Is Happening
Scene
Input Options
Audio
User Input
Icon Key
Scene
Input Options
”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?
User selects Artist 1 via air tap
> >
Previous Scene Next Scene
Input Selection (User Action)
What isn’t Happening
Reality Sequence Template
Reality Sequence Template
Table of Elements Snapshot
8ninths
Image via 8ninths
Snapshot
Snapshot Template
Act it Out
Act it Out
Get into groups and pick an idea (5 min.)
Idea 3:
Take a Tour
Idea 2:
Human Anatomy Lesson
Idea 4:
View a Piece of Art
Idea 1:
Listen to a Song
Design Interactions (15 Min.)
1 Rule: No 2D objects (don’t just translate a web
browsing experience to a headset!)
• Use User Flow Template
• Use Snapshot Template
• Act it Out
Share (10 Min.)
Describe what’s going on in your team’s mixed reality
scene. Describe the interactions/user journey.
Mixed Reality is Still Being Defined
“The best way to predict the future is to invent it.”
Ray Bradbury’s “The Veldt”
XR is Good for Designers
• VUI
• AR
• VR
• Game Dev.
• 3D Modeling
• Sound Design
Microsoft
“The user is the camera.”
Image via Microsoft
Mixed Reality Design Lab GitHub
Image via Microsoft
Interaction Fundamentals
Image via Microsoft
Medium
Thank You!
lillian.warner@nyu.edu
www.lillianwarner.com
Reality Sequence
Template:
Where to Start?
1. Research
2. Brainstorming
3. Protoyping
4. Keep Track of the Details

Contenu connexe

Similaire à Creating User Flows for Mixed Reality Workshop (NYC Media Lab Exploring Future Reality 2017)

Project overview downs research
Project overview downs researchProject overview downs research
Project overview downs research
Daniel Downs
 
App Research Project
App Research ProjectApp Research Project
App Research Project
Daniel Downs
 
App research project
App research projectApp research project
App research project
Daniel Downs
 
Major Studio Final Presentation: Delirium Control
Major Studio Final Presentation: Delirium ControlMajor Studio Final Presentation: Delirium Control
Major Studio Final Presentation: Delirium Control
Laura Simpson
 
Designing UX for the Internet of Things
Designing UX for the Internet of ThingsDesigning UX for the Internet of Things
Designing UX for the Internet of Things
Fahim Kawsar
 
BYO3D 2011: Welcome
BYO3D 2011: WelcomeBYO3D 2011: Welcome
BYO3D 2011: Welcome
Matt Hirsch - MIT Media Lab
 
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI ImplementationUI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
Chunyang Chen
 
Chapt 2 storyboarding techniques
Chapt 2   storyboarding techniquesChapt 2   storyboarding techniques
Chapt 2 storyboarding techniques
Muhd Basheer
 

Similaire à Creating User Flows for Mixed Reality Workshop (NYC Media Lab Exploring Future Reality 2017) (20)

Project overview downs research
Project overview downs researchProject overview downs research
Project overview downs research
 
Project Overview: Creating an Authentic Mobile Application Design Mr. Downs
Project Overview: Creating an Authentic Mobile Application Design Mr. DownsProject Overview: Creating an Authentic Mobile Application Design Mr. Downs
Project Overview: Creating an Authentic Mobile Application Design Mr. Downs
 
Utilizingkinect
UtilizingkinectUtilizingkinect
Utilizingkinect
 
Immersive 3D Environment Using Kinect and Voice Commands
Immersive 3D Environment Using Kinect and Voice Commands Immersive 3D Environment Using Kinect and Voice Commands
Immersive 3D Environment Using Kinect and Voice Commands
 
App Research Project
App Research ProjectApp Research Project
App Research Project
 
App research project
App research projectApp research project
App research project
 
IoT Day Italy - Mixed Reality & IoT
IoT Day Italy - Mixed Reality & IoTIoT Day Italy - Mixed Reality & IoT
IoT Day Italy - Mixed Reality & IoT
 
Major Studio Final Presentation: Delirium Control
Major Studio Final Presentation: Delirium ControlMajor Studio Final Presentation: Delirium Control
Major Studio Final Presentation: Delirium Control
 
Utilizing Kinect Control for a More Immersive Interaction with 3D Environment
Utilizing Kinect Control for a More Immersive Interaction with 3D EnvironmentUtilizing Kinect Control for a More Immersive Interaction with 3D Environment
Utilizing Kinect Control for a More Immersive Interaction with 3D Environment
 
Designing UX for the Internet of Things
Designing UX for the Internet of ThingsDesigning UX for the Internet of Things
Designing UX for the Internet of Things
 
BYO3D 2011: Welcome
BYO3D 2011: WelcomeBYO3D 2011: Welcome
BYO3D 2011: Welcome
 
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI ImplementationUI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
UI2code : A Neural Machine Translator to Bootstrap Mobile GUI Implementation
 
Free Hugs — Praising developers for their actions [ICSE2015]
Free Hugs — Praising developers for their actions  [ICSE2015]Free Hugs — Praising developers for their actions  [ICSE2015]
Free Hugs — Praising developers for their actions [ICSE2015]
 
Designing Usable Interface
Designing Usable InterfaceDesigning Usable Interface
Designing Usable Interface
 
Chapt 2 storyboarding techniques
Chapt 2   storyboarding techniquesChapt 2   storyboarding techniques
Chapt 2 storyboarding techniques
 
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
 
Microsoft Hololens
Microsoft HololensMicrosoft Hololens
Microsoft Hololens
 
UX Evolution Mindset & Methods
UX Evolution Mindset & MethodsUX Evolution Mindset & Methods
UX Evolution Mindset & Methods
 
Jason Moore - Interaction design in enterprise teams
Jason Moore - Interaction design in enterprise teamsJason Moore - Interaction design in enterprise teams
Jason Moore - Interaction design in enterprise teams
 
Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 ConferenceTheo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
Theo Mandel - "Designing Object-Oriented User Experiences" IUE2013 Conference
 

Dernier

一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
amitlee9823
 
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
amitlee9823
 

Dernier (20)

Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call GirlsBook Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
 

Creating User Flows for Mixed Reality Workshop (NYC Media Lab Exploring Future Reality 2017)

Notes de l'éditeur

  1. Last year in one of my classes, I worked with a small group to design and build an application for the HoloLens. Our app is called HoloGlass, and it is a 3D holographic art portfolio, primarily aimed at curators at museums. With our app, users can view and interact with artwork. They can place the artwork in their real world environments, share their world with other users, scale the artwork so it is true to size, and learn about the artist and artwork in an interactive way. This project was my first experience designing for mixed reality, and it was great. -experimental mindset
  2. Try giving a prompt Check out general assembly workshops
  3. Today, I’m going to be talking about mixed reality specifically. Some people call it augmented reality, but for the purposes of this talk, I’m going to stick with mixed reality. Just so we are all on the same page, mixed reality is somewhere between the real world and virtual reality. Mixed reality allows users to place digital objects in their physical worlds and interact with them. It’s different from mobile augmented reality in that it’s a little more comprehensive and can be more immersive. A headset is required, but the user’s vision isn’t fully occluded like it is in virtual reality.
  4. To me, this scene from Iron Man is mixed reality.
  5. …and so is this demonstration of someone wearing the HoloLens. The person in this video is video chatting, placing digital objects in her real world environment, and viewing multiple applications at one time. There’s a lot going on
  6. …and so is this demonstration of someone wearing the HoloLens. The person in this video is video chatting, placing digital objects in her real world environment, and viewing multiple applications at one time. There’s a lot going on
  7. Creating user flows are a key part of the UX design process. They’re an important deliverable for any product. User flows not only help solidify the product and product’s goals, but they’re also a key way in which designers communicate with developers, product managers, and even clients. User flows help all the stakeholders get on the same page. Communicating user flows is a responsibility of the design team, and it’s important to get user flows right in order to allow developers and product managers to move forward with their tasks. As UX designers, we are all probably very familiar with user flows for web and mobile products like the one here. But as voice-based platforms and augmented and virtual reality devices become more popular, the types of apps we are designing are going to change--and so are our design practices. The way we communicate our design ideas to others is going to change.
  8. All of these things are tools to help you let the user know what to do next. A good MR experience should incorporate a lot, if not all of these.
  9. But at the end of our process, we were able to deliver clear and compelling user flows for a variety of interactions/functions within our app. These documents were really helpful to our developers, and they were also crucial in allowing us to explain our final concept before we had actually built it.
  10. And lastly, of course, any good user flow should show what’s happening at any given moment. This is clean and simplified, but can be a lot more comprehensive. One drawback to this format is that it takes up a lot of space on the page and it doesn’t have the traditional information architecture flow style that complicated products often have. However, to deliver a super comprehensive flow you could put together a thicker packet of flows in this format, and add additional content, like HQ renders, for your developers as you see fit. But in general, we found that this streamlined flow hit all the main points that we needed to communicate to our developers and other people interested in the project.
  11. Object distance from user
  12. Table of elements
  13. 8ninth’s table of elements was especially useful to our team as we explained our proof of concept because the elements gave us the ability to take a snapshot of a mixed reality scene and explain everything going on in a simple and elegant way.
  14. The most important thing we did. Can do sound, interactions, field of view, etc. Our world is 3D and a mixed reality experience should be 3D. Limited though. Sensory experience. The only form of prototyping
  15. Use props and tools-–doesn’t need to be fancy. Sensory experience. The only form of prototyping . One takeaway was with the field of view—we realized we didn’t want to clutter our scenes, and the only way we were able to make that design decision was by using the sandwich box to approximate the hololens. Make clear that we didn’t have the hololens the whole time
  16. Field is exciting and still being defined No rules except 1: stay away from 2D assets if possible -not often that a whole new medium gets introduced
  17. MR incorporates features found in voice apps, virtual reality, and augmented reality. So when you’re learning how to design for mixed reality, you’re also inadvertently learning how to design for those mediums as well. The wide variety of features that MR provides is what makes it seem messy and complicated at first, but it’s also what makes it the most exciting and interesting. When you’re designing for mixed reality, you’re also learning how to design voice interfaces, you’re learning about ux design for vr and ar products too.
  18. Luckily, there’s already a significant amount of documentation out there. Interaction design fundamentals Mixed reality principles
  19. So much good thinking going on on Medium every day.
  20. As I mentioned earlier, designing for mixed reality can be really intimidating at first because there are so many different things going on. It can be stressful to begin.