UI design tips for 3D virtual environments

UI design tips for 3D virtual environments

Have you thought about adding 3D elements to your digital experiences but don’t know where to start? We sat down with one of our talented UX/UI Designer, Diana Fusther, to learn about the foundations of User Interface (UI) when working with virtual environments and what to consider to meet your goals through exciting design elements.

Why is user interface design different in 2D than 3D?

A good UI effectively guides the user through their digital journey and dictates how they will interact with the software. With this in mind, a 2D space, like a website, is limited to what’s available on the site’s interface, scrolling capabilities and path navigation. In this sense, designers have much more control over what content the user sees first, influencing its path. In contrast, 3D environments give users the power to dictate their journey based on what calls to their attention– from haptic feedback to environmental sound and lighting features. We always recommend that the UX/UI designer determines the goal of the interface – do our desired users want to co-author their experience or prefer being guided through the interface?

Demonstration of varying perceptions in 2D spaces and 3D spaces.
Credit: TTT Studios

What are some guidelines you follow when designing 3D assets for virtual environments?

1. Define user interactions

In virtual environments, I start by choosing if I want something to be diegetic or non-diegetic, meaning do I want it to occur “within the world of a narrative” or not. A good example would be video games.

Non-diegetic UI approach

From a player’s perspective, you see information on the screen with the number of points you’ve acquired, for example. This information is available to you, but your player character is unaware that it exists and can’t interact with these elements. This UI is almost always fixed to the camera. This is an example of a non-diegetic UI, most business-related use cases (like digital twins) might fall into this category.

The HUD elements of instructions, sliders, and panels point straight to Non-Diegetic UI elements.
Caption: The HUD elements of instructions, sliders, and panels point straight to Non-Diegetic UI elements.

Diegetic UI approach

On the other hand, some other virtual environments benefit from a diegetic approach. Imagine you were using a simulator software for pilot training. Here, it is likely an exact replication of the aircraft’s control panel and stats such as height and speed would be inside the 3D environment. These controls would be real for you and your character. The simulator would provide a more realistic and immersive experience that could help you react faster in real-world scenarios since you've already been trained within the virtual environment.

3D Environments used for Simulation and training can benefit greatly from Diegetic Interface approaches. Image from Microsoft's Flight Simulator with a PA28-181 Archer II plane.
Image source: Microsoft's Flight Simulator with a PA28-181 Archer II plane.

Hybrid UI approach

I also like to consider a hybrid option, when elements are placed inside the environment and seem to be a part of the narrative but are non-existent to your player-character. An example would be when you are in VR or a game and approach someone, and a prompt saying “Press X to talk” appears on top of the other character. This instruction is visible to you, but not to other players or characters.

2. Study lighting conditions

After nailing the narrative features down, lighting is the most important next thing to consider in the Design process. As a team, we consider all possible ways users interact with the 3D objects in their environment. Will they see it from the front or behind?  Will the space be lit, or will it be shrouded in darkness? Should we highlight with an interactive element or prop? All these details will affect people's perception of the object we present. To answer these questions, we live by the design fundamentals of shape, colour, contrast and form.

The Elden Rings video game.
Caption: The Elden Rings' Designers use light and candles to highlight the treasure chest trap to lure players into opening it.

3. Design for all the senses

3D environments are the best justification for including other senses apart from sight. It’s easy to incorporate sound to enhance the feel of a virtual environment and give a sense of presence to users. For example, if we’re in a forest, we could add the sound of birds, wind passing through the branches, and even the sound of a nearby river. These features give users a more robust idea of the space they are located in and create a more immersive experience. With VR headsets, we can provide haptic feedback and sensors to include touch, gestures and movements into the mix.

4. Stylize the UI

Finally, once I’m sure the UI is legible, I think of how immersive I want the UI to be. Based on the project context and user interaction goals, I could consider a Themed UI, which is stylized to follow the art direction of the 3D environment or game – a jungle-themed game may incorporate jungle elements into the final design. 

Or, I could take a Neutral UI approach, which is more functional and less stylized to match the environment and features straightforward buttons and controls. This last one works best for business/enterprise related solutions.

Animal Tumble, a themed UI game demo.
Caption: Animal Tumble created by TTT Studios (themed UI example).

Do you find advantages to incorporating 3D to enhance the virtual experience?

Definitely! Not only is it really fun to design, but it can also provide users with more information than a 2D page. Virtual environments bring a life-like experience to users, enhancing interactive capabilities and user experience. The use cases are endless, from supporting a business with a decision-making process to basic entertainment. Nothing beats being able to simulate as close to the real thing (and in real-time) as possible.