UX & UI in VR

Conventional vs Virtual Reality UX

For the last decade or so, UX/UI design has been optimized for interaction with 2 dimensional screens; be it a smartphone, a tablet, a laptop, or a smart watch.

It’s come to a point where specialized tools such as Bohemian Sketch and Adobe UX help designers with building high-fidelity, interactive process flow in relatively fast pace.

Virtual Reality, specifically one using motion-trackable head-mount displays have been developed for quite a while, but have yet to reach a level of refinement or sophistication as its 2D screen counterpart. 2D screens media has been though a similar phase of disorientation.

Defining the Hardware

Standalone 6DoF HMD

Field of View 95° ~ 110°

Comfortable left/right rotation +-30° (max +-55°)

Comfortable Up +20° (max +60)

Comfortable Down -12° (max -40)

Primary UI elements within +-30°

Default focus at -6° ~15 below horizon line

Cylindrical contour with center point behind user

Anything within ~0.3m will probably get clipped

Anything within ~0.5m is straining to eye.

0.5m~10m has Strong 3D depth effect

10m~20m shows Some 3D depth

20m~ effectively flat to eye

Rift/Oculus has focus distance of 2m

0.75m~4m is the sweet spot to put things that are seen regularly.

comfortable arm’s reach distance is usually within ~0.5m, keep everything within ~0.7m

Text & Readability

readability in VR

Popular current HMV hardwares have approx. 10~15 ppd pixel density.

Taking from a conventional body text size of 16pt at 0.5m comfortable reading distance, we get 11.3mm @1m to be a good text size. However, even at the higher-end 15 ppd density, the pixel per inch equivalent of screen density is only around 50ppi at 1 meters. To achieve the similar effect of text in 100ppi density, we need to double or triple the text size for a comfortable readability. Effectively, 23 ~ 34mm is the recommended body text size @ 1 meter.

fortunately, Google’s daydream team has developed a custom unit called DMM for use in such situation. Using the dmm unit, (distance-independent unit, calculated 1mm @ 1m distance) a safe guide for text & hit size is calculated. 

Text Size

Headline: 40dmm, Title 32dmm, subhead 28dmm, Body 24dmm, Caption 20dmm, Button 24dmm.

Hit Size

Minimum 64*64dmm + 16dmm padding

Comfortable 96*96dmm + 16dmm padding