Designing the best browser UX for VR

by Bilyana Vacheva

While some of you are still recovering from VRDC, I will take the opportunity to share some of the cool things we have been up to in the past few months.

At the beginning of this year, we set an ambitious goal – revolutionize the VR browser UX by empowering the users to take full advantage of the 360 environments. Currently, WebVR-ready browsers offer nоthing additional in terms of enhanced VR user experience. The reason is that VR users are just a small part of the browser vendors’ user base, thus they put little efforts in designing UX that fits the needs of this subset. In our case, we are building a browser for VR. We can focus entirely on VR-specific user needs and experiment with bold and innovative concepts.

Walk the talk

Designing UX for VR feels like the early days of web development – very few rules exist making the whole process a trial and error. You should keep an open mind and look for inspiration and guidelines literally everywhere from sci-fi movies to VR games. Prototyping and testing with users is the only way to gain deep insight into the types of VR users and their behavior in VR. That is why we decided to dive right into it and start developing and iterating VR prototypes, here’s a short summary of what we have done so far.

Virtual Website

In this experiment, we explored how a flat website could transform into a 3D website. Frameworks such as A-frame and three.js are awesome as they allow developers to use web technologies to create VR website, but at the same time, they still require the websites to be re-implement in order to be VR-enabled. Our approach is different. We want to create VR-responsive web pages. This means making it possible for the current 2D web to be browsed in LensVR by simply adding some lines of CSS to the website code.

We started by looking into the most popular web content – media website ( we took ESPN as an example). The website layout was easily adaptable for VR -the content naturally split into three separate columns that we could curve around the user in line with the best practices of VR screen positioning.

VR website transition

Our vision is that a user will be able to interact with each part of a VR website by moving it, enlarging it, shrinking it, or even pinning it next to her while browsing the rest of the website. In this prototype, we aimed at discovering the most intuitive and easy interactions to empower the user do all of these actions. Also, we aimed at designing interactions that would work both for VR and non-VR devices. What we found was that the best way to create platform independent interactions is by avoiding gestures and simply using a combination of clicks and touchpad. In such a way the VR interactions are very similar to using a mouse on a PC or a touchscreen on mobile. Read the full article about the VR website experiment.

Bookmarks in VR

The second prototype we did focused on bookmarks in VR. At the moment, using controllers instead of your fingers to type in text in VR is quite challenging. Thus, we assume that until there is an alternative solution, users will avoid typing in VR by bookmarking a large number of websites. This hypothesis makes VR bookmarks a major part of the VR browsing experience.

Users bookmark websites for two reasons – either to create shortcuts to the most often visited websites or to make web content easily discoverable later on. To allow for quick access to the bookmarks shortcuts in websites that are 360 degrees we attached the bookmarks bar to the virtual hand of the user. The concept turned out to be successful but also revealed that nothing feels intuitive in VR. A key finding was that even the most experienced VR users need a getting started tutorial to learn how to interact with an unfamiliar VR experience.

Bookmarks bar in VR

In addition, during the user testing, two types of users stood out – those who enjoy diegetic interactions and those who prefer using standard 2D interactions (as they are more efficient). Based on the discovery we made, we decided to work on two prototypes for the second use case of bookmarks – saving and organizing web content. Find out more about how the two prototypes our UX team is working on look like.

Share our experience

Our core belief is that we should be open about what we do and what we discover in order to help the WebXR ecosystem grow and flourish. Recently, we started an initiative to excite more UX design for VR UX by sharing our experience and useful UX resources. I launched a series of blog posts reviewing VR game UX & UI, and also actively engage with the VRUI Reddit community, and the Designer Hangout Forum. Additional to that, we are discussing how to create a VR UI & UX wiki similar to the UX of VR website but with more concise structure and practical tips. Stay tuned for more information on our progress. In the meantime, if you want to contribute or share ideas, get in touch with us here or on twitter.

Author: Billy Vacheva

Did you like the post? Share with your friends:

Leave a Reply

Your email address will not be published. Required fields are marked *