Want to start designing VR applications? Here is a practical design guide for you!

Editor's note: How to design a virtual reality app? In fact, you can already design it yourself. The key points that need to be paid attention to have been summarized in the following article, which is very practical~

Virtual reality (VR) is a fully immersive experience that blocks out the real world. There are many common VR devices, including HTC Vive, Oculus Rift or Google Cardboard. Users can enter various simulated real worlds and imaginary scenes, such as standing in the middle of a group of screaming penguins or even on the back of a monster.

In addition to virtual reality, there are other reality experiences such as augmented reality, mixed reality, and extended reality, which provide different experiences to users.

The difference between AR, VR and mixed reality

Augmented reality (AR) adds digital elements to a live view, usually through the camera on a smartphone. Examples of AR experiences include Snapchat lenses and the game Pokémon Go.

Mixed reality (MR) experiences combine elements of AR and VR, as well as the interaction of real-world and digital objects. Mixed reality technology is now in its infancy, with Microsoft's HoloLens being one of the early famous mixed reality devices.

Combining traditional design with 3D experience

Over the past few decades, the market has provided designers with a wealth of solid work and is moving towards a new paradigm of vivid 3D content. Sound, touch, depth, and feel are all fundamental to the VR experience, and even the novel 2D screen experience can feel tired and outdated.

VR offers many of the same benefits as real-world training, but without the safety risks common in real-world situations. If subjects feel overwhelmed, they can take off the headset or adjust the experience. This means that specific industries such as medical, military, and police should prioritize how to use VR for training.

Take Skype, for example. VR has the potential to bring digital workers together in digital meetings, like Facebook Live with VR for real-time event coverage. Rather than just seeing another person on a screen, with a VR headset you can feel like you’re sitting in the same room with them, even though you’re thousands of miles apart.

[[261258]]

Think about how people use touch screens today, and we can understand through many examples - swiping, pinching to zoom, and long tapping to provide more options. These are all things that can be designed in a virtual reality environment. I believe that as more creators enter the VR field, more people will be engaged in brand new UI design to help businesses grow.

Interactivity in virtual reality consists of three elements - speed, range and mapping. Speed ​​refers to the response time of the virtual world. The faster the virtual world responds to user actions, the better, because the immediacy of the response affects the realism of the environment. Many researchers have tried to determine the characteristics and components of virtual reality interactions using different methods. However, in order to do this, designers must have a comprehensive understanding of the real world, which means that they need to visualize the typical real space around the user and then build on the known elements. The reason for this is to avoid making users feel that the newly introduced elements are invading their personal space.

What kind of VR App should we design?

From a designer’s perspective, VR applications consist of two types of components: environment and interface.

You can think of an environment like the world you enter when you put on a VR headset—the virtual planet you find yourself on, or the view you see when you ride a roller coaster.

The interface is the element through which users interact with the environment, navigating it and controlling their experience. All VR applications can be positioned along two axes depending on the complexity of these two elements.

• In the upper left quadrant are things like simulators, like the roller coaster experience mentioned above. They have a near-realistic environment, but there's no interface, you're just locked in the car.
• The opposite quadrant is where apps with well-made interfaces but a single environment are developed. Samsung’s Gear VR home screen is a great example of this.

How to start designing user experience for virtual reality?

Before you start designing, it may be helpful to think through a few basic questions:

• Where do users start?
• How to guide users?
• Do you want to provide detailed instructions, or create a minimalist environment that doesn’t overwhelm the user with choices?

Don't expect users to know what to do. Slow and gradual familiarization, visual cues, and guidance from the software should all be used to help users. When you design for VR, you design for people's abilities as much as you design for the abilities of the system. So you have to understand your users and the problems they may have when experiencing VR.

The process of designing a VR experience is not that different from designing a web or mobile product. You need to build personas, conceptualize flows, draw wireframes, and create interactive prototypes.

The process of UX design for virtual reality

While most designers have established their own workflow or design process for designing mobile apps, there is no globally agreed upon design process for VR interfaces. Designing your first VR app, you should start with the first logical step, which is to set a strategy or plan.

[[261259]]

VR User Research

First, before you even start thinking about building for VR, you need to think about what kind of experience you need to create. Of course, there is no one-size-fits-all approach. Most ethnographic research strategies are completely open to interpretation in VR, including:

Client interviews, field visits, feasibility testing, benchmarks, simulation exercises, shadowing, participant observation, heuristic evaluations, focus groups, eye tracking, exploratory research, and diary studies.

Wireframe

As designers usually do, we will typically go through rapid iterations, defining interactions and the overall layout with the help of wireframes.

Visual Design

At this stage, functionality and interactions have been determined. Brand guidelines are then applied to wireframes; building a beautiful interface.

The design process for VR applications will not change dramatically unless feasibility issues are considered during the design process.

Environment Settings

Canvas Size

To apply common mobile app workflows to VR UI, you must first determine an appropriate canvas size.

Here's what a 360-degree environment looks like when flattened. This is called an equirectangular projection. In a 3D virtual environment, these projections are placed around a sphere to simulate the real world.

The full width of the projection means 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600×1800. Designing at such a large size can be a challenge. But since we are mainly focusing on the interface of the VR application, we only need to focus on a part of this canvas.

Building on Mike Alger’s earlier work on the comfortable viewing area, we can isolate the parts that have an impact on the presentation of the interface.

