Backwards Tabs

From a company often praised for it’s intuitive graphical user interfaces (or “guituitivity“) comes a good example of a bad user interface. The iTunes “Clean” and “Explicit” tabs are backwards and inconsistent with the rest of the GUI (and the metaphor of Tabbed documents).

To me, the tabs above show that we are currently on the Explicit version, not the Clean. Why would the darker inset “Clean” image apply to the light colored pane we are currently viewing? I have been tripped up by this several times.

From Apple’s Human Interface Guidelines:

Take advantage of people’s knowledge of the world by using metaphors to convey concepts and features of your application. Metaphors are the building blocks in the user’s mental model of a task. Use metaphors that represent concrete, familiar ideas, and make the metaphors obvious, so that users can apply a set of expectations to the computer environment.

Tabs, in the real world, are visually linked to the document you are viewing.

Although, The iTunes design team seemed to get it right on the front page:

Here the lighter tab is connected to the lighter pane below, as it should be. The darker tabs, when clicked, pull other pane’s to the front.