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 Virtual Reality - VR

159 views

Published on

This is compilation of the my learning, experience and online study while Designing interfaces for Virtual Reality applications

Published in: Design
  • Be the first to comment

Design for Virtual Reality - VR

  1. 1. Design for Virtual Reality (VR) Kumar Ahir Jan18 @kernel_kumar www.kumarahir.com
  2. 2. since 2008 ... Interaction Design, IDC MahaWar - strategy board game OoBI alpha - first multitouch OoBI - Out of Box Interactions – www.oobi.in Exit to PropTiger now... Brief walkthrough Twitter: @kernel_kumar www.kumarahir.com kumar.ahir@gmail.com
  3. 3. Am entrepreneur now bit selfish Evangelize VR Design inferences Get ideas Increase product reach “2018 - Investing in talking to people”
  4. 4. Why Design for VR?
  5. 5. Gartner Hype cycle
  6. 6. Immersive interface - future
  7. 7. It’s going to be super hot Investments Products Hardware Low entry barrier
  8. 8. 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
  9. 9. Why should DESIGNERS pay attention ? if you currently own a smartphone chances are, you are already carrying a virtual reality device in your pocket
  10. 10. What is VR?
  11. 11. 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
  12. 12. https://www.seevividly.com/info/Virtual_Reality/VR_and_Human_Vision
  13. 13. VR Concepts FOV Latency DOF Input/Interaction
  14. 14. Industry landscape
  15. 15. 32000 years old Early traces of VR
  16. 16. Early days Bulky Latency Field of View - FOV Cost Enterprise only Specialized operations 1955 1961 1961 1995 Color limitations Ergonomics
  17. 17. Oculus 2012 - Kickstarter project Wider FOV Low Latency Consumer Low Cost
  18. 18. Google Cardboard - 2014 - pet project Proto version Mobile VR Quick fix < Rs. 500
  19. 19. VR headsets Sony HTC Vive Oculus rift Google Daydream - Lenovo Pico Samsung Gear VR Google Cardboard standalone
  20. 20. Companies and investments Facebook Google HTC Microsoft Samsung Sony Nvidia, Intel ~ $ 800mn in 2017 Q2 ~ $ 3bn till date ~ $ 5bn in 2018 Source: Digi Capita
  21. 21. VR Market Gaming Healthcare Engineering Live Events Video Real estate Retail Military Education Goldman Sachs forecast for 2025
  22. 22. VR content market Video posts have 135% greater organic reach than photo posts People spend 3x longer watching video which is Live compared to video which is no longer Live https://medium.com/omnivirt/360-video-vr-performance-statistics-from-1000-campaigns-2f7343ecfe13 https://www.socialmediatoday.com/marketing/top-5-facebook-video-statistics- 2016-infographic
  23. 23. Why so hot? View Hardware prices have gone down drastically 360 Capture hardware growth H/W capable of delivering high quality output - UX Low cost hardware Portable - mobile phones Platform and frameworks utilizing h/w capabilities IMMERSIVE
  24. 24. VR Design fundas
  25. 25. 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
  26. 26. Digital Designer for Real Space
  27. 27. What are you designing Controls or Space
  28. 28. 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...
  29. 29. Design elements Motion Input controls - internal, external Environment - skybox - background Hover is back
  30. 30. 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
  31. 31. Dimensions X, y, z
  32. 32. Peripheral vision Design of notifications Stationary controls - HUD
  33. 33. 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
  34. 34. Shape vs Volume
  35. 35. Point of reference Stationary MovingControls placement 2d Layout vs 3d object placements Interactive elements - near and far Movement Framing the content Ground the user
  36. 36. Seated vs Standing vs Movement
  37. 37. Motion Avoid lateral motion with close/large objects, and at high speeds Avoid fast motion toward the user Be careful about moving the user
  38. 38. Audio/Sound Spatial audio is a key ingredient for true immersion, making the design process around sound absolutely essential
  39. 39. Ergonomics Physiological Surrounding Eyes Eye Hand - Fingers Body
  40. 40. Input controls Reticle - Head
  41. 41. Input controls HMD switch
  42. 42. Input controls controllers
  43. 43. Input controls Hands Leap motion
  44. 44. Environment Skybox 3d objects
  45. 45. Hover is back
  46. 46. 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
  47. 47. In the age of digital tools for design and prototyping We are going to use paper wireframing
  48. 48. Paper wireframing
  49. 49. Let’s design Real Space
  50. 50. Volodymyr Kurbatov
  51. 51. Design Exercise
  52. 52. Let’s create a paper wireframe Personal Website Image gallery - browsing Music player - playback WebVR Low Fi proto - cardboard
  53. 53. My co-ordinates kumar.ahir@gmail.com @kernel_kumar
  54. 54. VR design resources https://www.uxofvr.com/ https://sizecalc.com/ Daydream - VR Design process - https://www.youtube.com/watch?v=- mcXAMDch7s
  55. 55. 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/

×