Successfully reported this slideshow.

Design for VR - workshop for IDF Bangalore

3

Share

Loading in …3
×
1 of 84
1 of 84

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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/

Editor's Notes

  • https://medium.com/humane-virtuality/product-presentation-in-virtual-reality-28f98ca2eb9
    https://virtualrealitypop.com/designing-for-presence-in-vr-part-3-analysis-design-case-studies-5eedeb7b3a01
    Case study: https://uxplanet.org/a-hyper-reality-world-human-experience-design-principles-vr-case-study-226bcf509703
    Unity VR design tricks: http://response.unity3d.com/artist-vr?utm_campaign=saas_global_nurture_2017-Pro-Plus-CLC-Stage-A&utm_content=2017-06-global-clc-A-programmer-9&utm_medium=email&utm_source=Eloqua&elqTrackId=ea8fa08cd9824ddb8c66be392b0d1c97&elq=0e1ecf7690ea4c6696b65b094e4883ea&elqaid=5520&elqat=1&elqCampaignId=2945
    VR/AR fundamentals : https://medium.com/@michaelnaimark/vr-ar-fundamentals-prologue-b7aa3d119087

  • The red pill would free him from the enslaving control of the machine-generated dream world and allow him to escape into the real world, but living the "truth of reality" is harsher and more difficult.
    On the other hand, the blue pill would lead him back to stay in the comfortable simulated reality of the Matrix
  • The central observation is that the amount by which light rays from an object diverge at the eye’s lens depends on the distance from the object to the eye. If the object is close, the rays diverge at a large angle (see Figure 1, left); if the object is at a medium distance, the rays diverge less (see Figure 1, center); if the object is infinitely far away, the rays are parallel and do not diverge at all. In other words: the closer an object is to the eye, the more the eye’s lens has to bend the incoming light rays to form a sharp image on the retina.
  • If we extend the light rays between the intermediate lens and the eye backwards (the fainter lines on the right of Figure 2), we find that they all intersect in a single point behind the real screen. To the eye, it looks exactly like a screen that is farther away and larger (the grey horizontal line on the right of Figure 2). This is called a virtual image. And that’s why viewers can comfortably focus on the screens in HMDs: they are not looking at the real screens, which are too close, but at virtual images of the real screens, which are at a much larger distance.
  • Top-down view of how our left and right eyes see different images. Remember, binocular is what we see in reality and in virtual reality. The monocular perspective is what we see when we play video games or develop VR apps on a laptop.
  • Amazing collection of VR history
    https://medium.com/inborn-experience/vr-ar-prototyping-for-everyone-ea6fb8f159b5
  • See how the picture below looks strange because we can’t move around in it

    To create comfortable immersion it helps to understand depth perception.
    Depth perception comes from an array of depth cues. These are split up into binocular and monocular cues. Binocular cues provide depth information when viewing a scene with both eyes. Monocular cues provide depth information when viewing a scene with one eye.
    We use two binocular cues and 15 monocular cues to perceive depth. We use 7X more cues to perceive depth with 1 eye! Understanding how we see depth with 1 eye helps us to build more comfortable VR scenes.
  • Familiar size: Borrow from the real world, and size and scale objects so that they look and feel real to the player.
    Texture gradient: Objects that are farther away or higher up, should have a lighter shader/color than those that appear closer.
    Motion parallax and Occultation: Consider how to place one object in front of another to create a sense of depth.
  • https://medium.com/inborn-experience/10-rules-of-using-fonts-in-virtual-reality-da7b229cb5a1
    https://sizecalc.com/
  • DearVR: https://www.assetstore.unity3d.com/#!/content/56127?aid=1011lIv9
    WWise: https://www.audiokinetic.com/products/wwise/
    FMOD: http://www.fmod.org/
    Cubase: https://www.steinberg.net/en/products/cubase/start.html
    http://pro.3dsoundlabs.com/category/vr-audio-engine/
  • Imagine standing on a mountain, looking up and around with a clear view of the sky and clouds surrounding you. This is our real-world skybox. It’s what we perceive as far as the eye can see. It’s all around us, above and to the horizon in every direction. It’s our backdrop.

    As a design element, the skybox is really just a sphere of imagery that can be made from a photo, texture, or rendered artwork. When it’s placed in a scene, it extends out to infinity without a perceivable edge, giving an illusion of depth and reality. The skybox is an essential component in virtual reality design — it’s like a panoramic wrapper that projects an entire background scene onto your interface.

    https://medium.com/aol-alpha/making-sense-of-skyboxes-in-vr-design-3e9f8fe254d3
  • a skybox can really be anything that creates the outermost limits of a scene that you are designing. It could be a solid color that sits behind the menu in a static scene. It could also be a real photograph or a 360˙ video that’s playing. It could be the outer limits of a rendered 3D universe — you could be swimming underwater, floating in outer space, or walking around an animated experience.
  • In the foreground you might have interactable 3D objects like buttons the player can touch to deploy a menu, or logs of wood they can pick up, or they run into wild wolves that try to attack them.
    In the midground, you might have distant messages or scenery that confer scale and depth.
    And lastly, the skybox resides in the background, expanding out to infinity and wrapping the scene
  • https://medium.com/aol-alpha/how-to-design-vr-skyboxes-d460e9eb5a75
  • https://developers.google.com/vr/distribute/daydream/design-requirements
  • http://www.panoform.com/#
    https://medium.com/inborn-experience/vr-sketches-56599f99b357
  • Volodymyr Kurbatov
  • https://medium.com/humane-virtuality/product-presentation-in-virtual-reality-28f98ca2eb9
  • https://design.tutsplus.com/tutorials/how-to-draw-a-stick-figure-a-complex-guide--cms-23620
  • https://medium.com/@indiecontessa/strategies-for-vr-prototyping-810e0d3aa21d
  • ×