For many designers, virtual reality (VR) is a new and unfamiliar field. Over the past few years, we have witnessed the explosive growth of virtual reality hardware and software. From the experience point of view, virtual reality has both small and simple but also professional complex, the overall experience is very different.
As a UX or UI designer, first contact with VR can be daunting, but don’t be afraid. In this article, we’ll share a complete process of designing VR applications, and we hope you can start your own VR design journey with this example. You don’t need to be an expert in VR; you just need to apply your previous design skills to a new field. Ultimately, through the joint efforts of all, we can accelerate the development of VR to play its full potential.
1. what is in the VR application?
Generally speaking, from a designer’s point of view, VR applications consist of two types of components: environment and interaction elements.
Environment: You can see the environment as the whole world you enter when you wear a VR helmet, such as your virtual galaxy or a roller coaster ride.
Interaction element: an element collection that affects user interaction and manipulation experience on the interface.
According to the complexity of these two components, all VR applications can be positioned along two axes.
VR applications in the upper left quadrant have something similar to simulators, such as roller coaster VR applications, which have a fully formed environment but do not interact at all. You’re just locked in the car.
In the lower-right quadrant, the application has a better interface, but less or no 3D environment. Samsung’s Gear VR main screen is a good example.
Virtual environments such as design sites and landscapes require skilled use of 3D modeling tools, which many designers do not normally have access to. However, UX and UI designers have a great opportunity to apply their existing skills to designing virtual reality user interfaces.
The first full VR UI design we did was the Economist application, working with Visualize, the VR production studio. We design, Visualize create content and develop applications.
We’ll use this application as a working example in a future article, and now we’ll show you how to design a VR application, followed by the details of designing a VR interface. You can download the Gear VR Economist application from the Oculus website.
2. the first step in VR UI design review the traditional process
Although most designers are already familiar with the workflow of designing mobile applications, the process of designing a VR interface is still unclear. When faced with the first VR application design project, the first thing we need to do is to be logical.
Traditional workflow to new field
When we first used Samsung’s Gear VR, we noticed that it had a lot in common with traditional mobile applications. VR applications have the same workflow as traditional applications: helping users interact with the interface.
Now please remember. Given the similarities with traditional applications, the time-tested mobile application workflow that designers have spent years improving is not wasted and can still be used to make VR UIs. This brings you closer to VR than you think.
Before we design the VR interface, let’s look back at the design process of traditional mobile applications.
1. wire frame
First, we will quickly iterate to define interaction and overall layout.
2. visual design
At this stage, functions and interactions have been completed. We apply visual specification and design to wireframe and make a beautiful interface.
3. design documents
Here, we organize the screens into processes, draw links between the screens, and describe the interactions of each screen. We call this application design document, which will be used as a major reference for developers.
Now, how do we apply this workflow to the design of virtual reality?
3. start VR UI design
1. the size of canvas
The simplest question is probably the most challenging. Faced with the 360 degree canvas, it may be hard to know where to start. It turns out that UX and UI designers only need to focus on one part of the whole space.
We spent a few weeks trying to figure out what kind of canvas size is suitable for VR design. When you use a mobile application, the canvas size depends on the device size: the iPhone 6 is 1334 x 750 pixels, and Android is about 1280 x 720 pixels.
To apply mobile application workflow to VR UI, you must first determine the appropriate canvas size.
The following is the appearance of a flat 360 degree environment. This view is called the isometric rectangle projection. In the 3D virtual environment, these projections are wrapped around the sphere to imitate the real world.
The horizontal width of the projection is 360 degrees and 180 degrees vertically. We can use it to define the pixel size of the canvas: 3600 * 1800.
Using such a large size can be a challenge. But because we’re primarily interested in the interface design of VR applications, we can focus on part of the canvas.
Based on Mike Alger’s early study of comfort viewing areas, we can find a suitable part to display the interface.
The region of interest accounts for 1/9 of the 360 degree environment. It is located at the center of the image with a size of 1200 * 600 pixels.
Let’s sum up:
“360 degree view”: 3600 * 1800 pixels.
“UI view”: 1200 * 600 pixels
4. test prototype
The UI View canvas helps focus our attention on the interface we’re working on and makes the design process easier.
At the same time, you must use the “360 degree view” preview interface in VR environment. In addition, in order to get a real sense of proportion, it is also necessary to use VR helmet to test the interface.
With Avocode, you can compare designs with ease and intuition.
5, design tools
Before starting, we need the following tools:
We will use Sketch to design our interface and user processes. If you do not, you can download the trial version. Sketch is our preferred interface design software, but if you use Photoshop or any other software more comfortable, no problem.
2. GoPro VR Player
GoPro VR Player is a 360 degree content viewer. It is provided by GoPro and is free. We will use it to preview our design.
3. Oculus Rift
Oculus Rift is connected to the GoPro VR player, which will enable us to test our design.
6. VR interface design process
In this section, we will introduce how to design VR interfaces. We will design a simple interface, which will take up to 5 minutes.
Download the source file: https://pan.baidu.com/s/1WUwNLlTJkG82Hxdofaqzg
Which contains the default UI elements and background images. If you want to use your own design document, that’s fine.
1. set the “360 degree view”.
First thing we need to do is let us create the canvas of the 360 degree view. Open a new document in Sketch and create a drawing board: 3600 x 1800 pixels.
Import the file background.jpg and place it in the middle of the canvas. If you use your own background file, make sure it’s 2:1 and resize it to 3600 x 1800 pixels.
2. set up Sketchpad
As mentioned above, “UI view” is a “360 view” clipping version. We only focus on the VR interface.
We create a new drawing board: 1200 x 600 pixels. Then copy the Sketchpad to “360 view” and place it in the middle of the drawing board. Do not delete the “360 view” sketchpad. We keep two sketchboards at the same time, and will use them later.
3. design interface
We will design our interface on the “UI View” canvas. We will try to be as simple as possible. First we want to add some blocks to the view. You can drag it to the middle of the UI view with the tile.png file.
Copy it and create a block of three blocks.
Use the kickpush-logo.png file and place it above the block.
4. merge Sketchpad
Now let’s look at some interesting things. Make sure that the “UI view” Sketchpad is located above the “360view” drawing board on the left layer list.
Drag the “UI view” Sketchpad to the middle of the “360 view” drawing board. Export the “360 View” Sketchpad to PNG, and “UI view” will be located above it.
5. test it in VR.
Open GoPro VR Player and drag the “360 View” PNG that just exported to the window. Drag the image with the mouse to preview the 360 degree environment.
We are done! Is it very simple?
If Oculus Rift is installed on your machine, the GoPro VR player should be able to detect it and allow you to preview images using the VR device. Depending on your configuration, you may need to do some display settings in MacOS.
7. factors to be noted in VR design
1. low resolution
VR helmet resolution is very bad? This is not exactly true. Actually, it is equivalent to the resolution of a mobile phone. However, considering that the device is 5 centimeters away from your eyes, the monitor does not look clear.
To get a clear VR experience, we need an 8K display, which is a 15,360 x 7680 pixel display. I believe this equipment will become popular sooner or later.
2. text readability
Because the resolution of the display is low, all the beautiful UI elements will appear to be pixel oriented. This means that, first of all, words are difficult to read, and second, the straight part will appear serrated. So avoid using large text and particularly complex UI elements.
8. finishing work
1. design documents
Do you remember the flow chart of our mobile application? We now apply this approach to the VR interface. Organizing an easy-to-understand flowchart with the interfaces we’ve already done is very helpful for developers to understand the overall architecture of the application we’re designing.
2. dynamic design
It’s one thing to design a beautiful UI, but it’s another thing to make him move. We decided to deal with it in a two-dimensional perspective.
Based on our Sketch file, we used Adobe After Effects and Priciple to animate the interface. Although the output is not a real 3D experience, it is enough to guide the development team and help our collaborators understand our vision early in the process.
We know what you are thinking, “this is cool, but the real VR application is much more complicated. Yes, of course. But the point is to what extent can we apply our current UX and UI experience to this new medium?
9. How far can VR UI go?
1. new interactive experience
Some VR experiences rely heavily on virtual environments, but traditional interfaces are no longer the best way for users to control applications. In this case, you may want users to interact directly with the environment itself.
Imagine that you are making an application for a luxury travel agency. You want to transfer users to the potential vacation destinations in the most vivid way. Therefore, you invite users to wear headphones and begin to experience in the fashionable Chelsea office.
To move from office to destination, users need to choose where they want to go. They can pick up a travel magazine and browse them lightly, until they are attracted by a page. Or, there may be a series of interesting items on the desktop that take users to different locations depending on the user’s choice.
This is really cool, but there are also some disadvantages. To achieve the perfect result, you need a more advanced VR helmet with a hand-held controller. However, applications like this cost more energy than traditional applications.
Long live the 2. revolution
The reality is that for most companies, these immersive experiences are not yet commercially viable. Unless you have virtually unlimited resources, such as Valve and Google, it can be too costly, risky, and time-consuming to create a product similar to the experience described above.
It’s an amazing experience that takes you to the forefront of media and technology, but it’s not good to market products through new media.
Usually, when a new form appears, it will be a niche product. As time goes on, the cost drops, enough people to learn and the market to inject capital, it will become a widely used product.
As VR helmet becomes more and more popular, more and more companies will incorporate VR into their interactions with users.
From our point of view, VR user interface is inherently more intuitive and efficient than mobile phones and tablets, and closer to the user, with the development of technology and the market, VR will bring greater value.