The laws of traditional design do not easily apply to VR environments. VR has its unique UI patterns, so designers have to have hands-on experience and practice to develop user-friendly VR interfaces.
At JetStyle we have multidisciplinary specialists who have expertise both in traditional web and VR UI design. Konstantin Ostroukhov is art director and UX/UI designer at JetStyle; he’s created and supervised dozens of our VR projects. In this article, he outlined the core features of UI design in virtual reality:
Key Issues VR Designers Solve
When designers start creating UI designs for VR, they intuitively apply their experience in web design to the new environment. Some design rules are universal, but some are environment-specific. Here are a few common issues web designers face when they work with VR interfaces:
- No conventional anchor points in the screen angles
We can’t just place the health bar in the top right angle, like we’re used to in web design.
- All of the elements are 3D
The UI should not cover the entire scene. Doing so would obstruct the user's view and disrupt immersion.
- Scaling
Whether the UI is positioned as a Heads-Up Display (HUD) on top or within the scene, we have to deal with the problem of scaling. How do we ensure it does not obstruct the view while remaining accessible and readable?
The ABCs of VR UI Design
In this section, we’ll list the core factors that influence the decisions UI designers make while creating interfaces for VR.
End devices
The choice of end devices greatly influences the user experience. For instance, if you design for VIVE, you'll need to accommodate the UI to the device’s unique grip mechanism. Among other features you’ll have to consider:
- The resolution of the headset display,
- Hand tracking,
- Pass through,
- Hover by gaze.
Scale of UI
The VR interface is located in space; the distance between the objects and the user changes constantly. Thus it may be challenging to create a consistent design system.
We use the concept of "angular scale". It takes into account the relative size of objects against the user's camera. For instance, the angular scale of a banner and an image on a mobile phone can be identical. It is measured in dmm, which is 1 mm / 1 px at a distance of 1m / 1000px from the user.
With the help of this measuring unit, you can assign minimum sizes for the elements. For example, a button at 100 dmm at a distance of 1000px will be 100px, and at a distance of 2000px, it will be 200px.
Another important parameter is the user's field of view. Without neck movement, the user's field of view is approximately 60°, or 30°to each side of the central viewpoint.
Distance to the user
To maintain consistent distance, you can arrange the UI along a cylinder or tilt its components at an angle. This way all the elements are equally visible to the user.
If you want a smoother curve when you place the UI along a cylinder, position the center of the cylinder behind the user.
Anchor points
What are possible spots you can place the UI on?
- Above the object, with orientation towards the user's camera. This option is suitable for markers in the location, or health bars above opponents.
- In the space in front of the user. It works best for the main menu of a game.
- Attached to the player's controller. This option is good for displaying keymaps on the controller or showing statistics in a shooter.
- Near the center of the user's camera, oriented towards the user. Rendered on a separate layer to avoid overlapping with the surrounding objects. This option is ideal for essential HUD elements like the user's health indicator in a game or screen recording indicator in Oculus.
Dark theme
In VR headsets, the screen is very close to the eyes, and a bright interface can feel harsh. Therefore, it's better to use a dark theme for the interface.
Buttons & Fitts’s law
Fitts's Law applies to VR interfaces as well; we use it to optimize the placement and sizing of interactive elements, such as buttons, links, and icons.
The controllers have high precision, but they are not as accurate as, for example, a computer mouse. Therefore, interface elements should be larger.
Rendering layers
Here’s another example of how the UI interacts with other elements of the space. In Robo Recall, the UI is in the foreground, but it is covered by the player’s hands. The movement of the hands in a VR game is the designer’s priority.
Resolution
The resolution of screens in headsets is not yet very high. We should avoid thin fonts and outlines.
Immersiveness
Any GUI (Graphical User Interface) disrupts immersion. Hence, we talk about the concept of diegesis. Diegesis means that the interface is integrated into the space and exists within it. The UI doesn't break the fourth wall, and is seamlessly integrated into the virtual environment.
Look at an example with the number input panel in AltspaceVR:
Haptics and sound also influence immersiveness. For example, various vibration patterns can mean different things, such as inability to perform an action or collision of two objects.
Customization options
If we place the UI in space or attach it to the user, it's possible to provide customization options for panel placement. Typically, a drag button located beneath the UI panels helps with that.
PassThrough
Passthrough feature displays images from tracking cameras into the headset. You can see the real-world environment around you. The picture used to be black and white, but today’s most advanced headsets (Apple Vision Pro and Meta Quest Pro) provide it in a full-color mode. This upgrade indicates that the industry is moving towards Mixed Reality; it’s a global trend for VR designers to take into consideration when they choose their development paths.
What’s new with Apple Vision Pro
The new headset by Apple changes the standard of VR and MR devices, and we’re here for it! Here’s what I consider to be the most useful things Apple introduced for designers and developers:
- Apple’s official design system in the Figma community.
2. Eye tracking, a new pattern of interaction that designers have to take into account while they develop the UI
3. Focus on XR – the metaverse is dead, and the global trend is extended reality
4. More development tools for IOS developers within the IOS ecosystem.
We share more thoughts about the impact Apple Vision Pro is going to have on the industry (and tease our own MR projects for the headset) in our blog.
***
JetStyle has been developing VR solutions for more than 7 years. We know that VR has a huge potential to boost your marketing, sales, team building, and corporate education activities. Sign up for a free discovery call, and we will brainstorm ideas for the effective implementation of VR into your business. orders@jet.style
