How to design for virtual reality: basics and best practices for VR design

Reality’s fine most of the time, but there’s room for improvement. As fun as driving a fast car is, wouldn’t you rather be flying through the air like a bird? What we’re saying is, reality’s a great place to live, but every now and then we’d like to visit places a little more unrealistic. And judging by the rise of VR design over the last few years, plenty of other people agree.

Virtual reality design: the future of ecommerce or the future of gimmicks? By PHACE.

For designers, the arrival of virtual reality poses some unique challenges. There’s very little precedent to draw on when it comes to designing for a virtual reality space, but at the same time, that leaves room for innovation and new possibilities for greatness. The question is: how do you make that transition?

This article helps out with that. We take a ground-up approach to explaining VR design, starting with the essentials and ending with some best practices. Who knew playing god could get so technical?

What is VR design?
—

If you think the Sensorama of the early 1960s looks silly, imagine what your grandchildren are going to say about the Oculus Rift. Via Wikimedia Commons.

VR design is the creation of a simulated world, which people can experience and immerse themselves in using hardware, like headsets.

Virtual reality as we know it today actually has a long history. With origins dating back decades, we see it used for practical applications like NASA flight simulations and for entertainment like the sensational Sensorama.

But never in history has virtual reality ever been so achievable—and profitable. Recent tech advances in VR have many predicting it will eventually permeate all industries. Evangelists suggest its most beneficial applications to be:

a more immersive website, potentially changing the way we browse the web

There’s also the documented benefits on personal growth and introspection—yes, you read that right. A Stanford study showed that users who saw themselves aged 70 years in a VR mirror later set aside “significantly more money” for retirement than the control group. A separate Stanford-University of Georgia study showed that users subjected to a VR lumberjack simulation used 20% less paper products afterwards.

For the time being, VR remains most popular in the entertainment industry. There’s no limit to the number of fun and creative ways to use VR recreationally, from appreciating Rembrandt in a new way, to watching movies in Netflix’s virtual home theater. And that “flying through the air like a bird” comment above wasn’t a joke.

For cash-in-hand profits, VR design is most successful in the gaming industry at the moment. Many see it as a game-changer or tech disruptor, threatening to overtake other gaming consoles, or at least capture a large segment from them. This comes on the heels of 2016’s Oculus Rift, the first VR gaming headset, and its “success” (READ: the fact that the first VR gaming headset was not a disaster is a success).

So how do you design “reality”? In practice, VR design is closest to video game design, and often they’re one-and-the-same. Web designers will see some familiarity in interactivity and specifics of the UX, but visually it’s a whole new ball game. There’s a lot of unique visual problems in virtual reality design, like changing depths, recognizable cues, and including functional controls within the environment.

There’s also the dilemma of immersion—VR design’s greatest strength can also be its undoing. Everything your user sees and does has to be carefully planned out. You can’t overstimulate them with too many elements, or bore them with too little. You need to make sure their next task is clear, and important elements are visible from all angles. Essentially, VR design puts more power into the hands of the designer, for better or worse.

We’ll cover a lot of these fixes below, but for now it’s important to get into the right mindset for VR design. It’s a skill that requires being able to see from every angle, figuratively and literally.

Virtual reality design: passing fad or the new norm?
—

The spike in VR development has people split over whether VR is the next big thing or just this year’s big thing.

There’s good reasons on both sides. The naysayers cite the limitations of the tech, not to mention the hefty price (the Oculus Rift goes for $399 these days, HTC VIVE sells for $499, and low-range models like the PlayStation VR run around $299.) It also doesn’t help that VR gives some people motion sickness, either.

The VR industry itself grows every day, with new companies cropping up more and more. In fact, the number of VR companies saw “massive growth” last year, according to VirtualRealityMarketing, whose client list went from 99 in 2015 to 2,700 in late 2018. By their count, 1.5 VR companies open somewhere in the world every day.

But for now, it seems the state of VR design has not yet caught up with the ambitions of investors. While there’s more VR designers than ever before, it’s still such a new industry that many are writing the rules as they go along.

That said, there’s still enough background to provide a solid foundation for starting out. We’ve collected the most reliable best practices for virtual reality design below to give you a head start if you plan on breaking in.

VR design best practices
—

Let’s get down the specifics of what VR designers need to know before getting their hands dirty. To help illustrate these design do’s and don’ts, we’ll be referring to our imaginary VR shopping app, 99hemlines.

Please note that we’ll mainly be discussing design principles in the context of virtual reality. If you’re worried about technical concerns, that largely depends on the device you’re designing for. Most VR companies provide a technical guide on virtual reality design for their platform, like the Oculus Rift Best Practices Guide.

Interaction
—

Semantic and responsive gestures

Let’s start with controls, the top priority for interactivity. VR design doesn’t have the luxury of different buttons for different actions—you can’t exactly point-and-click with your mouse. Instead, most controls must be gestures existing within the environment you design.

To make it easier, you can separate the types of gesture controls into two main groups: semantic and responsive. Semantic gestures are common movements we’re familiar with in real reality: walking, craning your neck to see, nodding for “yes,” etc. Responsive gestures are how we interact with our environment: picking things up, throwing them, pushing buttons, etc. Designing responsive gestures is harder because you also have to account for the specifics of an object, like weight or maybe aerodynamics.

