Prototyping for VR

This talk gives an overview about the technology, requirements and everything you need to know about
 designing and developing for virtual reality. A recording of this talk is available here: https://youtu.be/63iiHRtHnuU

Transcript

1. Welcome #frontmuc
2. CURRENT STATE OF everything you need to know about
 designing and developing for virtual reality PROTOTYPING FOR VR Thomas Gläser & Xaver Löffelholz
 Delightex GmbH
 06. Sep 2016 @ Frontend Developer Meetup Munich
3. @Thomas_Glaeser @XaverLoe delightex.com
5. cospaces.io
6. $30B
 VR revenue
 share estimated
 by 2020 Virtual reality is going to be big
7. 1. Requirements
 2. Best practices
 3. Prototyping process Today we want to talk about…
8. 1. Requirements
9. What it is How it feels
10. Immersion
11. Popular things to do in VR
12. Watch a movie Within VR Google Spotlight Stories
13. Dive into another world Shark VR DinoTrek VR
14. dtelepathy.com/blog/philosophy/ux-guide-designing-virtual-reality-experiences Games, Movies, Training, Education, Shopping, Customer Service, Sales, Advertising, Communication, Journalism, Social Media, Traveling, Architecture, City Planning, Dating, Team Collaboration, Porn… What else? More scenarios for VR
15. 1.1 Ergonomic requirements
 Field of view & range of motion
16. 30° Field of view (FOV) 20m 0.5 - 1m VR Interface Design Pre-Visualisation Methods Designing for Daydream - Google I/O 2016 80°
 Range of motion
 (ROM) 120°
 max. ROM Ergonomic requirements
17. Main Content Zone Curiosity
 Zone Peripheral Zone No-No
 Zone VR Interface Design Pre-Visualisation Methods Designing for Daydream - Google I/O 2016 Ergonomic requirements
18. Ergonomic requirements 10° -20° 80° -80° 20m 0.5 - 1m VR Interface Design Pre-Visualisation Methods Designing for Daydream - Google I/O 2016
19. 1.2 Tech requirements
 Devices & interactions
20. 15 EUR
 6M sold
 so far Cardboard 2.0
 1 button google.com/get/cardboard Mobile
 VR Most popular mobile headset
21. Samsung Gear VR
 Touchpad + back button samsung.com/global/galaxy/wearables/gear-vr/ Best mobile headset 100 EUR Mobile
 VR
22. Google Daydream
 3DOF controllers with touchpad + 2 buttons vr.google.com/daydream Coming this fall estimated
 100€ Mobile
 VR
23. HTC Vive
 2x 6DOF controller
 with touchpad and buttons htcvive.com Room-scale
 VR oculus.com Oculus Rift
 Gamepad or
 2x 6DOF controller with joystick + buttons (coming 12/2016) around
 800€
24. Devices & Platforms Room-scale
 VR Mobile
 VR Oculus Home
 Android App Oculus Home Steam VR App Store
 Google Play
25. Beyond the VR controller Hand- tracking Eye- tracking Mind Events leapmotion.com getfove.com
26. 1.3 Human requirements
 VR sickness
27. Sensory cue missmatch
 between visual perception and vestibular system http://www.roadtovr.com/7-ways-move-users-around-vr-without-making-sick/2 http://uploadvr.com/five-ways-to-reduce-motion-sickness-in-vr
28. High frame rate High-precision low-latency tracking vg247.com/2016/03/17/sony-is-probably-going-to-reject- playstation-vr-games-below-60-fps https://www3.oculus.com/en-us/touch Technical solutions 60+ Frames per second
30. youtube.com/watch?v=lHzCmfuJYa4
31. 2. Best practices
 Design patterns for VR
32. Selecting
 Reticle
37. Selecting
 Fuse button
40. Selecting
 Ground menu
42. Selecting
 Laserpointer (ray casting)
44. Selecting
 Controller menu
46. Selecting
 Dashboards (Spatial UI)
48. Text display
 Head-up
50. Text display
 In space
53. Interacting in space Diegetic UI solutions
55. Moving
 Teleporting (inner space)
59. Moving
 Teleporting (outer space)
61. Moving
 Free walking
63. Text input Speech & keyboard
65. Providing guidance Audio feedback
67. Supporting immersion Spatial audio
70. 3. Prototyping process
 for a better UX in VR
72. Bring a 2D dashboard to VR
73. Inspired by reality
74. No specific VR tools right now,
 but game engines… unity3d.com
76. assetstore.unity3d.com/
77. https://developers.google.com/vr/unity/
78. http://dentedpixel.com/LeanTweenDocumentation/classes/LeanTween.html LeanTween.move(gameObject, new Vector3(0f,1f,2f), 1f).setEase(LeanTweenType.easeInQuad).setDelay(1f);
81. Fidelity of prototype
82. User testing
83. Hand over to development
84. Sizes and distances
85. Code snippets
86. Final Gear VR App
87. http://www.uxofvr.com
88. It’s pioneer work, baby!
89. delightex.com/#join-us We like pioneers @ Delightex
90. One more thing
91. Sneak peek: Scripting in CoSpaces
92. Example on GitHub github.com/delightex/cospaces-scripts
93. Sign up for CoSpaces scripting
 early access
94. Hasta la vista.
 Questions? @cospaces_io
 @Thomas_Glaeser
 @XaverLoe