Creating the perfect user interface for VR

Creating great user interfaces in VR is not easy. If you assume it’ll be straight-forward, there is a real chance of it going horribly wrong.

It turns out that comfortable UIs require very different design to traditional games, and are equally different to the science fiction ideas that we’ve been brought up on in films like Johnny Mnemonic and Minority Report.

Traditionally, game UI is drawn in 2D in front of everything else. We tend to stick important elements – such as scores, health, ammo and other items of interest – in the corner of the screen, where they’re always visible without interfering with gameplay.

VR, however, has no ‘front’ and no ‘corners’. You can’t simply draw in front of everything else as your entire view is in 3D – just like in real life. Sure, you could position a 2D graphic 1mm from your eyeball, but this would be horribly uncomfortable to focus on – just try doing in the real world to see what I mean. So, everything you draw has to be set some distance from your viewpoint.

There are also no corners in which to hide your UI elements and buttons. If your UI is locked to your head, then the corners always move as you do – you can’t turn your head to see the corner. And if the UI isn’t locked, what was originally in the corner might end up in the middle of your view as soon as you turn your head, blocking the world from sight.

So, building effective UIs in VR is no easy task, especially with so few tried-and-tested examples out there.

To make it even harder, add in the fact that you focus in virtual reality. Having a text box pop up a metre or two from you when you’re looking into the far distance is horrible: it’s out of focus, and you need to rapidly refocus your eyes. Hardly an ideal user experience.

Plus, don’t forget that VR is all about immersion and presence. Floating text or health bars tend to make environments feel rather artificial, and that can break people out of the world you’ve created.

Obvious do’s and don’ts

There are many fairly obvious techniques that you ought to bear in mind.

Firstly, try to avoid UI completely. You can give players the information in a different way. Maybe that’s a physical ammo counter on a gun model, or a map that appears on a piece of paper in your hands in 3D.

Next, try hard to avoid artificial 2D UI altogether. If you need UI elements, then make them 3D – attach them to models in the game, such as health bars that are attached to enemy models, each with their own lighting and shadows.

Additionally, rather than have a pause menu that appears on top of your game – with the risk it would cut through geometry depending on which way you are looking – simply fade to black and have a separate 3D pause menu scene. This has the added advantage of giving the player a natural place of respite away from the intensity of your VR game.

VR, however, has no ‘front’ and no ‘corners’. You can’t simply draw in front of everything else as your entire view is in 3D – just like in real life. 

A couple of less obvious tips and tricks

There are many more less obvious things to consider.

Be careful not to be too subtle. The danger of losing big UI elements is that players don’t notice them anymore. You need to user test your UI carefully to make sure it isn’t too inconspicuous.

Use audio as your UI. Instead of a score, you could have a radio message or announcer telling you your score at key milestones (“1000!”, “2000!”). If your character is injured, for example, you could have the player grunt and change the footstep sounds to illustrate it. Generally, it’s a good idea to think about how you can use sounds effects and music to convey this information instead.

But wait, there’s more

I’ll be going into a lot more detail about VR UI in my session at Develop:Brighton this July. I’ll be aiming to share as many tips and tricks as I can, and will also be talking about subtitles in VR and showing off some of our UI examples on live projects.

I’m looking forward to seeing you there and if you have any questions you’d like to ask me in advance, then feel free to reach me on Twitter via @patrickol.