In this article, I will discuss three fundamental concepts about UI design for VR and explain how they differ from designing for mobile or desktop apps. These concepts are size, height, and distance.

If you’re already a UI/UX designer, you have a solid foundation to grasp these concepts fairly quickly. If not, I’d recommend gaining a basic understanding of how styles and foundations work in UI design.

• Sizes: What should be the size of my frame in Figma? How big should my UI be?
• Height: At what height should we position our UI?
• Distance: How does distance affect the UI?

I will use examples to illustrate each concept and guide you on how to create your UI for VR in Figma. Additionally, I’ll show you how to test it directly in VR using ShapesXR.

This is the example we’ll be using to ensure a clear understanding of each concept. We will be designing a login interface positioned at a distance of 1 meter from the user, however, the same principles will be applicable to other 2D interfaces you are designing for your VR app or game.

Resources

ShapesXR space (You’ll need to install ShapesXR in a Meta Quest device)

Immerse yourself in ShapesXR’s space to witness these concepts in action. The fastest way to comprehend VR concepts is by experiencing them firsthand in VR.

Space link
Space code: 9r d9 d4 w6

Figma file (You’ll need a Figma account)
Utilize this Figma template from ShapesXR for your upcoming designs. Apply all these concepts using the provided template and have your UI in VR within seconds.
Get the Figma file

Outcomes

By the end of this article, you will be capable of:

• Initiating your own UI creations
• Establishing logical patterns and layouts for developers and users
• Testing your UI before engaging developers in the process

1. Sizes

The canvas or frame in Figma

The first step in designing any UI is to set up a canvas or frame that matches the screen or device we are designing for. But what canvas or frame should we use when our “device” is a 360 environment? The quick answer is 1920x1080 or 2304x1296, but these are just references to assist us during the design process. They are not directly related to the device itself. The crucial aspect to consider is how much of this canvas we can utilize to ensure the usability of our UI.

Your frame in Figma

In the realm of 3D, we employ meters or millimeters rather than pixels. However, if you prefer working with pixels, there’s no problem at all. At a distance of 1 meter, 1 pixel is equivalent to 1 millimeter. Thus, you can continue working with pixels as you normally would. We will explore this concept in greater detail in the Distances section.

Your frame in Figma + Angular grid (Key concept!)

To gain a better understanding of the degrees by which we need to move our eyes or neck when looking at different areas, let’s incorporate an angular grid.

Comfort zones

Now, let’s delve into comprehending the number of degrees that prompt discomfort when moving our eyes or neck.

Comfort zone
The comfort zone refers to the region where you can effortlessly gaze without having to turn your neck significantly. Any panel that surpasses this area (30º) will necessitate either curving or tilting towards the user.

Neck comfort limit
This represents the point at which turning the neck becomes uncomfortable. This area lies at the outermost periphery of the user’s vision, with any content beyond this region falling outside the user’s field of view.

💡
I highly recommend utilizing ShapesXR’s space to personally test and experience how comfortable or uncomfortable it is to view different degrees and how your eyes or neck move. This hands-on exploration will provide you with valuable insights and a better understanding of user comfort within a VR environment. ShapesXR. Space link.Space code: 9r d9 d4 w6

UI areas

Sizes done!

By now, you have gained a solid understanding of how spatial UI functions, which Figma frame size to utilize, and when your users may face challenges while scanning your UI. With this knowledge, you can now devise layouts and explore UI component sizes. The Figma file provides some references to assist you in this process.

However, there’s more to consider! What about height? Should you position the center of your UI at the user’s eye level? The quick answer is no; that’s not what you should do. Let’s delve deeper into this concept.

2. Height

Okay, let’s simplify this. We need to position our UI slightly below the eye’s center. Aligning and centering the UI may feel uncomfortable since humans naturally tend to look slightly downward.

While Figma may have limited options to address this directly, it is crucial for ensuring a positive user experience. Make sure to communicate this placement guideline in your hand-off to developers.

💡
To truly understand the discomfort of placing the UI in the center, I encourage you to experience it directly in VR. Visit Height section in the VR space and observe the difference. Space link.Space code: 9r d9 d4 w6

3. Distances

Designing for different distances

Now, how do we design for various distances? Do sizes change? The answer is no. In Figma, you design your UI as if it were intended to be viewed at 1 meter, as we learned in the Sizes section above, where 1 pixel equals 1 millimeter at 1 meter distance. Then, if we want our UI to be seen at 2 meters, developers will need to scale it by a factor of 2. Similarly, for a UI seen at 0.5 meters, it would need to be scaled by a factor of 0.5. However, your design in Figma remains the same, whether it’s for 0.5, 1, or 2 meters.

💡
Use the ShapesXR’s space to observe firsthand how different distances feel in VR. Even though they occupy the same visual space, they evoke distinct sensations. ShapesXR. Space link.Space code: 9r d9 d4 w6

To sum up

Well, these key concepts will empower you to generate ideas, establish patterns, and develop systems that enhance the consistency and usability of UI design for VR apps and games. The best part is that you don’t even need to dive into Unity right away to begin experimenting with these concepts. This truly democratizes design in VR. However, having a basic understanding of how Unity manages UI would be advantageous as it enables better communication with developers.

I hope you found this information useful.

Resources