Getting started with VR design

image

Intro about VR

Virtual reality is a computer generated environment which makes you take a ride to a whole new world. Within seconds, you’ll forget the real world exists visually by just wearing a headset around your head. You can take a trip to the solar system visiting other planets, surf or get yourself lost in a haunted house. Virtual reality is nascent but we’re pretty sure everyone will have a virtual reality app in the near future. As of now, it’s like web in the 90’s.

I wanted to envision virtual reality on our in-house product (at NFN Labs) called Vookmark that allows you to bookmark videos once and view on your web, iOS, Android and Apple TV. Vookmark would be a pretty good use case as users would love to binge watch videos that they find interesting on weekends… with headset mounted to their heads ;)

Designing for virtual reality

VR scene is composed of two components -

  • Environment
  • Interface.

Consider this example:

You’re in the Himalayas. You find yourself surrounded by mountains, snow and the clouds and you’re ready to trek with your gear all set. The mountains, snow and clouds are the environment and your trek gear will be the interface you’ll be interacting with.

Similarly, when you go with no trek gear, you just have an environment (mountains, snow and cloud) and no interface elements (trek gear) to interact with.

image

Vookmark in this case, has elements where the user must interact to immerse into the viewing experience.

We didn’t have to change the workflow in the VR app design because it’s similar to that of the mobile app — the user vookmarks, selects the video they want and watches.

Design Workflow:

Tools you need:

  1. Sketch / Adobe Illustrator
  2. GoPro VR Player

Art Board Size:

This could easily be one of the problems faced by designers since the canvas is going to be 360° horizontal and 180° vertical, they might easily be perplexed about what size of art board should be.

10px for every 1° is what you should keep in mind.

Building a canvas alone is not important as we must focus on the convenient viewing angles of the user so that they can easily interact with the interface. The canvas size should be 3600 x 1800. Mike Alger’s pre-visualisation method talks about the comfortable viewing angle for a user and he states that the position should lie in the centre of the canvas having a width of 1200 and height of 600. This will be the position where the users will be interacting with the elements on the screen.

Wireframes:

After knowing all the necessary details, wireframes are created. In case of Vookmark, the entire flow is same as the mobile apps and it doesn’t change.

image
image

Visual Design / Prototype

  1. After you’re done with your visual design, simply export it as PNG.
  2. Open GoPro VR Player, drag and drop the exported image. You’ll get something like this:

image

3. You can plugin your Oculus Rift / HTC Vive or any other VR headset supported by OpenVR and it works well with the GoPro VR Player.

4. Once connected, you can test your design to check the proportions and the interface elements in your VR headset.

Vookmark for VR Final Prototype:

Get aboard the VR Ship:

Virtual reality is still nascent and it’s improving at a rapid pace. With VR pioneers like Facebook and HTC improving their Oculus and Vive headsets, companies are slowly getting into this business trying to solve, improve experience of their products and engage with their customers. We’re close to experiencing a full fledged VR with controllers as the headsets are getting affordable.