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.

Design for VR - workshop for IDF Bangalore

229 views

Published on

Session and Workshop for IDF Bangalore community on Design for Virtual Reality

Published in: Design
  • Be the first to comment

Design for VR - workshop for IDF Bangalore

  1. 1. Design for Virtual Reality (VR) Kumar Ahir May 18 Twitter: @kernel_kumar LinkedIn: in/kumarahir
  2. 2. since 2008 ... Interaction Design, IDC MahaWar - strategy board game OoBI alpha - first multitouch OoBI - Out of Box Interactions - oobi.in Exit to PropTiger 6 month startup - sold now... Brief walkthrough @kernel_kumar kumar.ahir@gmail.com
  3. 3. Interior Designer
  4. 4. Am an entrepreneur now bit selfish Evangelize VR Design inferences Get ideas Increase product reach “2018 - Investing in talking to people”
  5. 5. VR | AR | MR | XR Understand the difference or similarities Virtual | Augmented | Mixed | Extended Understand the difference Virtual Augmented Mixed Extended
  6. 6. https://blogs.unity3d.com/2017/09/05/looking-to-the-future-of-mixed-reality-part-i/
  7. 7. Difference by Hardware
  8. 8. Virtual Immersive Block the real world Teleport to a new world and time Part of simulation Augmented Overlay information View the real world Present in time and space Part of real world
  9. 9. Why Design for VR?
  10. 10. Gartner Hype cycle
  11. 11. Design Tech Report 2018 by John Maeda
  12. 12. Immersive interface - future
  13. 13. Why should DESIGNERs pay attention ? It’s still undefined - nanscent and evolving not boxes and arrows in flat screen - Designing real space It’s about real immersive interaction - the UX Not just window to digital world but THE WORLD No more fiction - It’s real in your hands as Native mobile apps - increasing Is it different than current UI design? Will find out
  14. 14. Why should DESIGNERS pay attention ? if you currently own a smartphone chances are, you are already carrying a virtual reality device in your pocket
  15. 15. Tech behind VR
  16. 16. https://www.seevividly.com/info/Virtual_Reality/VR_and_Human_Vision Physiology of eyes The human lens bends light varying on the distance of an object
  17. 17. https://www.seevividly.com/info/Virtual_Reality/VR_and_Human_Vision
  18. 18. VR Concepts FOV Latency DOF Input/Interaction
  19. 19. FOV - Field of view
  20. 20. FOV - Field of view
  21. 21. FOV - Field of view
  22. 22. Latency / Video lag Expected: 7 ms Current: 50 ms Oculus: 30-40 ms Mobile VR: 40-90 ms Vive: 8-10 ms
  23. 23. Degree of Freedom - DOF 3 DOF 6 DOF Extended reality
  24. 24. Input - Interaction Headset Gaze Controller - 3 DoF Controller - 6 DoF
  25. 25. bit of History
  26. 26. 32000 years old Early traces of VR
  27. 27. Early days Bulky Latency Field of View - FOV Cost Enterprise only Specialized operations 1955 1961 1961 1995 Color limitations Ergonomics
  28. 28. Oculus 2012 - Kickstarter project Wider FOV Low Latency Consumer Low Cost
  29. 29. Google Cardboard - 2014 - pet project Proto version Mobile VR Quick fix < Rs. 500
  30. 30. VR headsets Sony HTC Vive Oculus rift Google Daydream - Lenovo Pico Samsung Gear VR Google Cardboard standalone
  31. 31. VR Design fundas
  32. 32. Context Users Goals Design Process Experience Immersion Learning Explore Media Gamers Enterprise Entertainment Gaming Healthcare Automotive Manufacturing Design user personas, conceptual flows, wireframes, an interaction model
  33. 33. Digital Designer for Real Space
  34. 34. What are you designing Controls or Space
  35. 35. Design elements Units - not pixels but cm, inch, feet, m Dimension - x,y,z - near and far Peripheral vision Typography - legibility Shape vs volume User Point of reference - stationary vs moving Seated vs Standing interaction Spatial sound/audio Ergonomics - physiological, environment contd...
  36. 36. Design elements Motion Input controls - internal, external Environment - skybox - background Hover is back
  37. 37. Units https://virtualrealitypop.com/practical-vr-ce80427e8e9d Recticle -> Head -> Body They are in cm, m, in, ft and degrees NOT PIXELS Screens are fixed distance and area Immersive world has depth
  38. 38. Dimensions Depth Perception Motion Parallax X, Y, Z Movement in VR helps us to perceive depth
  39. 39. Dimensions Depth Perception Motion Parallax X, Y, Z Movement in VR helps us to perceive depth
  40. 40. Dimensions Depth Perception Motion Parallax Familiar size Texture gradient Motion parallax and Occultation
  41. 41. Peripheral vision Design of notifications Stationary controls - HUD
  42. 42. Typography Avoid showing text on white and translucent backgrounds Minimum readable size for the font in VR is height of 2.32cm on the distance of one meter Recommended size of the font is height of 6.04cm on the distance of one meter Try https://coob113.github.io/font_test/size.html
  43. 43. Shape vs Volume
  44. 44. Point of reference Stationary MovingControls placement 2d Layout vs 3d object placements Interactive elements - near and far Movement Framing the content Ground the user
  45. 45. Seated vs Standing vs Movement
  46. 46. Motion Avoid lateral motion with close/large objects, and at high speeds Avoid fast motion toward the user Be careful about moving the user Maintain a visible stable horizon line Don’t show sudden acceleration or deceleration Let players choose their own height Give them the option to sit or stand Fairvalley, Meantime, Meditation VR
  47. 47. Audio/Sound Spatial audio is a key ingredient for true immersion, making the design process around sound absolutely essential
  48. 48. Ergonomics Physiological Surrounding Eyes Eye Hand - Fingers Body
  49. 49. Input controls Reticle - Head
  50. 50. Input controls HMD switch
  51. 51. Input controls controllers
  52. 52. Input controls Hands Leap motion
  53. 53. Environment Skybox 3d objects
  54. 54. Skybox The secondary world Background Scene elements and depth of layers
  55. 55. Skybox and placement of information Foreground - interactable 3D objects Midground - distant messages or scenery that confer scale and depth Skybox - wrapping the scene Capturing Skybox images
  56. 56. Hover is back
  57. 57. Googles’ design guidelines for VR 1. Using a Reticle 2. UI Depth & Eye Strain 3. Using Constant Velocity 4. Keeping the User Grounded 5. Maintaining Head Tracking 6. Guiding with Light 7. Leveraging Scale 8. Spatial Audio 9. Gaze Cues 10. Make it Beautiful
  58. 58. In the age of digital tools for design and prototyping We are going to use paper wireframing
  59. 59. Paper wireframing
  60. 60. Let’s design Real Space
  61. 61. Design Exercise
  62. 62. Warm up 1. Fail and learn - Draw anything and see 2. Draw basic shapes 3. Determine your comfortable viewing area 4. Add colors 5. Check your name in VR in 3D A typical stop sign is 1.82 meters tall (around 6 feet). A traffic light is 4.57 meters tall (around 15 feet).
  63. 63. Let’s create a paper wireframe Product browser Image gallery - browsing Music player - playback Personal Website WebVR Low Fi proto - cardboard UsersGoals Context
  64. 64. Tools for hi-fi prototypes A-frame Unity
  65. 65. My co-ordinates kumar.ahir@gmail.com @kernel_kumar
  66. 66. VR design resources https://www.uxofvr.com/ https://sizecalc.com/ Daydream - VR Design process - https://www.youtube.com/watch?v=-mcXAMDch7s
  67. 67. Riding on shoulders of GIANTS https://medium.com/inborn-experience/vr-ar-prototyping-for-everyone-ea6fb8f159b5 https://www.slideshare.net/robinmedelange/virtual-reality-history-state-of-the-art https://www.webpagefx.com/data/why-virtual-reality-matters-to-marketing/ https://developers.google.com/vr/distribute/daydream/design-requirements https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/ https://www.linkedin.com/pulse/ux-virtual-reality-designing-interfaces-without-prashanth-shanmugam https://medium.com/omnivirt/360-video-vr-performance-statistics-from-1000-campaigns-2f7343ecfe13 http://mediakix.com/2016/08/facebook-video-statistics-everyone-needs-know/#gs.8qmE7vE http://realityshift.io/ Uploadvr.com Roadtovr.com https://medium.com/@V_Kurbatov https://virtualrealitypop.com/practical-vr-ce80427e8e9d https://medium.com/aol-alpha/making-sense-of-skyboxes-in-vr-design-3e9f8fe254d3 https://www.slideshare.net/AugmentedWorldExpo/john-howard-loook-inc-uxui-design-for-vr-and-mixed-reality https://medium.com/@LeapMotion/vr-design-best-practices-bb889c2dc70 https://www.upwork.com/hiring/for-clients/beginners-guide-to-designing-virtual-reality/

×