Designing User Experience for Virtual Reality (VR) applications
By: Sourabh Purwar
Tags: Interaction Design, Design, UX, Virtual Reality, Design Thinking

Difference between AR , VR and Mmixed Reality | Image Source

Virtual Reality (VR) infers a total inundation experience that closes out the physical world. Utilizing VR gadgets, for example, HTC Vive, Oculus Rift or Google Cardboard. Users can be transported into a various genuine world and envisioned situations, for example, the center of a screeching penguin state or even the back of a monster.

There are other reality experiences that exist like Augmented Reality, Mixed Reality, and Extended Reality which provide the user with different experiences

Augmented reality (AR) adds digital elements to a live view often by using the camera on a smartphone. Examples of augmented reality experiences include Snapchat lenses and the game Pokemon Go.

In a mixed reality (MR) experience, which combines elements of both AR and VR, real-world and digital objects interact. Mixed reality technology is just now starting to take off with Microsoft’s HoloLens one of the most notable early mixed reality apparatuses.

Relating Conventional Design to 3D experience

The market has furnished designers with a lot if reliable work over the past few decades and 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 accompanying safety risks. If a subject becomes overwhelmed, they can easily take off the headset or adjust the experience to be less overwhelming. 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. There will be real-time event coverage, something like Facebook Live with VR. Rather than merely seeing the other person on a screen, you’ll be able to feel as if you are in the same room with them, despite being miles away.

Think about how you collaborate with a touchscreen screen today. There are various examples that we have all developed to understand, for example, swiping, squeezing to zoom, and long tapping to raise more choices. These are altogether contemplation's that ought to be made in VR also. I’m sure that as more creators come into the VR field, there will be more personalities to make and vet new UI designs, helping the business to push ahead.

Interactivity in virtual reality is composed 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. Many researchers try to determine the characteristics and components of interactivity of Virtual reality in different ways. However, in order to do this perfectly, the designers have to acquire a thorough real-world understanding, meaning that they need to visualize the typical physical space surrounding the user and then build on the elements that they’ve perused. This is so because at no point you want your users to feel uncomfortable and feel like the newly introduced elements are invading their personal space.

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 and interfaces.

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. So 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

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

Canvas size

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

Below 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.

The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600 × 1800. Working with such a big size can be a challenge. But because we’re primarily interested in the interface aspect of VR apps, we can concentrate on a segment of this canvas.

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.

Let’s sum up:

“360 View“: 3600 × 1800 pixels

“UI View“: 1200 × 600 pixels

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. This is especially important because moving from sketches to hi-fidelity can cost much more in 3D than in 2D.

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.

Intended viewing distance: how far away we have designed these to be viewed. What is the optimal distance that these screens were intended to be viewed from and that intended viewing distance will inform the size of the screen in addition to the size and density of the content therein.

Distance-independent millimeter or A dmm can be described as one millimeter at a meter away. So it’s an angular unit that just follows a millimeter as it scales off into the distance. Let’s look at a concrete example. In the upper left-hand corner of this diagram, I have a screen space layout that I have measured in dmm’s, All of my UI elements are measured in dmms. It is 400x480 dmms tall and then I have applied that layout in world space to three separate virtual screens.

All of these virtual screens have different intended viewing distance. From the vantage point, that all of these screens are intended to be viewed from, they will look same to the user, they will have same angular size and text would be just as readable, buttons would be just as clickable and motion will appear to move same as well.

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. The following diagrams help to illustrate the comfortable range of motion zones: