How to design for Virtual Reality

How to design for Virtual Reality from UIGarage
Philippe Hong

Updated on December 6, 2016

Today we’re going to talk about Virtual Reality, yes, the trendy thing everyone is talking about. Oculus Rift, HTC Vive, Samsung Gear, all that kind of stuff. But we’re going to talk more specifically about User Experience and User Interface in VR, and for everyone’s concern, User Experience and User Interface in VR are completely different than in normal web interfaces. It’s an interesting subject and I hope this will help you to start designing for this new and exciting technology, which is VR. The subject was presented on by Vivid N. Savitri during the Immersive Hack Hackathon in Sydney. She’s a videogame and user experience designer. She formerly worked for Atlassian, Frog Design and Trigger (acquired by Sony Entertainment) and and recently founded her own startup.

1. Where and how to start

Learn how others do

First of all, before you even start thinking of designing for VR, you need to test drive the VR experience, to understand how it works and how it feels. Buy your first cardboard, it’s very cheap. And then try as many games or demos as you can. This is the only way you can really understand how it differs from the desktop experience.

Decide what experience you want to create

This step is very important and it doesn’t need to be overkill. Try to focus on what you need as a MVP and start from that. Is your game/app a FPS? Or third person? Where are you in the VR world?

Illustrate the user flows

What happens when people go into your app or game? How does is start? From the mobile? Desktop? Beyond the user experience for business application, you need to care about: “What makes things fun?” And this is true for normal application as well. Make it intuitive and don’t forget that something great means people forget about the controllers.

Sketch various UI and HUD options

Don’t reinvent the wheel. It doesn’t mean you need to lose your creativity. Users have already learned and know subconsciously, some design interface principles. Try to use that to your advantage so you can focus on solving your own problem. Icons and Terminology are a couple of examples.

2. Design tools

Pen and paper

This is a basic tool but sketching is an important part of the design process so you can focus on solving the problem. Then when it comes to designing onto tools like sketch or figma, you’ll start to think about design and look & feel. Try to focus on one thing at a time.

Sketch or other design tool

This depends on what engine you are going to use to build your app/game. If you are building a 3D Game, then use the app according to your need. It’s also a good way to start learning a new tool. Don’t restrict yourself to what you know. Try new horizons.

3. Framework to use

Mozilla A-Frame (Web VR) e.g: Google Cardboard, Samsung Gear, Oculus Rift Daydream VR (Mid range VR google) e.g Mobile (Daydream ready only) Unity VR, Unreal SDK (High end VR google) Unity Asset Store e.g Oculus Rift. HTC Vive, FOVE, Holelens (AR), etc. If you know of any new framework, please feel free to comment to add it to the list. [wp_ad_camp_2]  

4. Experience Principles

Comfort

Comfort is the next evolution of the user experience, especially after 45 minutes. You need to avoid creating headaches for the user when using your app or game. VR is a very strange experience for your brain because your brain sees that you’re moving but in reality you’re not. Poorly produced VR can make you very sick but there are ways to minimise the motion sickness by using teleportation instead of animating the user from point A to B. Here is a simple schema showing the user comfort zone:
How to design for Virtual Reality from UIGarage

Example of Comfort Zone

Translated to Immersion

How to design for Virtual Reality from UIGarage

Immersion measure in degree

This number is an average depending on the gear you’re using, so make sure to verify the number yourself.

Interface

Obviously, you can’t put the interface in front of the user so imagine the user being a part of a world with the interface immersed and not simply sitting in front of the user. It is also important to consider layer depth in VR.
How to design for Virtual Reality from UIGarage

Depth Layer in VR

To measure this, try to imagine the user playing in his living room, just in front of the TV. Simply measure the distance between the TV and the user and be sure to test the distance in the interface as you build out the design.

In terms of pixels, this can be an example:

How to design for Virtual Reality from UIGarage

VR in term of pixel on the screen

Forget about everything you know about basic web UI, because it won’t work in VR. Don’t try to mimic the web UI, try to create an user interface relevant for the controller you’re using. There are a few types of controllers available in VR. One is a focus controller, following the focus of your eyes. Another one uses the physical and is the wireless controller (looks like a game pad), the ones you can use with HTV Vive for example. So don’t try to do a 2D UI and try to use for example a cube which allow to use different faces by controlling it with your controllers. Here an example of 3D interface (from Tilt Brush):
How to design for Virtual Reality from UIGarage

Control Menu in 3D on Tilt Brush

5. Sound & Music

Literally your best friends. While in Web, sound and music are pretty annoying in normal usage. In VR, it can help the user navigate in your world. For example, you can call the user from a direction to guide him.

Some tools you can use:

DearVR: https://www.assetstore.unity3d.com/#!/content/56127?aid=1011lIv9 WWise: https://www.audiokinetic.com/products/wwise/ FMOD: http://www.fmod.org/ Cubase: https://www.steinberg.net/en/products/cubase/start.html

6. Player Movement

Moving the player around in VR is quite complex because there is no simulator barrier between, like desktop screen or console. So how are you going to move them? Are you building something that people is in control? Or are you moving the character in VR? The approach you’ll take in the movement will influence your VR experience. For example, if you’re trying to mimic real hands in VR, the user will expect the same behavior. So it’s a lot easier when it’s actually more cartoon or fake hand. Player tend to be more forgiving when they know it’s a fake hand. As well for video game where the player is in a car or a spaceship. Because you don’t have to render all the movement around. So try to be smart and choose wisely where to position your player.

7. Playability Testing

This is also valid for VR, and try to test as much as you can with user that had never used VR before. Let them experience without telling them what to do.   Hope you guys find this helpful. If you have any new information or suggestion, feel free to comment or reach me by email.