Design

4 things I learned designing user interfaces for VR at Disney

4 min read
James Hsu
  •  Sep 26, 2016
Link copied to clipboard

The VR space is heating up real quick. Recently, I was fortunate enough to work at Walt Disney Studios as the Lead UI Designer on the Disney Movies VR product team.

It was my first-ever VR project, and I’d like to share a few grab-and-go lessons I learned that are applicable to both the mobile device VR environment as well as higher-end headsets.

1. Print design is relevant to VR design

VR is an interesting space to design for because it’s this overlap of technology, visual design, and interface design. Where it differs is the approach.

Having experience both in graphic design and UI design, I can tell you VR is a strange mix of the 2—and it’s more relevant to print design than anything else. Yes, you’re designing for a “screen,” but things designed in space are 100% relevant to your spatial relationship to it. Screens, and specifically typography, lend themselves very much to the same relationships you’d find and leverage in the real world.

“Don’t ignore print design when you’re designing for VR.”

Twitter Logo

I found myself asking questions like, “How big should this type be to be readable?” only to realize later that these precedents existed in billboards, posters, and even books. When it comes to design, you can never get away from typography. And when it comes to typography in space, virtual or real—it’s all about the readability and communication.

tl;dr—Print has solved the issue of readability for the real world. No need to reinvent the wheel for the virtual world.

A billboard for a Coca-Cola ad. Easily readable from a distance.

The Oculus UI.

2. Be strategic with your targets

The tricky thing about VR is the method of input. During my time at Disney, we optimized for gaze-based navigation, assuming that our users would have limited or no input capability at all. This means that the crosshair/reticle/cursor was also your button click if you hovered over an interactive object long enough.

The challenge this presents is making sure your users don’t fall into a black hole of button clicks as they’re browsing through your information architecture. We intentionally designed our UI to be out the cone of focus after users invoke a specific action. This encouraged even more intentional actions for invoking and accessing VR content.

tl;dr—Users might gaze naturally in the center after invoking a thumbnail. Putting your targets out of the natural gaze position will prevent accidental clicks.

Example:

We had 2 paths for invoking our VR content.

3. It’s important to create mockups in VR

Mockups and comps are great for soliciting team and stakeholder buy-in, but the only way to truly dog food what you’ve designed is to throw your design into VR space. You give yourself permission to see it in the world it’s designed to be in. Size, space, colors are suddenly being consumed spatially and really give you an opportunity to be critical with the work you’ve done.

“VR environments are distracting. The more feedback, the better.”

Twitter Logo

While stumbling through this process, I cobbled together a workflow that let me crudely view flat mocks as a spherical skin in my Google Cardboard viewer. There’s still a huge opportunity for prototyping in this space, as there currently exists a large void. At Disney, we were lucky enough have our engineering partners facilitate this by providing prototyping software for us to view our flat UI designs.

tl;dr—Design comps are great, but you really need to view them in a headset to get an idea of what you’re designing.

Some random scale testing I was working on at the time.

4. Feedback is everything

Visual, auditory, haptic—I’d argue that feedback becomes even more critical in VR because of the low barrier to distract a user. Where UI design’s limitations were previously viewport, VR opens up an entire world to interact with. Buttons and links can now look like portals, objects, and regular old desktop items.

“Give users feedback when they hover over something interactive.”

Twitter Logo

This is where I think game design becomes largely relevant. Surface feedback in some form and to do so consistently so users understand what “rules” they have for invoking objects and actions. Also important after establishing your visual language and rulebook is to remain consistent with it. No one wants to figure out why your buttons are 2 different colors.Twitter Logo

tl;dr: Give users feedback when they hover over something interactive. The more feedback the better, because a VR environment can be pretty distracting.

Check out some unused design directions below. We opted for scale, color, and animation.




Wrapping it up

If you’re a designer in the VR space, there’s still a lot of great design thinking to be had—these are just some I stumbled upon. For the most part the principles of design still apply and are probably more relevant than ever. Have any other awesome thoughts or insights? I’d love to hear them (seriously).

This was originally published on Medium.

Collaborate in real time on a digital whiteboard