virtual reality menu design

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 direc­tions for desi­gning VR menus (skeu­mor­phic, 2D mapped on geometry and 3D inter­faces). This time we’ll leave the more theo­retical grounds and look at some of the menu designs that are curr­ently out there. I extracted some basic designs and made up some inge­nious 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 weak­nesses and will reason a bit about what could have been the rational behind using this design for that parti­cular 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 Card­board apps like Disco­very VR or ARTE 360 go down. You select the video you want to watch by swiping through the avail­able content on your smart­phone. And only insert the phone into your Google Card­board after star­ting the video.

While this might seem like a cheap trick I think it actually is abso­lutely valid and defi­ni­tely better than having a badly desi­gned VR inter­face. You can draw from esta­blished 2D inter­face pattern and people will know how to use it. Plus, waiting for a video to buffer or watching in a down­load bar in VR is not in parti­cular thril­ling, so why not wait until you are ready to show users what they came to see before ente­ring VR. This is parti­cular true for the short session times users normally have with the Google Cardboard.

arte360

Flat menu

Okay, let’s go one step further, what is the simp­lest 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 some­thing we see in quite a few apps that are avail­able on the GearVR. Next VR offers you a few tiles on a flat screen floa­ting in front of you, VRSE and Condition1 arrange those tiles in a hori­zontal 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: place­ment of the tiles is fixed, no scrol­ling, no hier­archy – what you see is all there is.

PRO: easy to explore, you imme­dia­tely get an impres­sion of how much content is avail­able just by looking around you (some­thing 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 avail­able 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 crea­tors show­ca­sing some of their content. They simply don’t have to scale to hund­reds of videos over night and the inter­face is good at explo­ra­bi­lity 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, inte­res­ting place and thus located the menu in a simple, abstract 3D scene playing with scale and depth.

7Virtual_menu

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 scrol­ling! Kind of kicks out the sphere as a geometry to map onto, but sacri­fices 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, unspe­ci­fied number of content

CON: loss of physi­ca­lity & conti­nuity – not all items are visible all the time. Instead of remem­be­ring where some­thing is spati­ally you might have to scroll through a long menu to find it

OculusLibrary

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

Another quite inte­res­ting take on this mechanic can be found in Litt­le­star, 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 scrol­ling 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 intro­duce vection and thus sim sick­ness in some more sensi­tive users.

Flipping Cards

Next stop: card flip­ping! Card flip­ping inter­faces are quite en vogue lately (did some­body say Tinder?), so no surprise to find a VR version of it. Again it is Oculus that I will use as refe­rence, 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 upco­ming one. Little dots below the card give an idea where in this seemingly endless stack of cards you curr­ently are

PRO: Card stacks scale nicely while brea­king a big amount of items down into a diges­tible amount at a time to not over­whelm the user with too many choices

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

OculusStore

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 over­whelmed or being distracted. Their grid layout on each card allows them to feature one item in parti­cular (you might have guessed it, it’s the big one), also quite useful for a store.

The Rolodex

There is another emer­ging 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 busi­ness cards right next to the over­flo­wing ash trays that all the 60s / 70s movie detec­tives flip through to find the number of that one old friend that helps them to solve the case.

PRO: nice inter­face for two hier­archical layers (folders and movies)

CON: not many indi­vi­dual icons visible at once, might result in a lot of scrol­ling for many items

RolodexMenu

You can find a rolodex menu in Oculus 360 movie app. For each folder you have a card on your (imagi­nary) 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 hori­zontal slider that lets you slide through a large number of indi­vi­dual 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 cate­go­ries / folders with a few items each. Explo­ring them the rolodex way feels nice and reac­tive and let’s you quickly find what you are looking for since it is unli­kely that you’ll end up with hund­reds 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 flip­ping
  • the rolodex aka vertical barrel with sliders menu

As always in life, there is no one fits all solu­tion. Choo­sing the right menu mainly depends on two things. First, what struc­ture of your content? Is it hier­archical? If yes, how many layers? How many items are you expec­ting? Does it have to scale? Second, what kind of user expe­ri­ence are you aiming for? Quickly finding certain single element in a large heap? Browse through a cate­gory? Are some elements more important then others?

Oculus has nice designs for pretty much all even­tua­li­ties, so using those as an orien­ta­tion 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 conser­va­tive; they will go with what sure works and try to not exclude anybody, that’s my guess why they mainly rely on mapping 2D inter­faces to geome­tries for now.

I’m sure there is much more out there to explore in terms of VR design languages. For some content expe­ri­men­ting with the third dimen­sions is an obvious way to go. But also looking at adja­cent fields like data visua­li­za­tion 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 direc­tion). But enough mumbo jumbo – I’ll close with the favo­rite sentence of seemingly ever­y­body working in VR right now (which is true despite of its abundant use): this is just the beginning.

Share on: