UI in VR

If you were working a VR food truck, how would you let the simulation know you were ready to leave? Try to walk out the door? Look for a “exit” button? In Job Simulator, you take a bite out of a burrito labeled “quit” - twice to confirm your choice. It’s just one of many ways designers are experimenting with UI design in VR.

In this talk, Senior UX Instructor Nick Anderson will explore the Wild West of VR UI design, from simple floating interfaces to true-to-life, fully integrated experiences. We’ll look at indications of where we can expect these trends to go next, and how it will impact the jobs of UX Designers. Finally, we’ll explore how gamification design plays a role in simulated experiences.

Transcript

1. UI in VR! UI in VR! By Nick Anderson
2. Hi, I’m Nick • Distinguished Faculty at General Assembly Denver • UX Product Advisory Board Chair for GA Internationally • Co-Founder and Senior Lead Dad to his daughter Quinn, alongside his wife Katy and their two cats Gin and Tonic
3. Also, I fucking love VR! I fucking love VR!
4. Reasons VR IS cool #1
5. Reasons VR IS cool #2 It opens up a completely new paradigm for design.
6. Affordances & Heuristics Affordances & Heuristics But First: Plus a brief recap of the industrial revolution and better living in postwar america
8. Affordance Intrinsically obvious, does not need instruction
9. Heuristic Not immediately obvious, must be learned
10. ONe Big Problem . . .
16. OH hell yeah Better Materials + Easier Manufacturing = Better Design
20. ??????? ???????
21. Affordances - No tangible interface - Mouse use has to be learned - No obvious points of interaction X X Heuristics - No relatable previous experience - No familiar patterns - No understanding of what it does, or how (except for power users)
23. APple HIG Google MATERIAL DESIGN
24. fucking VR! fucking VR! But Then . . .
25. AFFORDANCE CITY
26. Southern Metropolitan District of Heuristics
28. ALL PROBLEMS SOLVED FOREVER!
29. JK
31. I’ll have the uh . . . Plasma Rifle with the Large flaming demon. Hold the grenades.
34. DESIGNED for Immersion But only When the UI is Designed for Immersion Immersion Immersion VR Can offer
35. 1902:
36. 1962: (60 years of Iteration)
37. 2008: (106 years of Iteration)
38. Goals: - Present seamless immersion - Require little to no learning curve from users Blockers: - Current design patterns are lacking - Exploring new patterns is time-consuming and expensive
39. THE PROBLEM: VR is leaning on previous design patterns Game Menu UI Cinematic Camera Blocking
40. THE Solution: Create a UI design standard for VR
41. THE Solution: Create a UI design standard for VR In less than 106 years
42. What we can do now: Observe use cases to Identify Good and BAD patterns
43. Heuristic Evaluation #1 Subject: Rob Anderson (Dad) Age: 66 Notable conditions: • Severe Rheumatoid Arthritis Game: Superhot Gaming Experience: N00b
44. TASK: Start Game (Insert floppy disk)
46. Floppy not obviously interactable Interaction blocked by wonky Camera X X
47. AFFORDANCES - Without FULL BODY integration, it can be hard to find affordances. X HEURISTICS - VR recreates PHYSICAL spaces that can be designed to be familiar
48. I.e. - “Can I touch that?”
53. Normal Heuristics resumed after prompt (and Camera Fix) Haptic Feedback reinforced decision
54. TASK: Start Game (Insert floppy disk) Start game (Put on Headset)
56. Some Heuristics are dead ends X
57. Heuristics can override Instruction X
58. DESIGN Insight #1 Anticipate Familiar heuristics Embrace them or Subvert them LOUDLY DESIGN Insight #1
59. Embrace:
60. Loud Subvert: Use headset above pls
62. Heuristic Evaluation #2 Subject: Jeff Payne Age: 40 Notable conditions: • Easily Frustrated • 5 Bourbons deep Game: Job Simulator & Beat Saber Gaming Experience: Stopped at Resident Evil
63. Task: Make a sandwich
65. Don’t tell me what to do User action is skewed in a consequence-free environment X X
68. X
69. DESIGN Insight #2 RELY ON Experimentation AS A CORE MECHANIC DESIGN Insight #2
70. RELY ON Experimentation AS A CORE MECHANIC VR requires users to rediscover affordances & heuristics Users discover by “doing”, SO: Create a forgiving, consequence-free environment, - OR - Give strong indication on how actions will affect the world
72. Embrace Familiar Heuristics + Anticipate Experimentation Embrace Familiar Heuristics Anticipate Experimentation
73. Integrated UI! Integrated UI!
78. “Anything you see, you should be able to interact with And touch the way you think you could” “Anything you see, you should be able to interact with And touch the way you think you could” - An actual VR Design Pattern
79. X
80. How can I Do this?! Seriously I want to design for VR How can I do this?!
81. Frameworks - Designing for VR: A Beginners Guide by Blake Hudelson 1. Mozilla A-Frame is for Web VR and can be used platforms such as Google Cardboard, Samsung Gear, and Oculus Rift 2. Daydream VR is for midrange VR and works with mobile phones only 3. Unity VR/Unreal SDK are for high end headsets including Oculus Rift, HTC Vive, and HoloLens (AR).
82. Design software 1. ¯\_(ツ)_/¯
83. - Alex Schwartz, CEO of Owlchemy Labs “You can never know how good something’s going to be in VR until you try it out with a headset, with your hands, and it either clicks or it doesn’t. That means the fastest you can iterate is the best for development. We’re not going to sit down and write a [game design document], because it’s going to be wrong. We just try it out in VR.”
84. Resources 1. https://www.uxofvr.com/ 2. https://www.invisionapp.com/inside-design/vr-interface-design/ 3. https://blog.marvelapp.com/designing-vr-beginners-guide/ 4. https://medium.com/startup-grind/4-things-i-learned-designing-user-interface s-for-vr-cc08cac9e7ec 5. https://designguidelines.withgoogle.com/cardboard/designing-for-google-cardb oard/a-new-dimension.html
86. That’s IT! THat’s it! THanks for listening to me talk Questions, comments, want to hear me talk more? Nick.anderson.r@gmail.com