Design for VR - workshop for IDF Bangalore
•3 likes•419 views
Download to read offline
Report
Session and Workshop for IDF Bangalore community on Design for Virtual Reality
Recommended
More Related Content
What's hot
What's hot(20)
Similar to Design for VR - workshop for IDF Bangalore
Similar to Design for VR - workshop for IDF Bangalore(20)
More from Kumar Ahir
More from Kumar Ahir(7)
Recently uploaded
Recently uploaded(20)
Design for VR - workshop for IDF Bangalore
- 1. Design for Virtual Reality (VR) Kumar Ahir May 18 Twitter: @kernel_kumar LinkedIn: in/kumarahir
- 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
- 5. Am an entrepreneur now bit selfish Evangelize VR Design inferences Get ideas Increase product reach “2018 - Investing in talking to people”
- 8. VR | AR | MR | XR Understand the difference or similarities Virtual | Augmented | Mixed | Extended Understand the difference Virtual Augmented Mixed Extended
- 11. 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
- 13. Why Design for VR?
- 15. Design Tech Report 2018 by John Maeda
- 17. 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
- 18. Why should DESIGNERS pay attention ? if you currently own a smartphone chances are, you are already carrying a virtual reality device in your pocket
- 19. Tech behind VR
- 20. 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
- 24. FOV - Field of view
- 25. FOV - Field of view
- 26. FOV - Field of view
- 27. Latency / Video lag Expected: 7 ms Current: 50 ms Oculus: 30-40 ms Mobile VR: 40-90 ms Vive: 8-10 ms
- 28. Degree of Freedom - DOF 3 DOF 6 DOF Extended reality
- 29. Input - Interaction Headset Gaze Controller - 3 DoF Controller - 6 DoF
- 30. bit of History
- 31. 32000 years old Early traces of VR
- 33. Early days Bulky Latency Field of View - FOV Cost Enterprise only Specialized operations 1955 1961 1961 1995 Color limitations Ergonomics
- 34. Oculus 2012 - Kickstarter project Wider FOV Low Latency Consumer Low Cost
- 36. Google Cardboard - 2014 - pet project Proto version Mobile VR Quick fix < Rs. 500
- 37. VR headsets Sony HTC Vive Oculus rift Google Daydream - Lenovo Pico Samsung Gear VR Google Cardboard standalone
- 38. VR Design fundas
- 39. 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
- 41. What are you designing Controls or Space
- 42. 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...
- 43. Design elements Motion Input controls - internal, external Environment - skybox - background Hover is back
- 44. 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
- 47. Dimensions Depth Perception Motion Parallax X, Y, Z Movement in VR helps us to perceive depth
- 48. Dimensions Depth Perception Motion Parallax X, Y, Z Movement in VR helps us to perceive depth
- 49. Dimensions Depth Perception Motion Parallax Familiar size Texture gradient Motion parallax and Occultation
- 51. Peripheral vision Design of notifications Stationary controls - HUD
- 52. 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
- 53. Shape vs Volume
- 54. Point of reference Stationary MovingControls placement 2d Layout vs 3d object placements Interactive elements - near and far Movement Framing the content Ground the user
- 55. Seated vs Standing vs Movement
- 56. 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
- 57. Audio/Sound Spatial audio is a key ingredient for true immersion, making the design process around sound absolutely essential
- 59. Input controls Reticle - Head
- 64. Skybox The secondary world Background Scene elements and depth of layers
- 66. 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
- 67. Hover is back
- 68. 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
- 69. In the age of digital tools for design and prototyping We are going to use paper wireframing
- 78. Design Exercise
- 79. 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).
- 80. Let’s create a paper wireframe Product browser Image gallery - browsing Music player - playback Personal Website WebVR Low Fi proto - cardboard UsersGoals Context
- 81. Tools for hi-fi prototypes A-frame Unity
- 83. VR design resources https://www.uxofvr.com/ https://sizecalc.com/ Daydream - VR Design process - https://www.youtube.com/watch?v=-mcXAMDch7s
- 84. 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