“Innovation has nothing to do with how many R&D dollars you have. When Apple came up with the Mac, IBM was spending at least 100 times more on R&D. It's not about money. It's about the people you have, how you're led, and how much you get it.” - Steve Jobs

Contextual buttons

I hav noticed a trend in virtual interfaces that exploits their ephemeral nature, where a single button is used today where two buttons used to be used in the past. The button label is used to both clear a state of the system and the action the button can do. Who else finds they pause slightly in these contexts even after becoming “experts” in these systems?

Of course I’m going to use the covetted champ of design, the iPod, and critique it. I mean it is so easy to nitpick “perfection” b/c it gives us clear lines, with the distractions of too many interrelated mistakes.

So here is the mini view of iTunes while playing a song:

iTunes Playing

What I’d like to highlight is the pause label that is displayed on the middle round button. It says “pause” because if I click it it will stop playing the music. (There is no such thing as stop in digital music for good reasons.)

Now if there is no music playing it looks like this:

iTunes Pause

When the music is paused, it now has the common icon for “play”.

In general I undrestand the approach. Limit the number of buttons and symbols on the screen at any one time to reduce complexity. I also understand a possible reason why they think in this case it might work. I know the inherent state of the system by putting my headphones on (or my speakers are available).

But what happens if you take your headphones off and then take a look at these screens. Do the icons tell me the state, or do they tell me what I can do?

This is where I find it confusing. It does one in “positive” and the other in “negative”. (if you think of pause and play as opposites of each other.) By having a indicator of a state and that states description is opposite to the label one would use to counter that state, you are creating an air of confusion.

Now the iPod also shares a single button for both these actions–pause & play:

iPod ClickWheel

The difference here is that the clickwheel has support for its state in another location the screen. In this way I don’t have to rely on my ears, but rather can use the screen to tell me a clear state that is separate from that single button, which always is labeled the same with both action labels.

I am in the midst of designing a redesign of an application. I am considering have state-driven dynamic interfaces. This seems to be a trend. I know that MS is deeply invested in this with Vista and Office 12. But their work on “the Ribbon,” for example, is doesn’t exactly face this same challenge, but it is close enough to may question whether or not all thir data collection and testing is worth falling back on just tad.

I can honestly say that I have never heard anyone actually complain about iTunes (I guess except for me), but I do know there are enough circumstances where I get confused (ok, maybe *I’m* the idiot) that give me pause and make me want to re-evaluate the whole solution.

I do want to re-iterate that I appreciate apples drive towards GUI reduction, but can it be to a fault?

Be Sociable, Share!
  • Michael Zuschlag

    I think this is a valid concern. An even more serious example (I think it was for a HCI in the ISS!) was a command button whose caption toggled between the text On and Off. Huh? If they used verbs (e.g., Start and Stop, Play and Pause) rather than adjectives or graphics, that would help a lot.
    Another alternative relies on one state being unambiguously inferred from another: if not On, you must be Off; if not Playing, you must be Stopped/ Paused. In such a case, you can label the button with just the positive state (On or Play) and indicate in the button the current state with a graphic such as a checkmark. Seems to work in menus –why not buttons?
    Expanding on that technique, Id be interested in whether a metaphor of physical buttons would work best, where the button graphically locks down in a depressed state when playing, and pops back up when clicked off. In addition to fitting a physical metaphor, the button is labeled with the action/state achieved when it is depressed, consistent with ordinary command buttons. You could also have the Play graphic have a dark and low saturation color when Paused, but lights up to light and high saturation when playing. A case can be made to have a text label beside the button to further reduce ambiguity.

  • http://danielbaird.com Daniel Baird

    Your example doesn’t convey the full force of the problem because of the strong user familiarity with play and pause buttons.

    I’d like to see a button that showed (say) play and pause icons like the iPod click wheel, and used highlighting or outlining or greying or something to indicate the current state. That way it’s still one button, and therefore easy to click, but it shows both the current state and the alternate state.

    Wotcha reckon?


The archives run deep. Feel free to search older content using topic keywords.