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)
Kumar Ahir Jan18
@kernel_kumar
www.kumarahir.com
since 2008 ...
Interaction Design, IDC
MahaWar - strategy board game
OoBI alpha - first multitouch
OoBI - Out of Box Inter...
Am entrepreneur now bit selfish
Evangelize VR
Design inferences
Get ideas
Increase product reach
“2018 - Investing in talk...
Why Design for VR?
Gartner Hype cycle
Immersive
interface - future
It’s going to be super hot
Investments
Products
Hardware
Low entry barrier
Why should DESIGNERs pay attention ?
It’s still undefined - nanscent and evolving
not boxes and arrows in flat screen - De...
Why should DESIGNERS pay attention ?
if you currently own a smartphone
chances are, you are already carrying a virtual rea...
What is VR?
https://www.seevividly.com/info/Virtual_Reality/VR_and_Human_Vision
Physiology of eyes
The human lens bends light
varying ...
https://www.seevividly.com/info/Virtual_Reality/VR_and_Human_Vision
VR Concepts
FOV
Latency
DOF
Input/Interaction
Industry landscape
32000 years old
Early traces of VR
Early days
Bulky
Latency
Field of View - FOV
Cost
Enterprise only
Specialized operations
1955 1961 1961 1995
Color limitat...
Oculus 2012 - Kickstarter project
Wider FOV
Low Latency
Consumer
Low Cost
Google Cardboard - 2014 - pet project
Proto version
Mobile VR
Quick fix
< Rs. 500
VR headsets
Sony
HTC Vive
Oculus rift
Google Daydream - Lenovo Pico
Samsung Gear VR
Google Cardboard
standalone
Companies and investments
Facebook
Google
HTC
Microsoft
Samsung
Sony
Nvidia, Intel
~ $ 800mn in 2017 Q2
~ $ 3bn till date
...
VR Market
Gaming
Healthcare
Engineering
Live Events
Video
Real estate
Retail
Military
Education
Goldman Sachs forecast for...
VR content market
Video posts have 135%
greater organic reach
than photo posts
People spend 3x longer
watching video which...
Why so hot?
View Hardware prices have gone down drastically
360 Capture hardware growth
H/W capable of delivering high qua...
VR Design fundas
Context Users Goals
Design Process
Experience
Immersion
Learning
Explore
Media
Gamers
Enterprise
Entertainment
Gaming
Heal...
Digital Designer
for
Real Space
What are you designing
Controls or Space
Design elements
Units - not pixels but cm, inch, feet, m
Dimension - x,y,z - near and far
Peripheral vision
Typography - l...
Design elements
Motion
Input controls - internal, external
Environment - skybox - background
Hover is back
Units
https://virtualrealitypop.com/practical-vr-ce80427e8e9d
Recticle -> Head -> Body
They are in cm, m, in, ft and degre...
Dimensions
X, y, z
Peripheral vision
Design of notifications
Stationary controls - HUD
Typography
Avoid showing text on white and translucent
backgrounds
Minimum readable size for the font in VR is height
of 2...
Shape vs Volume
Point of reference
Stationary MovingControls placement
2d Layout vs 3d object placements
Interactive elements - near and f...
Seated vs Standing vs Movement
Motion
Avoid lateral motion with close/large objects, and at high speeds
Avoid fast motion toward the user
Be careful abou...
Audio/Sound
Spatial audio is a key ingredient for true immersion,
making the design process around sound absolutely essent...
Ergonomics
Physiological
Surrounding
Eyes
Eye
Hand - Fingers
Body
Input controls
Reticle - Head
Input controls
HMD switch
Input controls
controllers
Input controls
Hands
Leap motion
Environment
Skybox
3d objects
Hover is back
Googles’ design guidelines for VR
1. Using a Reticle
2. UI Depth & Eye Strain
3. Using Constant Velocity
4. Keeping the Us...
In the age of
digital tools for
design and
prototyping
We are going to
use paper
wireframing
Paper wireframing
Let’s design
Real Space
Volodymyr Kurbatov
Design Exercise
Let’s create a paper wireframe
Personal Website
Image gallery - browsing
Music player - playback
WebVR
Low Fi proto - card...
My co-ordinates
kumar.ahir@gmail.com
@kernel_kumar
VR design resources
https://www.uxofvr.com/
https://sizecalc.com/
Daydream - VR Design process - https://www.youtube.com/w...
Riding on shoulders of GIANTS
https://medium.com/inborn-experience/vr-ar-prototyping-for-everyone-ea6fb8f159b5
https://www...
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Design for Virtual Reality - VR
Upcoming SlideShare
Loading in …5
×

Design for Virtual Reality - VR

232 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/

×