How to Design the Best UI for Room-Scale VR

April 18, 2017

As virtual reality becomes more and more mainstream, we, the designers and developers, are starting to build in bullet-proof techniques and processes to make VR environments and experiences fun, believable, practical and seamless.

Here are some things I’ve learned about designing a user interface (UI) for room-scale VR interactive experiences.

What types of UI elements are there in VR?

Most of our notions of VR originate in cinema and gaming. There are small particularities in the building of a 360-degree environment, but I have found it’s always useful to start with something you know and then adapt for the new medium.

There are 3 UI options* in VR that I have encountered:

Diegetic UI (Integral, integrated part of the environment)

This is all the information that makes up the 3D environment. The diegetic UI components are the objects that give users useful hints, for example, a clock on the wall that tells the time. It might be difficult for a user to know if these items are interactive; often, visual aids or “hints” must be added to these objects if a user should interact with them. In effect, their natural fit with the environment makes these objects all the more immersive, but sometimes not obviously interactive.

Spatial UI

These are non-realistic objects or flat designs that are positioned in the 3D space with added depth, light, focus and sized to fit, like any other object in the environment. The less realist the shape is, the easier the user can understand it’s a foreign element, and be enticed to start interacting with it. Spatial UI interrupts the immersive aspect of VR because the look and feel is different, but they are highly effective, as the user can easily understand that the object is interactive.

Non-diegetic UI

This type of object has a shape and position that is not part of the realistic 360 world at all; it is not part of the 3D space and has no depth. This type of object can be very useful for smartphone-based VR where a user can’t move closer by walking toward it, or for Room-Scale VR if you need to push information that is critical to the user.

*ref. Unity

What you should keep in mind

You’ll need to create 2D sketches to test your ideas and plan where the various UI elements will appear. Your 360-degree view turned flat might look something like this:

(Hello, this is me in a very canadian winter landscape)

If you’re thinking a textual element needs to be big so it is easy to read, and links need to be easy to point at and click on, I can assure you, for information screens, going big does not work very well. Imagine how overwhelmed a user would be by a huge panel of options like this:

Scale it down. The example below is an example of what I found to be the perfect size if a user stands about 1.50 meter (~5 feet) away.

Here is your very comfortable view in the VR gear:

When you divide your 360-degree mockup into a 10x10, text should make up just 1% of the space to be just perfect in VR. A title can be bigger. Around 2-4% is still very big in a gear:

So, what do you need to remember when designing a 360-degree UI?

• Text should be close to the object it relates to, the eyes should be able to focus within the same distance.

• Text should be in front of our eyes or slightly lower to be readable more naturally while also being comfortable for the head position.

• Longer text should be presented in a format that is easy to carry and hold so the user can move it around for his own optimal viewing position. This is best achieved by providing longer text in an object found in real life, like in a book.

• Crucial information should be big and can even hide most of the background to remove any spacial references.

• The UI should be part of the story in space and time, it should never get in the way.

• The UI should help with immersion instead of hiding it.

• Sound effects should be added to add a realistic immersive feeling.

• Reduce text as much as possible; keep the immersion the priority.

Oh and here’s an extra little extra tip:

Don’t be shy about quickly uploading your 360-degree sketch or mockup in a mobile VR gear to test and get an idea of size, readability, position and interactivity.

Prototype, prototype and prototype

All new technologies start out the same way: with ideas and prototyping. But most of all, we learn from mistakes. At that disappointing moment when we realized we missed the target, we are washed over with a flood of knowledge.

Some mistakes are so obvious, you’ll only make them once - and when you accept it’s part of the process, you’ll have a good laugh about it, too.