5 Lessons I Learned From Designing the VRUI of Beloola

The future of social media is in Virtual Reality, no doubt about that. But we’re not there yet. It will take a couple of months or even years for the masses to be able to get their first VR HMDs, which makes enough time for us to switch from 3D Web to Web VR — and actually we are already doing pretty good stuff in VR.

Here’s what happened a few months ago. Beloola is initially a social platform that allows people with shared passions to meet up in the same 3D space. Because it’s built under WebGL, it’s accessible without any download as long as your desktop or mobile browser is up to date. Wouldn’t be nice if we could bring our experience to VR? WAIT, if it’s WebGL, doesn’t it mean it can already be run on any browser compatible with VR?!

So we tried to run Beloola on the Chromium browser and it worked instantly. Ok, we’re gonna do this Web VR thing, 100%. As Lead UX / UI Designer at Beloola, my challenge was to work on the design and the creation of the User Interface and Experience for Virtual Reality, obviously very different from the desktop and the mobile. As VR — and especially WebVR — is still very recent, there are very few examples of social VRUI design out there and that’s why I wanted to share my feedback with the VR community.

1. Consider New Inputs

VR headsets change the way people interact with machines. They use 100% of our visual and auditory senses to dive us into a new world. Also, a good VR UX must be focused on natural actions such as head movement or binaural audio. In other words, a good VRUX requires disruptive inputs - get rid of your keyboard, now.

Some uses have to change and the most relevant example on our platform is typing. How can a user enter keywords in the search bar or write a message without a real or virtual keyboard? We have to think in other ways with VR and we must use new inputs given by the headsets: we can suggest vocal chat rather than a typing chat, or a search with keyword and tag suggestion rather than typing keywords.

Physical fatigue is also an important factor to think about. In VR, head movements are more natural but also more tiring for users. This enables us to design an optimized VRUI: we can suggest to explore a picture gallery on horizontal axis rather than vertical to be less tiring for the user.

There are already a lot of VR headsets available to developers and each constructor offers its own inputs which means that it can be sometimes very difficult to define a same UI/UX for that suits with every device. We have to test all new devices on a regular basis: this is the best solution to understand advantages and constraints, and to offer a great VRUX and VRUI.

2. Design Simple and Relevant Interfaces

A big constraint in VR is the very small size of the fields of view. It is limited of 30° from the center for a clear view of elements around us. Further away, we only see blurred shapes and colors. Moreover, interacting with a UI is very tedious with a reticle. The view is less accurate compared with a mouse or a tap on a touch screen, and it requires basic skills to properly aim at elements.

We have to simplify and order our UI: CTAs have to be bigger and we must prioritize the features in order to bring a more uncluttered interface.

The good part of this work on VRUI is that it can be also very useful for the desktop UI as for the mobile UI. Simplifying and ordering a product is always a good thing for user experience.

3. Create “Diegetic” Interfaces

VR devices offer a full view without limit, which is very different from desktop and mobile devices. The VR medium has no border, all the world surrounds the user and that has many consequences in designing VRUI.

To create a best experience for VR, it is better to go for a “diegesis” design. A “diegetic” UI is a UI in the context of the reality of its product. You might want to watch the conference Designing UI For VR: Develop 2015 by Dan Gilmore from Atom Hawk studio to know more about this concept.

Diegetic interfaces are very uncommon in virtual world, they are usually designed on the border of a screen to offer additional information. The device influences the form of the content.

The logic isn’t the same in VR. We must consider the virtual world around us and link interaction and their interfaces with this virtual reality: chat features should be displayed in the virtual environment rather than with a detached interface. It is the same for many social features.

4. UI must be Easy

Users on Beloola are always in motion in the virtual world: you can walk your avatar, change your point of view… which means that it is more difficult to fix core elements of an interface like a menu.

The use is already taken for desktop and mobile: a menu is very often locked on the top or the bottom of the screen. What about in VR ?

We have to reinvent the rules. We can use data about the user like its position in the space or the angle of view rather than using the controls of the device. In Beloola, we are working on creating a menu which is easy to find no matter where you are and where you are looking at. Users look down to find the main access to the features. This menu is always fixed on the axis of the view of the user and is always at its same height. Users can find this menu easily no matter where they are and in a height of view where there are no elements obstructing them.

The Cardboard Design Lab offers a very good inspiration and views of the VR design, I highly recommend you to test it.

5. Always Test your Design

Creating and testing a VURI it are two very different things. Creation tools are almost only exclusive to desktop. When it comes to creating interfaces for VR, we try to provide the same immersive perspectives, views and rendering. However it is very difficult to have the same experience of the VR work on the desktop.

Designers must always test their work directly on a headset to see exactly if the design has the same rendering as expected initially. The Quick VR Mockup created by Josh Carpenter from Mozilla is a wonderful tool that I’ve been using from the beginning of the creation of Beloola’s VRUI. It consists in a 3D scene with an empty cylinder surrounding the user and to which 2D mockups can be applied.

It is quick and easy to test our design in a 3D space with the constraints of a VR headset with no extra time spent on development. The most important step is to valid good ideas and to get rid of bad concepts before starting the development of a first prototype.

Conclusion

That’s my first feedback about the creation of the VRUI of Beloola. I hope my advice will be useful for your work. We will try to publish articles regularly with the team about our work. Here a couple of interesting articles, videos and other contents on VR design below that I find very interesting:

• VR Interface Manifesto by Mike Agler
• Quick VR Mockup with Illustrator by Josh Carpenter
• UI/UX design for WebVR by Josh Carpenter
• How to Design for Virtual Reality by Matt Sundstrom
• Designing UI For VR: Develop 2015 by Dan Gilmore
• My Pinterest board on VR design references