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

Prototyping for VR

D79009327461f295ee9ba923a8a5281d?s=47 Thomas Gläser
September 06, 2016

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

D79009327461f295ee9ba923a8a5281d?s=128

Thomas Gläser

September 06, 2016
Tweet

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

  4. None
  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
  29. None
  30. youtube.com/watch?v=lHzCmfuJYa4

  31. 2. Best practices
 Design patterns for VR

  32. Selecting
 Reticle

  33. None
  34. None
  35. None
  36. None
  37. Selecting
 Fuse button

  38. None
  39. None
  40. Selecting
 Ground menu

  41. None
  42. Selecting
 Laserpointer (ray casting)

  43. None
  44. Selecting
 Controller menu

  45. None
  46. Selecting
 Dashboards (Spatial UI)

  47. None
  48. Text display
 Head-up

  49. None
  50. Text display
 In space

  51. None
  52. None
  53. Interacting in space Diegetic UI solutions

  54. None
  55. Moving
 Teleporting (inner space)

  56. None
  57. None
  58. None
  59. Moving
 Teleporting (outer space)

  60. None
  61. Moving
 Free walking

  62. None
  63. Text input Speech & keyboard

  64. None
  65. Providing guidance Audio feedback

  66. None
  67. Supporting immersion Spatial audio

  68. None
  69. None
  70. 3. Prototyping process
 for a better UX in VR

  71. None
  72. Bring a 2D dashboard to VR

  73. Inspired by reality

  74. No specific VR tools right now,
 but game engines… unity3d.com

  75. None
  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);

  79. None
  80. None
  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