Twenty Milliseconds Logo

This is Twenty Milliseconds, a site documenting what works and what doesn't in virtual reality design.

UI Ideas For Choosing One From Many Items

How do you choose one option out of hundreds, with a screen strapped to your face? In some ways the problem is simpler than real life - you can design any interface you feel like. In others, it’s more difficult. Any input device you have is not going to be as nimble as your hands.

Two applications recently have presented solutions to this challenge.

Oculix

A couple of developers at Netflix recently built a UI for Netflix that you can use inside the Oculus Rift.

The main challenge in the UI is to convince the user to watch a movie, and the main vehicle for doing so (as in the Netflix desktop/TV UI) is to show as many movie posters as possible on the screen. There seem to be two competing UI ideas here. The first is to show movie posters as rectangles, at varying depths from your face.

Oculix Choosing Movies UI

There’s a lot of empty space in the UI, though it is interesting as a way to prioritize content - if you know enough about the user’s preferences, you can put the things you think they’d like on bigger posters.

The second idea was to put all of the movies on a hemisphere, so that about sixteen movies are visible at any time:

Oculix Second Movies UI

In the video, a user hovers their hand over a Leap Motion device to scroll the list of movies. But you can also see there’s a mouse, which you can use to hover over a movie and get more information about it.

I think it’s certainly usable, though I wonder if more data could be displayed on the screen at once.

Janus

The second is the Janus web browser, which attempts to turn any website into a room browsable with the Oculus headset. Janus also wants to define a specification for transforming web content into a format viewable in the Rift.

HTML Specification Example

The output is a view like this:

Janus View

You are positioned in a large room, where each link is a floor-to-ceiling door leading out of the room, with a foot or so in between each door. You can walk around the room to browse, and click on any door to “browse” into that room.

This is an interesting approach for transforming a webpage into a browsable area. While Firefox has offered API’s for interacting with VR devices from Javascript, they haven’t offered any opinions on how to transform a traditional webpage into a browsable area.

I don’t have any great ideas in this area, and I haven’t tested Janus VR on users, but I imagine there are better metaphors for presenting a series of links. In the design presented, the physical distance and orientation of the windows means that you have to move across the room to read what’s on the content (or “visit” a link). A [widely proven analog][analog] from the desktop world implies you should make the physical distance to items you care about as short as possible.

Still, it’s a hard problem and the author deserves credits for taking it on. I’m sure that the interface will improve over time.

Some Design Inspiration

It’s interesting to see how people have solved this problem in other domains. In general, the inputs are more fine grained, but let’s take a look.

Cockpit

Cockpit Photo credit: Dave Wilson

This is the familiar cockpit that we’ve seen in many VR games so far. The pilots must be familiar with every one of the knobs and dials in the shuttle.

Pilots are selecting each switch with their hand, or turning the dial with their hand, which allows for finer control than, say, a mouse. Toggles can be differentiated by their placement, and by “are you sure you want to change this” plastic coverings above the toggle.

Makeup

Makeup Photo credit: Steven Depolo

In this example people are choosing from the same items every day, so it’s not as important for them to be separated visually (the big brush is always on the left, etc). Hands also allow for finer control than you are probably going to get in VR.

Menu

Menu Photo credit: Leslie

You flip between pages of a menu to decide what you want. If the menu items are on different pages there’s not an easy way to compare them. Also, a menu has to be carried by the server, a limitation that doesn’t exist in VR.

You select your item from the menu by telling it to the server. You don’t need to do this in VR which is probably an advantage, though of course you can use your voice as an input device easily.

Departure Board

Departure Board Photo credit: ken.h

This example indicates that you can pack a lot of visual density into a sign, though the resolution of the VR display may limit this slightly. Also, in a VR world you’re not limited by the constraints of producing a large electronic switching board, or the constraint of having people move around, so you can make the display much bigger, at eye level, or similar.