How to make interactive menus easier to use

Targeting is a core usability metric that measures how easily users can acquire on-screen targets like buttons and menu items. Errors in targeting can cause frustration and lost time. Designers should therefore minimize targeting errors by providing targets of sufficient size and stability. An interface element is considered stable if its targeting surface neither moves nor changes shape during interaction.

Lists that expand or auto-scroll in the direction of list traversal are unstable. Instability makes targeting harder, since acquiring dynamic targets is harder than acquiring static ones. It’s the difference between hitting a moving baseball and a resting t-ball. Unstable navigation forces users to course-correct mid-flight. The result is greater effort in the form of micro-movements and hand-eye coordination.

Examples of instability

Magnification in OS X’s dock

Ever notice how much longer it takes to target an icon in the OS X Dock when magnification is high? Perhaps this is why Apple now ships OS X with magnification off.

Playlists in Flash

Ouch. Just because you can make things fluid and dynamic doesn’t mean that you should. Try navigating the listbox on the right of this Childrens Hospital page. In addition to fostering error, this list makes me motion sick! The problem? The list auto-scrolls in the direction of traversal, forcing the user to acquire moving targets.

Got more examples?

Feel free to post your favorite examples in the comments. I conjecture that there are many examples in the wild.

Orthogonality to the rescue

The more usable alternative to unstable lists are stable ones, wherein list items expand orthogonal to the direction of list traversal (or do not expand at all). For example, if you want to create a horizontal list or navigational element, it will be easiest to use if the list items expand vertically, without affecting the horizontal width of the list.

Try it for yourself (Silverlight demo)

Try navigating these lists. Notice how the stable list, left, is easier to use?

How the Silverlight demo was built

It’s easy to create the menu systems shown above using VisualStates, ActivateState behaviors, and the Blur effect. Here’s a screenshot of my Blend environment.

Observations

• Instability is most problematic for mouse and finger navigation. Instability is less problematic for keyboard navigation, which does not require mouse targeting.
• The further the jump, the greater the error. Notice how attempting to jump from Planes to Autos in the vertical navigation may not even get you to Autos, whereas moving from Planes to Trains usually gets you to Trains (albeit in the middle of the navigation).

Conclusion

[note_box]

• List items should expand orthogonally to the direction of list traversal
• Alternatively, if list items expand parallel to the direction of traversal, expansion should require explicit user action beyond hover or enter, such as a mouse click

[/note_box]