Mobile VR Design :: UXmatters

VR Applications and Their Types

Mobile VR apps comprise only two components: an environment and a user interface….

Starting out with VR design begins with gaining a knowledge of the nature of VR apps. This is not a complicated undertaking, mainly because, as Figure 2 shows, mobile VR apps comprise only two components: an environment and a user interface (UI).

Figure 2—A comparison of environments and user interfaces
A comparison of environments and user interfaces


A VR environment is the setting, or place, within which users interact when using a VR app. This is a third-party virtual world. On its own, the environment is static. You can’t change or manage it without a user interface. Examples of VR environments include full dive VR (FDVR) games, in which users play in realistic surroundings. Some of the most famous games that use technology similar to fully immersive virtual reality are Fallout 4 VR, The Solus Project, and Skyrim VR.

User Interfaces

A user interface is a set of features that lets users interact with an environment. If you were painting a picture, the drawing itself would be the environment and the brushes that you’d use to change and modify the environment would be the user interface. Even a very promising environment can quickly become boring without an intuitive user interface. However, it’s obvious that a user interface without an environment cannot become an actual product.

Examples of VR user interfaces include VR ecommerce tools. They let users browse products, put them into their cart, try on clothing, and make purchases. In ecommerce apps, the user interface is a lot more important than the setting because the purpose of the app is functional rather than entertainment.

Prioritizing User Interfaces over Environments—and Vice Versa

If the purpose of your app is entertainment or education, it’s likely that immersion should be your priority. The rule of thumb is: the more realistic you need your mobile VR app to be, the higher-level environment you’ll need.

All beginning—or even experienced—VR designers must inevitably decide where to focus their efforts. Nobody can develop the perfect product that has the ultimate user interface and environment on budget and on deadline. With sufficient time and resources, you can work to improve both, but even so, one aspect of design should likely stand out. So how can you choose whether you should focus on building the environment or developing the best VR user interface possible?

If the purpose of your app is entertainment or education, it’s likely that immersion should be your priority. The rule of thumb is: the more realistic you need your mobile VR app to be, the higher-level environment you’ll need. Your priorities also depend on the level of design detail. For a very particular environment such as a detailed showcase of human anatomy or a virtual city, you must create a high-quality user interface to meet users’ expectations.

For mobile VR apps that rely on functionality first—such as ecommerce, messaging, or development tools—you should focus more on the user interface. If the environment you’re creating is a basic setting such as a person’s room, a virtual office, or a conference hall, a simple environment would do. In this case, the ultimate user experience would depend largely on functionality, not on the surroundings.

Implementing VR Design

Familiarizing yourself with basic concepts of mobile virtual reality is the first step. Now, it’s time to put this knowledge to the test before you can start designing your own product.

Step 1: Become an Active User of VR Apps

Once you know the two basic concepts that are the foundation of all VR products, you’ll need to see how other developers and UX designers have implemented them. The majority of VR apps are free for people to download from Google Play and VR. You can get started by purchasing Google Cardboard—the cheapest VR viewer out there. However, if you’re thinking about doing VR design professionally, you’ll need more a powerful VR platform. I recommend Samsung Gear VR or Google Daydream.

Step 2: VR-First Design

Usually, after exploring their first few VR apps, creative UX designers already want to tackle their own VR design projects. They get inspired by other ideas and concepts and want to start doing their own thing. While there is always the temptation to copy an existing project, that would be a waste of time. From the very beginning, your ultimate goal should be to create your own VR concepts and explore creative narratives.

Three-Dimensional Thinking

Before creating a virtual reality, you need to master some fundamental principles of spatial design. VR design requires a basic understanding of physics—although you don’t need to remember formulas such as those shown in Figure 3.

Figure 3—A three-dimensional VR & AC plastic-creep friction model
A three-dimensional VR & AC plastic-creep friction model

Image source: ResearchGate, from “Submicron Volume Roughness & Asperity Contract Friction Model for Principle Slip Surface in Flash Heating Process,” by Bojing Zhu, David A. Yuen, Yaolin Shi, and Huihong Cheng

Types of Spatial Design

There are two basic types of spatial design, as follows:

  1. Follow-along—As the user moves within the environment, UI elements get closer. We’ve often seen this with arcade games. A character gets closer to a particular element and, once the character gets close enough, can interact with that element.
  2. Confined space—All UI elements are tied to a specific point in the environment. While the user moves closer to UI elements, they don’t move toward the user. They are basically the same as most of the objects we see in real life—such as a building, street sign, or a parked car. Objects have coordinates, and the user can interact with them only once they’re in that spot.

Some Practical Exercises

Here are some effective approaches to help you quickly get better at conceptualizing VR designs:

  • Apply real-life scenes to VR concepts. As you live your life, think about how you could transfer your environment’s lines and shapes to a VR environment. Think about what menus and features would enable such actions as opening a refrigerator door or going to bed if you lived your life in a VR simulator.
  • Think about 2D games in 3D. Exploring existing games is an excellent way to get more creative with your VR designs. Your real-life surroundings offer only limited narratives, so taking inspiration from shooters, arcades, and quests and modeling them in virtual reality is a good way to get creative with your VR user interfaces.

New VR Inputs

Once you’re accustomed to thinking in three dimensions, you’re ready to face a new challenge: VR user inputs. In virtual reality, people can’t rely on interacting with functionality using touchscreen devices or computers. They might not have a mouse, keyboard, console, or touchscreen. Virtual reality requires that UX designers broaden their perspective and embrace new methods of communicating with or editing an environment such as grid scale, which is depicted in Figure 4.

Figure 4—Grid scale
Grid scale