So, for 99hemlines, we could use responsive gestures for shoppers to “pull” clothes off the rack, just like in everyday life. When it comes time to pay, we could use a semantic gesture like tapping your pocket or purse to simulate getting your wallet.

For the most part, your goal is to duplicate reality, so try to rely on as many natural gestures as possible. The less “controls” your user has to learn, the easier it will be to immerse themselves.

Use distinct signals based on reality

Another challenge is letting your user know what they can interact with, and how. Designers should give them cues based on the real world—for example, a big shiny doorknob to denote a door or travel point. These cues or signals, called “affordances,” should be self-explanatory; with the doorknob example, users will instinctively try to grab it to interact, not tap it like a button.

Confirmations

Because potentially everything in your environment could be interactive, your users will want constant feedback so as not to waste time. Let them know an action has been completed using affordances, or even just a sound effect. This follows the same best practices of ecommerce—instead of a screen popping up saying your order is being processed, VR can be lifelike, such as a ding from the cash register, or a line of dialogue from the virtual cashier.

Keep menus in-world to encourage immersion

When you’re walking down the street, there’s are no hamburger menus in the upper right corner of your vision. Such menus and HUDs counteract VR immersion—a better alternative is to include all the necessary information within the world itself (i.e., you could place any timers or countdowns on the avatar’s watch). This requires creative problem-solving, but your users will appreciate the hard work.

Be careful with distance

Aside from visual challenges, you want to avoid making your user look back and forth between something close and something far away so their eyes don’t have to switch focus too often. Try to keep a task’s pertinent visuals at the same level of depth.

In VR, designers need to get creative to solve logistical problems, like this carousel for browsing clothes. By felipe_charria

At our imaginary VR store 99hemlines, we sell a lot of imaginary clothes. In the real world, we could feature them all in a large, open floor-room like most department stores, but in VR asking your users to browse items both near and far would cause too much eye strain. Instead, we opt to separate our shop into smaller rooms by type, like ecommerce categories, with the user switching between types on a digital carousel so that all relevant clothes options are close to the shopper at all times.

Audio & visual
—

Concave text and images

Because our own sight is curved, it’s best to display text and images that aren’t part of the environment as a slightly curved, concave surface. This lends itself better to the visual immersion, and will look smoother when the user turns their head.

Speakers vs. headphones

Speakers are best for audio immersion because you can change the direction the sound comes from, even using it as part of the activity. Headphones limit this advantage, but you still want to give users the option anyway. It’s best to design for speakers to create the most realistic audio possible, and then scale it back for headphones.

Render avatars only when necessary

Rendering can be a thorn in the side of even the most thoughtful virtual reality design. And while it does make the visuals that much more effective, it’s not worth the cost of glitches or inconsistencies. That goes double for the avatar’s body, which is bound to come into view more than other elements.

Choose your battles when it comes to rendering avatars. It may be better to have no body at all than to have one with distracting imperfections. An avatar’s significance depends on the application—in a game, having a fully rendered alien space-soldier body adds to the illusion, but for a work training simulation, all you might need are blocky, disembodied hands.

Use visual effects to communicate depth and space

In VR, spatial relations of virtual objects can be a challenge for designers. By felipe_charria

Three-dimensional elements are no problem to spot in real life, but remember that VR still relies on a 2D display model. That makes showing spatial relations especially challenging for designers; users need to know how close or far away objects are from them, and from each other, to properly interact.

The good news is that designers can carry over a lot of traditional visual effects to better establish space and distance. Classic techniques like isometrics, lighting and shadows can help create realistic, 3D spaces, as can more modern ones like parallax and textures.

Designing for the human body
—

Humans move in arcs

To have your VR design’s body movements resemble real life, remember that we humans move our limbs in arcs, not straight lines. The common but understandable mistake of programming rigid movements is a dead giveaway about how real a reality is.

“Goldilocks” zone

Excessive head movement is what gives some users motion sickness, and in general you want to avoid making your user move their head too much. It’s best to keep interactive elements between desk height and eye level—called the “Goldilocks” zone because it’s not too high and not too low.

Make sure elements are at the right height—the Goldilocks zone. By felipe_charria

That’s exactly why we went with the clothing rack model for 99hemlines. We could have hung clothing on the wall to take advantage of height, but that would necessitate the shopper having to look up and down as well as left and right. It’s better to restrict head movement whenever possible.

Encourage users to keep their hands up

As in real life, almost all of a VR design’s interactions involve the hands. Your user’s hands are their best tools for exploring the environment, so encourage them to hold them upright and at the ready. When the user can see their hands in the virtual environment, it’s easier (and more fun) to interact with objects. Again, this may require creative problem-solving, but sometimes it’s just as simple as having them carry around an object.

VR’s success depends on designers
—

At this point in time, we’re reaching a turning point: the limits of VR design are becoming less about technical aspect and more about the imagination of designers. Consider this a challenge. Virtual reality design is the new frontier—sure, it’s difficult to get started out there because its new and unfamiliar, but for those same reasons, there’s boundless opportunity.

What do you think the future of VR design will be? Are you looking forward to its adoption or hoping the fad the die out? We want to hear what your thoughts, so feel free to share your own predictions and opinions below in the comments now.

The author

Matt Ellis is a freelance content writer, specializing in web design and ecommerce. For over a decade he's been sharing his industry knowledge through ebooks, website copy, and blog articles just like this one. You can learn more about his career and writing services at https://www.mattelliscontentwriter.com/.