The Fundamental Importance of Visual Cues

As much as I like the instant gratification of purchasing music online, I still prefer the experience of handling a physical CD and its — hopefully extensive — printed booklet. Consequently, I often rip CDs to add the tracks to my iTunes library.

The CD track list screen in the current version (12.4) of iTunes displays three useful buttons in the top right corner. Except for their labels — Options, CD Info, and Import CD — they look absolutely identical.

The three buttons, shown next to each other, look absolutely identical like, well, a simple, clickable button.

When a button is not really a button

When I last ripped a CD, I decided to double-check the import settings. Due to its proximity with the Import CD button, I assumed that Options would take me to those settings. Instead, a popup menu appeared:

The menu that appears when clicking the Options button contains the two items Get Track Names and Submit CD Track Names.

That behavior surprised me, because the UI widget is a simple button; it lacks the typical downward arrow that indicates a popup menu control. Additionally, the positioning of the menu looked a bit odd, as it is partially overlapping the button.

Here’s a standard popup menu for comparison:

An excerpt from a print dialog shows the menu attached to the popup menu control labeled PDF. The menu's top aligns exactly with the controls bottom. More importantly, a down-ward arrow in the menu control makes it very clear that this is, in fact, a popup menu, and not a simple button.

Clicking the center button summons the usual iTunes Info window for the currently displayed CD, which is exactly what I would expected.

As for the import settings dialog box? That actually appears when you click Import CD. Since there is no ellipsis in the button’s label, I had expected that clicking the button would immediately start the import process.

More interaction required. Or is it?

Quick refresher: An ellipsis in a UI control indicates that further user input (or, more generally, some kind of further user interaction) is required before the related action is triggered. E.g., the basic File > Save As… menu command features an ellipsis, because the user needs to enter a name for the file before it is actually saved.

One could argue that bringing up the Information window already completes the [Display] CD Info command, so that it is not strictly necessary to include an ellipsis in that label. For the Import CD button, however, an ellipsis is clearly required.

Just don’t mess with fundamental design principles

A fundamental goal of good design is, obviously, to make it easy for a user to reliably predict what will happen when they interact with a user interface control. In other words, an important aspect of design is to reduce surprises as well as alleviate users’ fear of trying out a feature.

Why, then, did the iTunes designers forgo fundamental visual cues that would make it so much easier to understand what’d happen with regards to these three controls?

Admittedly, displaying three identical-looking controls creates a very clean, low-clutter appearance. Then again, adding the cues for visualizing “this is a menu, not a button” and “more input required when you trigger this function” doesn’t really make the trio look that much worse:

A slightly edited version of the three iTunes buttons. The left-most control now shows the down-ward arrow indicating a popup menu, and the label on the right-most button includes an ellipsis character.

With regards to usability, however, these well-established cues make a huge difference. I find it worrying that Apple, of all companies, makes design decisions that so obviously violate fundamental principles of good user interface design.