Image source: ResearchGate, from “Grid Scale Drives the Scale and Long-term Stability of Place Maps,” by Caitlin S. Mallory, Kiah Hardcastle, Jason S. Bant, and Lisa M. Giocomo

Be sure to take sound, speed, color, self-motion, and locomotion into account.

Types of VR Inputs

While this situation might change in the future, most VR apps and settings now enable the following types of data inputs:

  • gestures—The app reacts to users’ movements and offers a feature in response to a particular action or, for a game, translates actions into characters’ movements.
  • eyetracking—VR settings can track users’ eye movements and change the angle at which the setting appears to users.
  • voice—Some VR settings and apps rely on speech recognition and are capable of understanding simple voice commands. Others simply react to the sound of a voice without understanding the meaning of what the user says.
  • hardware—You can integrate VR platforms with click and touch controllers, which sometimes look like consoles.

Minding the Distance Between the User and an Object

For 2D objects, it doesn’t matter exactly where the user is in relation to an object, and environmental dimensions stay relatively the same. Even in 3D games, the differences are not distinct. If you make mistakes with dimensions in nonimmersive 3D design, you might get away with it. But for virtual reality, with its higher degree of visibility, every mistake becomes more visible.

In virtual reality, backgrounds, middle grounds, and foregrounds matter more. So you need to prepare designs for the different objects when they are located at various distances from viewers.

Figure 5 shows how an average user of virtual reality sees the environment and the user interface.

Figure 5—Combining FOV and rotation to get content zones
Combining FOV and rotation to get content zones

Image source: “Designing VR for Humans,” by Mike Alger

Vision Zones and Ergonomics

Every head-mounted display has different viewing zones. There are three particular zones that you should be aware of, as follows:

  1. Comfortable content zones—There are spots where the content looks best and feels most realistic, based on field of view (FOV) and rotation, as shown in Figure 5.
  2. Peripheral vision zones—You need to be mindful of content that isn’t directly in front of the user’s eyes, as shown in Figure 6. The user’s vision might actually be better than you expect.
  3. Blind zone—The area behind the user, which the user cannot currently see, but which you should think out carefully, too.
Figure 6—Range of motion and peripheral vision
Range of motion and peripheral vision

Source: “Designing VR for Humans,” by Mike Alger

In 2D design, UX designers generally worry only about users’ eye movements that occur in an F pattern or the Google Golden Triangle. These are the directions in which the human eye moves most quickly. In 3D design, the pattern is different, and its specifics depend on the headset’s characteristics. There is no universal pattern, so you need to find the right approach through testing. Plus, with VR, the user’s visual plane is always moving because the positions of the user’s hands, legs, and arms are dynamic.

VR Prototypes

Making a prototype is a challenge, especially for VR apps. There are many aspects to take into account, and a lousy prototype can be worse than having none.

Creating prototypes of your designs helps you decide which functions of your app you want to prioritize, evaluate which design decisions were right or wrong, and test your app in its semi-ready state. However, making a prototype is a challenge, especially for VR apps. There are many aspects to take into account, and a lousy prototype can be worse than having none.

Panoramas, or 360-Degree Photos

You can make a prototype by creating panoramas, or 360-degree images. There are tools that let you simply transfer images that you’ve photographed using a smartphone camera into a multidimensional projection.

Tools for Stitching a Panorama

There are several tools you can use to stitch together a panorama, including the following:

Building a 3D Interface

Once you’ve created a panorama, it’s time to add functionality to it using Google Blocks. This tool makes a 3D environment out of 2D images. You can model your environment and build something close to your app’s user interface. You can place new structures and planes to create an in-app environment that is based on real-life objects. This how developers create realistic prototypes of gaming and video user interfaces.

Cinema 4D

This is the go-to option for UX designers who subscribe to Adobe’s Creative Cloud. Cinema 4D is a part of the package and lets you build a first-person or third-person 3D user interface. You can use panoramas you’ve previously created or create a 3D geometric environment from scratch.


Photoshop offers a 3D-editing tool that functions similarly to panorama-stitching tools. You can upload an ordinary 2D image, transform it into a panorama by choosing 3D, then choosing Spherical Panorama. Once you have a panorama, you can modify it to create a 3D view of it. Figure 7 shows an equirectangular perspective grid for drawing spherical panoramas.

Figure 7—An equirectangular perspective grid
An equirectangular perspective grid

Image source: D.M. Swart, in “Drawing a Spherical Panorama”

Photoshop lets you use its core image-editing tools—such as the pen tool and brush tool—to draw elements that appear to exist in 3D space. Once you’ve created a canvas for your project, you can add new 3D features. Photoshop offers a bunch of 3D brushes that let you create objects with different line thicknesses, color patterns, shades, and so on.


If you are an active Sketch user, you can use the plugin Sketch to VR. Sketch has a Plugins panel that lets you import add-ons and add VR design features. With the Sketch to VR plugin, Sketch works similarly to Photoshop. It lets you create a panorama or upload an existing panorama and add objects to it.

Summing Up

To get started with mobile VR design, you need to spend some time researching the theoretical aspects of VR….

To get started with mobile VR design, you need to spend some time researching the theoretical aspects of VR and become an effective VR user. Once you’re familiar with the requirements of the VR technology stack, building an actual VR product isn’t difficult. Even traditional design tools such as Sketch and Photoshop offer plenty of opportunities for VR design.

Finally, once you understand the basics of VR technology and you’ve built your first prototype, you’ll be at the never-ending stage of the idea search. Virtual reality, after all, is mostly about creativity and vision, just like any other type of design. Sure, you need to take more technical factors into account and have a scientific understanding of physics, but designing virtual reality is easier than it seems. Through reading this article, you’ve already familiarized yourself with the basic ideas of virtual reality, so you’re now ready to get started on your first VR project. 

Source link