The area we need to focus on is one ninth of the 360-degree environment. It is located in the center of the equirectangular image and is 1200×600 pixels in size.

To summarize:

• 「360 Panoramic View」: 3600×1800 pixels
• UI View: 1200×600 pixels

Grab a pen and paper

Get your ideas down on paper before using software. It’s quick, cheap, and helps you express ideas that might take hours to work on in software. This is especially important because going from sketch to high fidelity takes more time in 3D than in 2D.

software

Some designers use known tools like Sketch, others take this opportunity to learn new tools. It is important to choose the right engine to create your application. If you are creating a 3D game, you can use Unity or Unreal Engine. C4D and Maya are also widely used, but mainly for complex animations and renderings.

Principles to consider when designing

Text readability

All your nice and crisp UI elements will look pixelated due to the resolution of the display. Firstly, this means that the text will be hard to read, and secondly, there will be a high degree of aliasing on straight lines. So try to avoid large blocks of text and very detailed UI elements.

Default reading distance: This is the viewing distance we design for. What is the optimal viewing distance for these screens? The default reading distance will determine the size of the screen and the size and density of the content within it.

[[261262]]

Units are also important. The non-length unit millimeter or dmm (decimilimeter) can be described as one millimeter at a meter away. So it is an angular unit, and as it extends away, it only increases in millimeters. Let's look at a specific example. In the upper left corner of this figure, there is a screen space layout measured in dmm, and all UI elements are measured in dmm. It is 400×480 dmms high, and then I applied this layout to three separate virtual screens.

All of these virtual screens have different preset reading distances. The advantage of virtual screens is that all of these screens are designed to be viewed, they all look the same to the user, they have the same angle size, the text is just as readable, the buttons are just as clickable, the motion is just as good.

Ergonomics

When we first designed for VR, it was exciting to think about creating those futuristic interfaces we’ve seen in Hollywood blockbusters like Iron Man or Minority Report, but the reality is that those UIs can become exhausting if used for more than a few minutes. The following diagram helps illustrate the comfort range of motion zones:

We've all been affected by some form of phubbing syndrome (the painful feeling of looking down at a smartphone for too long). Depending on how far you lean over, poor posture can put up to 60 pounds of pressure on your spine. This can cause permanent nerve damage in your spine and neck.

Avoiding Simulator Sickness

There are also physiological considerations for virtual reality. Like the flight simulators that pilots use in training, virtual reality has the potential to present a mismatch between reality and visual motion cues—when your eyes think you’re moving, but your body isn’t. This mismatch can produce feelings of nausea, known as “simulator sickness.”

Understanding the physiological effects of designing for VR and following these guidelines are critical to making your app successful and ensuring your users avoid simulator sickness.

Brightness range

Be aware of sudden changes in brightness. Since the screen is close to the user's eyes, transitioning from a dark scene to a bright scene can cause discomfort as the user adjusts to the new brightness level. This is like walking from a dark room into sunlight.

Button Placement

Avoid spacing safety buttons too close together. Safety buttons work better when they are larger and farther apart.

If multiple smaller buttons are placed close to each other, users may accidentally click the wrong button. Small buttons that are close to each other should require a direct click to activate.

“Our interactions with VR platforms need to be as natural and intuitive as possible, rather than trying to adapt ourselves to the limited interactions supported by existing technology.”

VR Design Tools

Sketch

Sketch to VR is a sketching plugin that uses A-Frame. The Sketch to VR plugin will automatically create an A-Frame website, but we just need to design it in Sketch.

Google Blocks

Use simple 3D geometry to simulate scale and depth. If you have an Oculus Rift or HTC Vive, you can use Google Blocks to simulate your ideas. This is not what you will present to the user, but it is to help you intuitively perceive the 3D environment.

Photoshop

We can use core image editing tools like pens and brushes to draw elements in three-dimensional space.

Designing VR apps with Sketch

Set up 360 Panorama Mode

Start by creating a canvas to represent the 360-degree panoramic view. Open a new document in Sketch, create an artboard of 3600×1800 pixels, import the file and place it in the middle of the canvas. If you use your own equirectangular background, make sure it has a 2:1 ratio and resize it to 3600×1800 pixels.

Set up artboard

As mentioned above, the UI View is a cropped version of the 360 ​​Panorama View, focusing only on the VR interface. Create a new artboard next to the previous one: 1200×600 pixels, copy the background added to the 360 ​​Panorama View, and place it in the middle of our new artboard. Don't adjust it at this step! Keep a cropped background here.

Design interface

Design the interface on the U View canvas. For demonstration purposes, we will keep the interface simple and add a row of tiles. Duplicate it and create a set of 3 tiles placed horizontally.

Merge artboards and export

Drag the UI View artboard to the middle of the 360 ​​View artboard and export the 360 ​​View artboard as a PNG. The UI View will be on top of it.

Conduct VR testing

Open the GoPro VR player and drag the "360 Panoramic View" PNG file you just exported into the window. Drag the image with your mouse to preview the 360-degree environment.

Prototyping

In this step, organize the screens into flows, draw links between screens, and describe the interaction relationship of each screen. We call this the APP blueprint, which will serve as the main reference for project developers.

Conclusion

As a designer, I believe we should start improving our skills and creating the future of the design industry, where the professional skills of designers play an important role in enhancing and improving the daily lives of application users. The concepts and ideation methods used in design thinking and UX methodologies are not much different from before, with the focus on these new interaction principles mentioned above.