How do you design scalable Virtual Reality menus? How do you browse through the increasing number of 360 videos and photos or all those new VR apps you just downloaded with your headset on? While more and more content is pouring into VR, the question 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 research journey through various VR applications to see what is out there in terms of menu design.
I like big picture overviews, so let’s start with one. As I see it, there are three major design directions when designing menus for VR:
- Skeumorphic menus
- Flat menus mapped on (simple) geometry
- Real 3D interfaces
Skeumorphic design is the idea of designing virtual things mimicking their real world counterparts. For example the note app on iOS looked like a real notebook 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 flipping pages. There is no need for a VR photo app to look like that since we do not have the same constraints 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 skeumoprhisms: you enable the user to leverage the experiences with the real world to operate the new menu.
An example of a skeumorphic VR menu is what Stress Level Zero is designing for their game Hover Junkers. Check out their devBlog to learn about how they designed it.
Flat Menus Mapped on Geometry
Flat menus are building upon interfaces we know from computers and especially tablets & phones. They rely on basic building blocks like cards & tiles and hierarchical folder structures. The apps on your smartphone for example are arranged in little tiles and you can group them together into a folder to create a hierarchy. Simple interfaces like that became very popular with the advent of the smartphone and one could argue that bringing them into VR already represents a skeumorphism of its own kind – but let’s drift of into the philosophical here.
In VR those flat, 2D interfaces can be mapped onto simple geometric shapes like a curved screen or the inside of a sphere around the user, something we see in many of the currently available apps including 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 infamous Minority Report display! Real 3D interfaces so far are quite rare, although they seem like the most natural fit for VR. The problem: we have many years of experiences and a developed design language for flat interfaces, but not so much for 3D ones – especially when it comes to menus.
So why bother to dive into this when flat interfaces seem to work fine? Well first, an additional dimension, by definition, enables you to present richer information. While this does not scale infinitely on the human side of things, we are creatures that grew up in a three-dimensional world and thus well equipped to deal with three dimensions and using an environment that is more natural to us enables us make use of a lot of those very nifty subconscious co-routines we are equipped with.
We see a glimmer of what is possible with thoughtfully designed 3D interfaces in VR drawing apps like Tilt Brush. They put the menu around the controllers, making a large number of functions immediately accessible while requiring little space. Having all items present all the time in 3D space (continuity & physicality) keeps the interface very explorable and easy to learn – you will never search through a number of sub menus for that one particular item. Hierarchy is solved by proximity and location.
At RE’FLEKT we explored 3D Interfaces with our Product Explorer demo.
Another intriguing outlook on 3D interfaces is the Leap Motion 3D Jam entry Lyra. WIth Lyra you create music using a 3D interface in VR, summoning different virtual elements and connecting them to sequences and loops with your hands. The result is an interactive 3D structure that represents the song playing.
Input & Interface Dimensionality
We can already see a pattern here: GearVR applications mostly use flat interfaces while we see 3D interfaces for the Vive or the Rift + Leap combination. The differentiating factor here is dimensionality of the input. While the Vive controllers or the Leap Motion give the user a 3D input device, the Gaze Cursor mechanics & touchpad of the GearVR are closer to 2D input. Skeumorphic designs by the way can be both, 2D (bookshelf) or 3D (many book stacks on a table), depending on what they are mimicking. So what’s behind that pattern?
Using a 3D interface with a 2D controllers can be quite challenging due to occlusion: if the object you want to gaze-select is behind another one you have a problem - especially if you don’t have positional tracking. There are more reasons, but you get the idea.
Time to conclude our first VR menu design heuristic:
Adapt the dimensionality of your interface to the dimensionality of the available input devices!
With this wonderful piece of wisdom I'll leave you for now. In part 2 we will use these directions in the next part of this blogpost when looking through some of apps out there and how they designed their menus. We’ll also check out some current trends, discuss which designs are a good fit for what purpose and extract the first emerging design patterns of VR menu design.