Designing User Experience for Virtual Reality (VR)

So how exactly does VR work and how does digital UX design play a part in it.

Designing User Experience for Virtual Reality (VR)

Introduction to VR

Virtual Reality (VR) is a total experience that closes out the physical world. Utilizing VR gadgets, for example, HTC Vive, Oculus Rift or Google Cardboard.

Relating Conventional Design to 3D experience

The market is going to move towards a new paradigm of vivid 3D content. Sound, touch, depth, and feeling will all be fundamental to the VR experience, making even the most novel 2D screen encounters feel exhausting and dated.

VR provides many of the same benefits of training in a physical environment — but without the added safety risks.This simple fact makes means specific industries like healthcare, military, police, and so on should prioritize finding ways to use VR for training.

Think Skype for Business on steroids. VR has the potential to bring digital workers together in digital meetings and conferences.

Interactivity in virtual reality is consists of three elements. These are speed, range, and mapping. Speed is the response time of the virtual world. If the virtual world responses to user actions as quickly as possible, it is considered an interactive simulation since immediacy of responses affect the vividness of the environment.

So, What all kind of apps are we going to design?

Generally speaking from a designer’s perspective, VR applications are made up of two types of components:

  • Environments
  • Interface

Generally speaking from a designer’s perspective, VR applications are made up of two types of components:You can think of an environment as the world that you enter when you put on a VR headset — the virtual planet you find yourself on, or the view from the roller-coaster that you’re riding.

An interface is the set of elements that users interact with to navigate an environment and control their experience. All VR apps can be positioned along two axes according to the complexity of these two components

  • In the top-left quadrant are things like simulators, such as the roller-coaster experience linked to above. These have a fully formed environment but no interface at all. You’re simply locked in for the ride.
  • In the opposite quadrant are apps that have a developed interface but little or no environment. Samsung’s Gear VR home screen is a good example.

How to start designing the user experience for virtual reality?

Before you start designing for your VR app, considering some of these fundamental questions may help you:

  • How do people get started?
  • What affordances are provided to guide people without overwhelming them?
  • Do you want to err on the side of providing too much guidance or create a minimalist environment that doesn’t overload the user with too many choices?

Don’t expect people to know what to do and where to go. Slow and progressive familiarization, visual clues, and guidance from the software should all be used to help the user. When you’re designing for VR, you’re designing for the capabilities of people as much as you’re designing for the capabilities of the system.

It’s essential that you understand your users and the issues that may come up while they experience VR.

VR experience isn’t too different than the process for designing a web or mobile product. You will need user personas, conceptual flows, wire-frames, and an interaction model.

The Process for Designing User Experience for Virtual Reality

The process

Whereas most designers have figured out their own workflow or design process for designing mobile apps, processes for designing VR interfaces are yet to be defined globally.

For designing your first VR app you should start your process with the logical first step which is to devise a strategy or plan.

User research inside of VR:

As a matter of first importance, before you even begin considering structuring for VR, you need to consider what sort of Experience you need to make? There is certainly not a one-measure fits-all. Most ethnographic research strategies are totally open within VR, including:

Client Interviews, Fly-on-the-Wall, Usability Testing, Touchstone Tours, Simulation Exercises, Shadowing, Participant Observation, Heuristic Evaluation, Focus Groups, Eye Tracking, Exploratory Research, and Diary Studies.

Wire-frames

Generally, as designers do, we’ll go through rapid iterations, defining the interactions and general layout.

Visual design

At this stage, after the features and interactions have been approved. Brand guidelines are now applied to the wire-frames, and a beautiful interface is crafted. The Design Process for VR apps would not change dramatically apart considering few usability issues from our normal design process.

Setting up the environment for designing

To apply mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.

On the right is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.

Building on Mike Alger’s early research on comfortable viewing areas, we can isolate a portion where it makes sense to present the interface.

The area of interest represents the one-ninth of the 360-degree environment. It’s positioned right at the center of the equirectangular image and is 1200 × 600 pixels in size. Add image)

Pencil & Paper

Before getting into any software, it’s crucial to get your ideas out on paper. It’s fast, cheap, and helps you express ideas that may take hours in software.

Software

Some designers start with tools they already know like Sketch, others use it as an opportunity to learn new tools. It really depends on what engine you are going to use to build your app. If you are building a 3D game, you’ll want to use Unity or Unreal Engine. Cinema 4D and Maya are also widely used, but mostly for complex animations and renderings.

Principles to consider while designing

Text readability

Because of the display’s resolution, all of your beautifully crisp UI elements will look pixelated. This means, first, that text will be difficult to read and, secondly, that there will be a high level of aliasing on straight lines. Try to avoid using big text blocks and highly detailed UI elements.

User Comfort

Since the user will be teleported to a totally new world while being shut from the real physical world, we need to make sure their transition is smooth and comfortable. Information overload either in form of too many UI panels or some cluttered room can cause confusion for the user and they will get overwhelmed.

The first thing the user will do is start looking around.

Ergonomics

When first designing for VR it’s exciting to think about creating futuristic interfaces like we’ve seen from Hollywood blockbusters like Iron Man or Minority Report, but the reality is those UIs would be exhausting if used for more than a few minutes. This diagrams help to illustrate the comfortable range of motion zones:

Multimodal Interactions

Traditional Flat-screen UI had only one mode of interaction touch or mouse. However, with VR we can interact with digital objects by moving our head, arms, finger, and body. And the hardware is capable to track our gaze and speech. So understanding of ergonomics is essential

Spatial Audio

In VR we can effectively use audio to draw users attention to different places in a 3D environment. It also allows creating a sense of immersion in the space

Designing for physical space

Traditional UI used px (pixels) and pts (Points) as units whereas in VR it’s all up in front of us. So we have to consider the physical and macro units like inches, feet, meter, etc.

Text Legibility

Take inspiration from billboards put up in the city. That’s how the UI will by lying around you in VR. Or it can be as natural as games wherein the actions and information are always tied to the object (it’s called Diagetic UI)

Avoiding simulator sickness

Understanding the physiological effects of virtual reality design, and following these guidelines, is critical to making your app success and ensuring that users avoid simulator sickness.

“simulator sickness,” when your eyes think you’re moving, but your body does not.

Avoiding simulator sickness

Be mindful of sudden changes in brightness. Given the proximity of the screen to the user’s eyes, transitioning the user from a dark scene to a bright scene may cause discomfort as they acclimate to the new level of brightness. It is similar to stepping out of a dark room into the sun.

Button placement

Avoid placing fuse buttons in close proximity to each other. Fuse buttons work best if they are large targets that are sufficiently far apart from each other.

If multiple smaller fuse buttons are placed near each other, the user could accidentally click on the wrong button. Smaller buttons that are close to each other should require a direct click to activate.

Tools for Designing Experience

let's connect digitally

geek out together about your project or upcoming product.