Virtual Reality Menu Design - Part 2

Welcome back to the second part of this blog post about VR menu design. In the first part we talked about general directions for designing VR menus (skeumorphic, 2D mapped on geometry and 3D interfaces). This time we’ll leave the more theoretical grounds and look at some of the menu designs that are currently out there.
I extracted some basic designs and made up some ingenious names for them. We’ll go through them one by one. For each one, I’ll show an example app using this design, talk about the strengths and weaknesses and will reason a bit about what could have been the rational behind using this design for that particular purpose. The idea isn’t to give an in depth review of the designs of a few apps but rather to build a nice little toolbox of design patterns and to see when which one could come in handy.

No Virtual Reality Menu

Let’s start with the easiest way to deal with menus in VR is: not having one at all. This is the route Google Cardboard apps like Discovery VR or ARTE 360 go down. You select the video you want to watch by swiping through the available content on your smartphone. And only insert the phone into your Google Cardboard after starting the video.

While this might seem like a cheap trick I think it actually is absolutely valid and definitely better than having a badly designed VR interface. You can draw from established 2D interface pattern and people will know how to use it. Plus, waiting for a video to buffer or watching in a download bar in VR is not in particular thrilling, so why not wait until you are ready to show users what they came to see before entering VR. This is particular true for the short session times users normally have with the Google Cardboard.

Flat menu

Okay, let’s go one step further, what is the simplest type of menu we can have in VR? I’d say it is what we called 'Flat menus mapped on a simple geometry' in part 1 of the blog post. This is something we see in quite a few apps that are available on the GearVR. Next VR offers you a few tiles on a flat screen floating in front of you, VRSE and Condition1 arrange those tiles in a horizontal circle around you and IM360 asks a bit more of your neck muscles and uses the good part of the inside of a sphere around you. What they all have in common: placement of the tiles is fixed, no scrolling, no hierarchy – what you see is all there is.

PRO: easy to explore, you immediately get an impression of how much content is available just by looking around you (something you will do anyway in VR).

CON: this type of menu is not really scalable – even with small tiles and using the entire inner surface of a sphere you will fill up all available space at some point

If you look at the apps that use this type of menu at the moment this makes sense: it’s mostly content creators showcasing some of their content. They simply don’t have to scale to hundreds of videos over night and the interface is good at explorability and ease of use.

At RE'FLEKT we used this type of menu for 7Virtual's demo app that was shown at the DMEXCO trade fair. Users could select from three videos placed in front of them. While many menus of that type use simple flat skyboxes we wanted to create a more open, interesting place and thus located the menu in a simple, abstract 3D scene playing with scale and depth.

Flat menu and scrolling

All right, let’s slowly approach the ‘scalable’ zone! First stop: “Flat menus mapped on a simple geometry” but this time with added scrolling! Kind of kicks out the sphere as a geometry to map onto, but sacrifices must be made for progress!

An example of this kind of menu is the Oculus Home Library: plenty of small tiles on a curved screen that you can scroll through vertically.

PRO: quickly browse through a big, unspecified number of content

CON: loss of physicality & continuity – not all items are visible all the time. Instead of remembering where something is spatially you might have to scroll through a long menu to find it

Knowing this it makes sense that Oculus chose this type of menu for their app library: it scales nicely while still being simple & straightforward to operate. The con is not so bad since you have the splash screen for quick access to your favorite apps.

Another quite interesting take on this mechanic can be found in Littlestar, a 360 video app for GearVR. They place you in the middle of a barrel and project the tiles for single videos on the inner surface of the barrel. When scrolling up or down the entire barrel moves up or down, giving you the feeling of flying through a giant pillar of content. You can also rotate the barrel around you if you don’t want to rotate yourself to see what’s behind you. Only problem: large parts of your visual field will be moving around you and might introduce vection and thus sim sickness in some more sensitive users.

Flipping Cards

Next stop: card flipping! Card flipping interfaces are quite en vogue lately (did somebody say Tinder?), so no surprise to find a VR version of it. Again it is Oculus that I will use as reference, this time the Store section of Oculus Home. There you are presented with single flat cards featuring one big tile and five small ones. On the left side behind the current card you see the previous card, on the right side the upcoming one. Little dots below the card give an idea where in this seemingly endless stack of cards you currently are

PRO: Card stacks scale nicely while breaking a big amount of items down into a digestible amount at a time to not overwhelm the user with too many choices

CON: for a lot of content you might be swiping quite a while

Again, looking at the pros and cons it becomes obvious why Oculus selected this type of menu for its store: you present a bit size chunk of possible purchases and the user can look through all of them without feeling overwhelmed or being distracted. Their grid layout on each card allows them to feature one item in particular (you might have guessed it, it’s the big one), also quite useful for a store.

The Rolodex

There is another emerging design pattern that was first shown by Oculus and can now be found in other apps as well. In lack of a better word for it I’ll call it rolodex menu. Rolodex are those little barrels of business cards right next to the overflowing ash trays that all the 60s / 70s movie detectives flip through to find the number of that one old friend that helps them to solve the case.

PRO: nice interface for two hierarchical layers (folders and movies)

CON: not many individual icons visible at once, might result in a lot of scrolling for many items

You can find a rolodex menu in Oculus 360 movie app. For each folder you have a card on your (imaginary) vertical barrel. By swiping down the current card moves down and back while previewed card from above moves forward and to the middle. To make it more scalable, each card in that barrel has a horizontal slider that lets you slide through a large number of individual movie items. Another app that hopped on the rolodex train is ORBX, OTOY’s photo viewer.

As above, Oculus made a nice choice here (as did OTOY): they have several categories / folders with a few items each. Exploring them the rolodex way feels nice and reactive and let’s you quickly find what you are looking for since it is unlikely that you’ll end up with hundreds of items per category.

Conclusion - the VR Menu Toolbox

So, let’s wrap that up before closing, what did we fill our toolbox with:

no Virtual Reality menu at all

flat, static tiles mapped to a geometry

flat tiles on a geometry but with scrolling

card flipping

the rolodex aka vertical barrel with sliders menu

As always in life, there is no one fits all solution. Choosing the right menu mainly depends on two things. First, what structure of your content? Is it hierarchical? If yes, how many layers? How many items are you expecting? Does it have to scale? Second, what kind of user experience are you aiming for? Quickly finding certain single element in a large heap? Browse through a category? Are some elements more important then others?

Oculus has nice designs for pretty much all eventualities, so using those as an orientation surely is not a bad idea. But keep in mind that this is not the end of the line! Oculus will design their menus rather conservative; they will go with what sure works and try to not exclude anybody, that’s my guess why they mainly rely on mapping 2D interfaces to geometries for now.

I’m sure there is much more out there to explore in terms of VR design languages. For some content experimenting with the third dimensions is an obvious way to go. But also looking at adjacent fields like data visualization or even how workspaces or tools look like in the real world can be very insightful (there is a wonderful talk about the design process by the Makers of Oculus VR sculpting app Medium that explores that direction). But enough mumbo jumbo - I’ll close with the favorite sentence of seemingly everybody working in VR right now (which is true despite of its abundant use): this is just the beginning.