Hands on with designing a VR Bookmarks prototype

The first step in designing a UX experiment is to understand how the users currently use the functionality and why. In the case of browser bookmarks, we identified two ways in which users use bookmarks — to quick access often visited websites and to save links for later. In this blog post, I will share more about the prototypes we built to test how we could meet the need for quick accessing websites in a VR browser.

In VR be bold

Starting work on a new prototype is always an exciting moment. The VR environment allows for experimenting with unconventional ideas and designing diegetic UI. So, you can imagine what happened when we brainstormed the bookmarks prototype — we went wild.

We set three goals:

• Do not break the immersion;
• Make the interaction as fast as possible;
• Make the prototype fun;

VR websites are 360 experiences, so the challenge here was how to place the bookmarks bar so it does not interfere with the experience. Also, we wanted to give maximum freedom to the developers to use all hardware buttons instead of reserving one button for browser interactions. Last but not least, we wanted to empower the user to be able to choose bookmarks without leaving the 360 experience.

The approach we came up with was to make the browser shelf part of the Virtual identity of the user. Thus, allowing them to carry it through experiences and creating a truly personalized browsing experience.

The hand bookmark

We call the first prototype we did “the hand bookmarks”. In it, we attached a model of a 3D hand to the left Vive controller and put the bookmarks bar on top of it. The obvious limitation of this idea is that, for now, it would work only for Oculus Rift and HTC Vive as mobile VR headsets have only 3 degrees of freedom and a single controller. Still, it covered the three goals we set in the beginning of the design process — the menu did not break the immersion, the shortcuts were just a click away simulating how the bookmarks bar is used in 2D and it looked very cool. We translated the mechanic of adding a website to bookmarks into a huge empty star on top of the left controller. The hypothesis was that the star would be an intuitive association with the bookmarks star button in a 2D browser.

The next step was to test with users how usable and intuitive the prototype feels. The task each user had to complete was to go to the “ VR ESPN website” from the browser home page, to add it to shortcuts and show us where they thought the shortcuts were.

Could you guess what happened? All went bananas! No matter how much experience with VR the users had, they held the controllers close to their body and did not see the 3D model of the hand and bookmarks bar at all. They managed to get to the “VR ESPN website” but got lost on the task to bookmark the website. Also, 70% of the test group did not associate the star with a bookmarks button — they saw it but instead of clicking on it were looking for a bookmarks symbol somewhere on top of the website content. The conclusion was that no matter how experienced with VR the users are, there must be a tutorial and tooltips introducing them to the new metaphors and interaction patterns.

Key takeaway: Make a tutorial and tooltips for each VR experience

A second iteration

We stopped the experiment and added a tutorial, in the beginning, telling the users to look at their hands and tooltips on what each button does. Also, all tooltips were visible on hover during the experience. What we noticed here was that new to VR users took extra attention, saw the tutorial and tooltips. More experienced users started clicking right away skipping the tutorial and again getting lost. Thus, the second takeaway from the experiment was that a first-touch tutorial should be obligatory (the way it is in games for example).

Key takeaway: The first-touch tutorial for VR experiences must be made obligatory

Apart from the usability problems, all of the users were delighted by the form of the bookmarks and rated the experience as fun. The only concern raised by one of the users was that if one often holds their hand up to see the bookmarks better it would be exhausting. This was a valid point — most of the users held their hand up instead of just looking down at it. The mechanic could turn out inconvenient as the shortcuts are the most used bookmarks. We should test this hypothesis with a case where the users browse in between shortcut for a while.

Key takeaway: Measure the user comfort after some time spent in VR

Virtual Menu Prototype

When doing usability tests it is important to A/B test concepts and interfaces to evaluate which idea works better. In VR this is particularly true as most of the interactions and interfaces are completely different from what we know. It’s easy to say that an experience is great when there is nothing to compare it to. That is the reason why we made a slight variation of the prototype and measured the time to completion, successful completion rate, deviations from the perfect flow, etc. for both cases.

The goals for the second prototype was to resolve a potential problem caused by users holding their hand up for a long time while still making the interaction as non-intrusive as possible, quick and fun.

In the second prototype, we kept the concept of objects attached to the hand as most of the users evaluated the design as one of the most enjoyable parts of the experience. We moved the shortcuts inside a menu that could be called from the main menu button placed on the hand. The idea was to enable the user to browse the shortcuts without holding their hand up. Still, this affected another goal of ours — making the interaction as quickly as possible — as to access the bookmarks bar the users had to make an additional click.

One of the challenges we faced here was how to make the browser menu visible regardless of the scene in the 360 websites. Finally, we came up with the idea of placing the menu inside a grey sphere covering the website scene. The mechanic breaks the immersion. In its core, it is not much different from going back to the home space but the plain grey sphere creates an association with a system space implying that the user is using a fast menu instead of going back to home. (Oculus use a similar technique when calling the menu from inside a VR experience).

While working on this prototype, it became clear that this mechanic addresses a concern of ours about user safety. VR experiences are extremely immersive which makes the users highly vulnerable. Browser vendors should come up with new mechanics to make the user safe and in control while browsing. The grey sphere is a safe space that a user can enter if feeling overwhelmed.

Conclusions from the user testing

The results of the user testing were not conclusive enough to identify which prototype is more intuitive and comfortable. Still, we came up with several key findings: a first-touch tutorial is essential for users to learn how to interact with the experience; users love diegetic UI; currently, VR users value fun more than efficiency. The last observation is quite essential as it shows that users recognize VR as entertainment but not a work tool. This most likely will change over time pushing UX design to evolve from fun towards efficiency. Also, it is likely that in VR we will see distinctive user groups who will be willing to compromise efficiency for fun interactions (diegetic UI) and such that would prefer efficiency (standard UI). Thus it would be better to provide several predefined browser modes allowing users to personalize the experience further.

View all posts by billyvacheva

Published January 24, 2018January 24, 2018

Originally published at productmanageronthego.wordpress.com on January 24, 2018.