UI depth in VR is a unique feature which can create stunning effects both in the level of information and visual style. While the distance, size and layer should be well considered.

Introduction

Recently, Microsoft (2017) has launched Fluent Design System, and some of the elements are specially created for head-mounted display (including MR, VR and AR). Compared with other screen-based displays, the head-mounted display can provide more depth information, which is the most different feature between traditional UI and VR UI. According to the feature of visual depth perception, what opportunities and challenges will we meet in UI design? The following sections are the points concluded from my experience and some references.


Depth for Comfortable Reading

The reason for which we can see both far and close objects depends on the thickness of crystalline lens. The thicker the crystalline lens are, the more tension our eyes will suffer from. In Virtual Reality, how long does the distance make it comfortable to read the text without eyestrain? The following diagram is the reading performance In different distances.


Distance-Related Reading Performance

In general, 1m to 3m is a comfortable reading distance. While it is easy to cause eye discomfort when UI or other objects are in a distance less than 0.5m.

Sense of 3D

The keynote of Samsung Developer Conference (2014) indicates that the distance between 0.5m and 1m can bring strong sense of 3D. The closer the object is, the stronger 3D you will perceive. While the sense of 3D is weaken between the distance of 10m and 20m, and it does not vary much with the distance increasing. Beyond 20m the objects will become totally flat.


Distance-Related Reading Performance

The sense of 3D directly affects our immersive experience. If we create a scene in a certain room, the main objects in the scene would better be placed within 10m from the avatar. If we create a scene with plenty of room, some random objects can be placed on the path the avatar must go through. For example, the roller coaster in VR is of plenty room, and some objects like the billboard or other gadgets can be placed beside the track so as to strenthen the immersion.

Font Size for Reading

In most cases in UI design, the minimal readable font size tends to be normalized in different platforms. For web, the minimal font size must be not smaller than 12 pixels, while that of the long text is 16 pixel. For mobile UI, the font size is usually between 20 to 42 pixels. Similarly, what is the standard of font size in VR UI? In order to elaborate this problem, some concepts will be drawn on from Google I/O (2017) as following.


font size and distance

Font size is the practical size of a font which can be measured by gauges. Distance is a numerical description of how far apart objects are. The distance will not affect the practicle font size.

angular size

Angular size is an angular measurement describing how large a font appears from a given point of view. Regardless of different font sizes, two fonts may have the same angular size due to different distances.


minimal angular size

For most mainstream head-mounted display, 1.375° is the minimal angular size for comfortable reading, no matter how far apart you are from the text.

minimal font size

Minimal font size is positively related with distance. With the minimal angular size and the tangent function, the corresponding minimal font sizes can be easily figured out.


distance-indepedent millimeter

Dmm is an angular unit which follows a millimeter as it scales off into the distance. Compared with degree, dmm can be calculated without tangent function.

recommended text sizes

These recommended text sizes are readable for people with various eyesight qualities. This is a safe set of text sizes to use although pixel density may increase over time.


Besides the size in Unity, designers also can use the same text sizes in Sketch. For example, the minimal font size is 24dmm, so designers can use 24px as the minimal font size in Sketch. After designers export the 1x size of the slices, developers can import them into Unity without distortion. Google spares no effort to simplify the unit so as to reduce memory load for designers and developers, especially those annoying decimals.

Layer of Depth

UI design tends to prioritize the information with contrast of elements, such as size, color, dark or light and texture. In VR UI, depth has become an emerging dimension which can attract our attention. With binocular effect, people are likely to notice the object close to themselves. The pictures below are an experiment I have conducted in a prototype. I created two planes in Unity, and one of them is much bigger but farther than the other. The camera adjusted the angle so that two planes could be seen similar in size. I found out that the closer one is much attractive especially when I watched them with a HMD and rotated my head slightly.


Screen-Based Display

Binocular Display

With this mechanism, layer of depth can be used to emphasize important information. The following three points are the tips from my design experience:

1. Different layers of depth can be considered as different information states. For example, when the gaze moves over the button layer, the layer should move inward by a certain distance.

2. Too many layers should be avoided because it can contribute to frequent switches between far and close objects. Less than three layers are recommended.

3. The difference of depth between two layers should not be too large. When it is more than 1.5 meters, viewers can easily suffer eyestrain.

Conclusion

To summarize for UI depth in VR, I can conclude as following three points, the distance, the font size and the layer respectively.

1. For the distance, 1m to 3m is a comfortable reading distance. While UI in the distance less than 0.5m will cause eyestrain or UI in the distance more than 6m will be covered or invisible.

2. For the font size, 24mm is a minimal font size in the distance of 1m, which can be considered as 24dmm. This number of the minimal font size can be used both in Sketch as pixel and in Unity as millimeter.

3. For the layer, different layers of depth can stand for different information states. More than three layers in a small range or more than 1.5m between layers can contribute to eyestrain due to frequent switches of focus.

Reference

Microsoft, 2017, Fluent Design System, fluent.microsoft.com

Samsung, 2014, Samsung Developer Connection, www.youtube.com/watch?v=XjnHr_6WSqo

Google, 2017, Google I/O '17, www.youtube.com/watch?v=ES9jArHRFHQ