Buttons in virtual reality - a UI/UX design approach

Buttons are ubiquitous on websites and in different applications. Users don't have to think for a second if what they see is a button, or how it works, as UI and UX designers have already figured it out for them. In virtual reality, it's back to the starting point.

Using buttons in the virtual space is tricky, especially if the hardware has no hand tracking. If it does, it's a whole different story, and you can build a whole user interface on hands interacting with buttons, like Leap Motion did. In this article we focus entirely on non-hand tracking environments like the Cardboard or Gear VR.

Both Google and Samsung felt the need to add some sort of an input device to their headsets. On the Cardboard it's a dumb (and way too easy to lose) little magnet that emulates a screen touch, on the Gear VR it's a tiny touchpad. But not every device has it, especially not the cheap models coming out of China.

Good and bad VR UI

Let me show you two examples. The first one is the UI of Mobile VR Station, a fairly capable photo and video viewer app for the iPhone. It's probably not hard to tell it's bad user interface design, just by it aesthetics. The problems, of course, run much deeper as we will later see. The second one is the home screen of Google's Cardboard app. It's a pleasure to look at it, and it's an almost perfect UI. Almost - and I'll tell you why it's not.

Guidelines for buttons in VR

Google has a very clear, if a little short guidelines document for the design and interaction patterns of buttons in VR. 

It gives some general advice about button placement, recommending that they should be large enough to find, and you shouldn't place them too close to each other. This is not very different from a website.

The VR-specific part is built around the concept of the fuse button, something you can click on even if you don't have a touchpad or a magnet to use. All you have to do is focus your eye cursor (basically, look) on a fuse button, and this starts a timer. After you maintained focus for long enough, the button is triggered.

Needless to say, a fuse button should never move:

There are two problems to tackle here: the visual feedback (timer countdown), and the time to wait for the button to be activated. It can indeed become frustrating if the user does a lot of navigation, and has to wait 1-2 seconds for a button to be triggered each time. Google recommends that you give the user the chance to directly click on the target, making the wait unnecessary, and the interface snappier.

Hover state for VR buttons

If you place your mouse pointer over a button or a link on a website you often get a visual clue that you are going to interact with that particular element. This is called "hover state". This becomes super important in VR, as the users are often unfamiliar with the interface. There are multiple ways to do this.

Let me illustrate it with a Play button and the eye cursor:

We can change the cursor (make it more pronounced) to make the user aware of the interaction:

An even better idea is adding a caption to an otherwise ideographic element. This does not only help with focus, it also makes it clear what's going to happen next:

Adding colours to a monochrome UI element is another good practice:

Mobile VR Station is a bad example for hover state design. Take this screenshot:

The caption is displayed for an element that's not selected. The icons are very confusing and hard to understand (the button B brings you back to the home screen - who would have guessed). The cursor does not change when hovering over a button.

The Cardboard app is nicely designed. The cursor doubles in size, the caption is added in the right way, and the colours make the active element stand out:

virutal_reality_button_ui_design_hover_state_example_1.png

Visual countdown for fuse buttons

Maintaining focus for a second or two is confusing enough. You need to provide a visual clue that something is happening.

This can be a fill-to-top effect, or a fill-to-right effect, as demonstrated here:

For rounded UI elements you can fill the circumference:

Here's a full extra fuse button with amplified cursor, caption and fill. Adding extra colours is not needed in this case:

virutal_reality_button_ui_design_fuse_button_with_hover_state.png

Mobile VR Station is using a fill-to-top effect as visual feedback, finally a clear clue on an otherwise pretty bad interface:

The Cardboard app does not have a visual countdown effect:

virtual_reality_button_UI_design_example_2_cardboard.png

Neither has Vrse:

The reason they don't have this in place is that they don't utilise fuse buttons. You have to use the magnet or the touchpad to click in both apps, and this is not particularly user-friendly. Google is basically ignoring its own guidelines, something you don't see too often.

Getting the UI out of the way

The last thing I wanted to touch on is how you can make sure your UI gets out of the way if needed. Sure, you can simply add a virtual button to hide the interface, which is especially important in a video-heavy immersive experience. You can make it reappear on the click of the magnet, but it means you exclude headsets without an input tool.

The use of the menu button became relatively widespread recently. It's a tiny interactive element (fuse button) right at the bottom of the user's vision sphere, like this:

It's a clever idea, it doesn't block the view, and you don't force the user to reach for the button on the headset.

Did you like this post? You might be interested in our previous post about virtual reality UX and UI design.