virtual reality menu design

Virtual Reality Menu Design – Part 1

How do you design scalable Virtual Reality menus? How do you browse through the increa­sing number of 360 videos and photos or all those new VR apps you just down­loaded with your headset on? While more and more content is pouring into VR, the ques­tion of how to explore it the best way in VR is far from solved. To get a feeling for the state of the art I embarked on a little design rese­arch journey through various VR appli­ca­tions to see what is out there in terms of menu design.

I like big picture over­views, so let’s start with one. As I see it, there are three major design direc­tions when desi­gning menus for VR:

  • Skeu­mor­phic menus
  • Flat menus mapped on (simple) geometry
  • Real 3D inter­faces

Skeumorphic Menus

Skeu­mor­phic design is the idea of desi­gning virtual things mimi­cking their real world coun­ter­parts. For example the note app on iOS looked like a real note­book with yellow pages and lines for writing.

In VR this could mean that a menu for a photo app looks actually like a shelf with plenty of photo albums. You can select an album, open it and start flip­ping pages. There is no need for a VR photo app to look like that since we do not have the same cons­traints as in the real world. No need to store things in shelves, we can just let them appear out of thin air. The big plus of skeu­mo­prhisms: you enable the user to leverage the expe­ri­ences with the real world to operate the new menu.

An example of a skeu­mor­phic VR menu is what Stress Level Zero is desi­gning for their game Hover Junkers. Check out their devBlog to learn about how they desi­gned it.

Flat Menus Mapped on Geometry

Flat menus are buil­ding upon inter­faces we know from compu­ters and espe­ci­ally tablets & phones. They rely on basic buil­ding blocks like cards & tiles and hier­archical folder struc­tures. The apps on your smart­phone for example are arranged in little tiles and you can group them toge­ther into a folder to create a hier­archy. Simple inter­faces like that became very popular with the advent of the smart­phone and one could argue that brin­ging them into VR already repres­ents a skeu­mor­phism of its own kind – but let’s drift of into the philo­so­phical here.

In VR those flat, 2D inter­faces can be mapped onto simple geome­tric shapes like a curved screen or the inside of a sphere around the user, some­thing we see in many of the curr­ently avail­able apps inclu­ding Oculus Home on GearVR.

Real 3D interfaces

Before I summon the wrong pictures in your head: I’m not talking about crazy hand gestures and I’m most certainly not talking about the infa­mous Mino­rity Report display! Real 3D inter­faces so far are quite rare, although they seem like the most natural fit for VR. The problem: we have many years of expe­ri­ences and a deve­loped design language for flat inter­faces, but not so much for 3D ones – espe­ci­ally when it comes to menus.

So why bother to dive into this when flat inter­faces seem to work fine? Well first, an addi­tional dimen­sion, by defi­ni­tion, enables you to present richer infor­ma­tion. While this does not scale infi­ni­tely on the human side of things, we are crea­tures that grew up in a three-dimensional world and thus well equipped to deal with three dimen­sions and using an envi­ron­ment that is more natural to us enables us make use of a lot of those very nifty subcon­scious co-routines we are equipped with.

We see a glimmer of what is possible with thought­fully desi­gned 3D inter­faces in VR drawing apps like Tilt Brush. They put the menu around the control­lers, making a large number of func­tions imme­dia­tely acces­sible while requi­ring little space. Having all items present all the time in 3D space (conti­nuity & physi­ca­lity) keeps the inter­face very explor­able and easy to learn – you will never search through a number of sub menus for that one parti­cular item. Hier­archy is solved by proxi­mity and loca­tion.

At RE’FLEKT we explored 3D Inter­faces with our Product Explorer demo.

Another intri­guing outlook on 3D inter­faces is the Leap Motion 3D Jam entry Lyra. WIth Lyra you create music using a 3D inter­face in VR, summo­ning diffe­rent virtual elements and connec­ting them to sequences and loops with your hands. The result is an inter­ac­tive 3D struc­ture that repres­ents the song playing.

Input & Interface Dimensionality

We can already see a pattern here: GearVR appli­ca­tions mostly use flat inter­faces while we see 3D inter­faces for the Vive or the Rift + Leap combi­na­tion. The diffe­ren­tia­ting factor here is dimen­sio­na­lity of the input. While the Vive control­lers or the Leap Motion give the user a 3D input device, the Gaze Cursor mecha­nics & touchpad of the GearVR are closer to 2D input. Skeu­mor­phic designs by the way can be both, 2D (books­helf) or 3D (many book stacks on a table), depen­ding on what they are mimi­cking. So what’s behind that pattern?

Using a 3D inter­face with a 2D control­lers  can be quite chal­len­ging due to occlu­sion: if the object you want to gaze-select is behind another one you have a problem – espe­ci­ally if you don’t have posi­tional tracking. There are more reasons, but you get the idea.

Time to conclude our first VR menu design heuristic:

Adapt the dimen­sio­na­lity of your inter­face to the dimen­sio­na­lity of the avail­able input devices!

With this wonderful piece of wisdom I’ll leave you for now. In part 2 we will use these direc­tions in the next part of this blog­post when looking through some of apps out there and how they desi­gned their menus. We’ll also check out some current trends, discuss which designs are a good fit for what purpose and extract the first emer­ging design patterns of VR menu design.


Share on: