Affordances for Quick User On-boarding

In William Lidwell, Kritina Holden, and Jill Butler’s book “Universal Principles of Design”, an “affordance” is defined as:

A property in which the physical characteristics of an object or environment influence its function

Since virtual reality builds on our notions of how objects function in the real world, breaking these conventions leads to confusion and difficulty.

Early on our controller models did not have any button animation to indicate how they worked, it was brought up but not seen as a high priority by the team.

After user testing we noted the difficulty users were having, and how disturbing it was that the buttons did not correspond with their actions, breaking immersion which is so important for a pleasant VR experience.

In VR the cardinal rule is that what our eyes see needs to correspond with what our body feels!

In this endeavor to make the controllers feel more “real” we added the following design affordances:

• button high lighting  and animation
• laser color states
• controller button tooltips

Button High Lighting and Animation

VR controller button high lighting of pressed states. Note the button colors are defined by the Autodesk HIG

Laser Color States

I had originally specified the laser color states as

• blue inactive or hover state
• orange for active pressed state
• green for navigation and teleportation

During the course of development, we discovered that we can convey even more information by changing the laser color contextually. For example in the video below the laser will change color depending on what transform handle is selected.

Controller Tool-tips

Tooltip are a common way to onboard new users in most computer applications. In my design, I allowed for the user to turn them on or off so as to not be intrusive.