Skip to content
User-Friendly VR Design
UI
Shape and Layout
Search
If a UI takes up most of the user’s view, make it curved [10]
Make the main UI visible without much head turning [10]
Make UI large and legible, to prevent eye-strain [11]
Keep relevant text near the user’s focal point [18][35]
Keep frequently used UI at least 0.5m away from the user, ideally 1.5m [9]
Make 3D text extra bold and thick
If a UI takes up most of the user’s view, make it curved [10]
Image
Below is an example of a flat screen taking up the user’s screen. While on the video it looks fine, in the headset the edges of the screen are out of focus.
Game: Engage
Below is a curved UI taking up the user’s screen. It is much easier for the user to see the edges of this UI, since they can simply move their eyes rather than their head.
Game: Oculus Menu
Typography and Color
Search
Avoid 100% contrast [14][15]
Stick to regular, medium, or semibold font weights [19]
Use slab-serif or rounded-stroke fonts [16]
Use fonts with wide letter shapes for text viewed at a distance [17]
Use the Font Size Calculator when working with Unity Canvases [13]
Use smooth typefaces
Avoid 100% contrast [14][15]
Image
Below is a video attempting to show how having high contrast between text and the background causes halation and chromatic aberration. These artifacts are easier to see when directly wearing a headset, and in your peripheral vision.
Game: Oculus Menu
Below is another example of 100% contrast. While in the video it looks fine, in VR the high contrast once again causes halation and chromatic aberration.
Game: First Touch for Meta Quest Touch Pro controllers
Reactivity
Search
Make UI reactive
Use Audio Cues
Make UI reactive
Image
Below is an example of UI with poor reactivity. It does have a sound cue to let the user know they’ve selected a menu item, but the item does not react in any way to being selected.
Game: Mission: ISS
Below is a similar example of poor reactivity, but this time the UI has no selection state/sound, and only plays a sound when it’s activated. The UI needs a hover state.
Game: Mission: ISS
Below is an example of a good reactive UI. The buttons have hover states so users can confirm what button they’re about to press. These buttons don’t make any sounds when pressed, but they do vibrate the user’s controllers which is a good way of providing feedback.
Game: Engage
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.