Design for VR - workshop for IDF Bangalore

Kumar AhirSelf-Employed Consultant
Design for
Virtual Reality (VR)
Kumar Ahir May 18
Twitter: @kernel_kumar
LinkedIn: in/kumarahir
since 2008 ...
Interaction Design, IDC
MahaWar - strategy board game
OoBI alpha - first multitouch
OoBI - Out of Box Interactions -
Exit to PropTiger
6 month startup - sold
Brief walkthrough
Design for VR - workshop for IDF Bangalore
Interior Designer
Am an entrepreneur now bit selfish
Evangelize VR
Design inferences
Get ideas
Increase product reach
“2018 - Investing in talking to people”
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
VR | AR | MR | XR
Understand the difference or similarities
Virtual | Augmented | Mixed | Extended
Understand the difference
Virtual Augmented Mixed Extended
Difference by Hardware
Block the real world
Teleport to a new world and time
Part of simulation
Overlay information
View the real world
Present in time and space
Part of real world
Design for VR - workshop for IDF Bangalore
Why Design for VR?
Gartner Hype cycle
Design Tech
Report 2018
John Maeda
Immersive interface
- future
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
Why should DESIGNERS pay attention ?
if you currently own a smartphone
chances are, you are already carrying a virtual
reality device in your pocket
Tech behind VR
Physiology of eyes
The human lens bends light
varying on the distance of an object
Design for VR - workshop for IDF Bangalore
VR Concepts
FOV - Field of view
FOV - Field of view
FOV - Field of view
Latency / Video lag
Expected: 7 ms
Current: 50 ms
Oculus: 30-40 ms
Mobile VR: 40-90 ms
Vive: 8-10 ms
Degree of Freedom - DOF
Extended reality
Input - Interaction
Controller - 3 DoF
Controller - 6 DoF
bit of History
32000 years old
Early traces of VR
Design for VR - workshop for IDF Bangalore
Early days
Field of View - FOV
Enterprise only
Specialized operations
1955 1961 1961 1995
Color limitations
Oculus 2012 - Kickstarter project
Wider FOV
Low Latency
Low Cost
Design for VR - workshop for IDF Bangalore
Google Cardboard - 2014 - pet project
Proto version
Mobile VR
Quick fix
< Rs. 500
VR headsets
HTC Vive
Oculus rift
Google Daydream - Lenovo Pico
Samsung Gear VR
Google Cardboard
VR Design fundas
Context Users Goals
Design Process
user personas, conceptual flows, wireframes, an interaction model
Digital Designer
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 - legibility
Shape vs volume
User Point of reference - stationary vs moving
Seated vs Standing interaction
Spatial sound/audio
Ergonomics - physiological, environment
Design elements
Input controls - internal, external
Environment - skybox - background
Hover is back
Recticle -> Head -> Body
They are in cm, m, in, ft and degrees
Screens are fixed distance and area
Immersive world has depth
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
Depth Perception
Motion Parallax
X, Y, Z
Movement in VR helps us to perceive depth
Depth Perception
Motion Parallax
X, Y, Z
Movement in VR helps us to
perceive depth
Depth Perception
Motion Parallax
Familiar size
Texture gradient
Motion parallax and Occultation
Design for VR - workshop for IDF Bangalore
Peripheral vision
Design of notifications
Stationary controls - HUD
Avoid showing text on white and translucent
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
Shape vs Volume
Point of reference
Stationary MovingControls placement
2d Layout vs 3d object placements
Interactive elements - near and far
Framing the content
Ground the user
Seated vs Standing vs Movement
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
Spatial audio is a key ingredient for true immersion,
making the design process around sound absolutely essential
Hand - Fingers
Input controls
Reticle - Head
Input controls
HMD switch
Input controls
Input controls
Leap motion
3d objects
The secondary world
Scene elements and depth of layers
Design for VR - workshop for IDF Bangalore
Skybox and
placement of
Foreground - interactable 3D objects
Midground - distant messages or
scenery that confer scale and depth
Skybox - wrapping the scene
Capturing Skybox images
Hover is back
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
In the age of
digital tools for
design and
We are going to
use paper
Paper wireframing
Let’s design
Real Space
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
Design for VR - workshop for IDF Bangalore
Design Exercise
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
A traffic light is 4.57 meters tall (around 15 feet).
Let’s create a paper wireframe
Product browser
Image gallery - browsing
Music player - playback
Personal Website
Low Fi proto - cardboard
UsersGoals Context
Tools for hi-fi prototypes
My co-ordinates
VR design resources
Daydream - VR Design process -
Riding on shoulders of GIANTS
1 of 84

More Related Content

What's hot(20)

Linea31991.3K views
株式会社ジェンデザイン49.8K views

More from Kumar Ahir(7)

Designing for Virtual RealityDesigning for Virtual Reality
Designing for Virtual Reality
Kumar Ahir90 views
Kumar Ahir1.4K views
Build an AR app v2.0Build an AR app v2.0
Build an AR app v2.0
Kumar Ahir8.8K views
Build an AR appBuild an AR app
Build an AR app
Kumar Ahir96 views

Recently uploaded(20)

Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman15 views
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe239 views
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28213 views
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen7 views
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa36 views
scribddarkened352233 views
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal Chemistry
NarminHamaaminHussen9 views
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman258 views
Rabius Sany38 views
Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper217 views
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 views
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman10 views
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 views
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman13 views
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 views

Design for VR - workshop for IDF Bangalore

Editor's Notes

  1. Case study: Unity VR design tricks: VR/AR fundamentals :
  2. 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
  3. 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.
  4. 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.
  5. 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.
  6. Amazing collection of VR history
  7. 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.
  8. 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.
  10. DearVR:!/content/56127?aid=1011lIv9 WWise: FMOD: Cubase:
  11. 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.
  12. 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.
  13. 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
  17. Volodymyr Kurbatov