Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I seem to remember reading somewhere that having the play pause actions triggered from a single button that toggles is a bad idea

It seems to me that this idiom works well (e.g. pressing space to play or pause a video on vlc)

What are the arguments (if any) against having both these operations in the same button?

share|improve this question

11 Answers 11

up vote 13 down vote accepted

The issue with toggle buttons like this comes down to conflating two functions:

  • An affordance to take an action.
  • Displaying current state.

Buttons' primary purpose is to take an action, so they should look press-able to lead the user to taking the action by pressing. By also using it to display state, it leads to potential confusion.

If the button shows pause, does it mean that its state is paused or its action is pause? In the play/pause case, it seems like convention is showing pause means it is playing (like iTunes). But Slacker.com does the opposite (and confuses me because I use iTunes more).

This confusion is worse in situations where the convention is not as strong.

I almost always recommend using two mutually exclusive buttons, highlighting the one that is current (on/off toggle, rather than function 1/function 2 toggle), and visually relating the two buttons through proximity and style. I'll make exceptions if real estate is a driving factor, and a strong convention can be established.

(BTW, I recently read an article that traced the origins of having both a pause and a stop button to old reel-to-reel tapes, and that stop is totally unnecessary today. I can't find a reference right now though... anyone else have it?)

share|improve this answer
1  
Joel Spolsky talked about the reel-to-reel tapes in his Simplicy vs. Choice talk. –  Patrick McElhaney Sep 2 '10 at 13:29
    
Yes! That's it! Thanks! –  Jim Jarrett Sep 2 '10 at 17:10
1  
1+ Great answer –  Willbill Sep 3 '10 at 11:15
1  
So long as you highlight the other when one is pressed. Bearing in mind that many people will use the spacebar to press the currently selected button to pause and unpause/play the media. –  Bernhard Hofmann Sep 4 '10 at 7:05

The problem with toggle buttons has to do with modes.

In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived different results than it would in other settings. The best-known modal interface components are probably the Caps lock and Insert keys on the standard computer keyboard, both of which put the user's typing into a different mode after being pressed, then return it to the regular mode after being re-pressed.

That's from Wikipedia, and if you stop reading there, a combined play/pause button sounds like a bad idea. You've probably heard before that modes are considered harmful.

However, the article goes on to quote a precise definition of modes from Jef Raskin's The Humane Interface:

"An human-machine interface is modal with respect to a given gesture when (1) the current state of the interface is not the user's locus of attention and (2) the interface will execute one among several different responses to the gesture, depending on the system's current state." (Page 42)

So the play/pause button is only modal if "the current state of the interface is not the user's locus of attention." Locus of attention means something that you're thinking about.

When you use a media player, the fact that something is playing (or not playing) tends occupy your locus of attention. Therefore, the play/pause button is not modal and works just fine.

share|improve this answer
    
+1 - Nice in-depth answer. –  Rahul Sep 2 '10 at 16:26

Some users mistake singleclicking and doubleclick when performing an action like clicking on links or buttons.

Doubleclicking a play/pause button would result in nothing happening.

share|improve this answer
1  
Double-clicking a play button should do nothing whether it toggles to pause or not. –  JeffO Sep 2 '10 at 16:53

I think it makes sense to include them both in the same button. You never need to pause when the movie isn't playing and you never need to play when it isn't paused or stopped.

share|improve this answer
1  
And you sometimes need to repeatedly pause and play. Not needing to move the mouse pointer to a new location helps. –  dbkk Sep 5 '10 at 18:14

Another element to consider online is if the video starts playing automatically, and its performance (if it takes a while to load and play) where one would be looking for the play button (in the case it's on auto-play), but only have a pause button visible while they wait for it to load. Those first few seconds are critical for the user to create their mental model of how the video player works and not seeing a play button can be frustrating.

Each action should have it's own button.

A single (toggle) Play button would do the trick. If the video is playing it should be lit up and represented as "active" and if it is not playing it should be represented in an off state like the other buttons on the player... as online, not playing is basically stop/pause. Keep the message consistent; it's Play, where it has two states - on or off.

share|improve this answer

It depends on what device you are basing your UI on and what your target audience expect.

As Jouke mentions most portable music players have combined play/pause buttons - to save space - so it makes sense to combine them on your UI. If, however, your target is used to separate buttons then it make more sense to have them separate on your UI.

share|improve this answer

I hate when they are on the same button. I have several devices that sometimes don't adequately indicate that they've started playing. So I can't tell if they didn't receive the button-press or if they have and nothing has happened yet. Pressing the button again will either

  • pause or
  • start for real

and in cases like "iPod is playing an mp3 with a long, inaudible intro" I can't always tell what is happening. Depending on the device it can be very difficult to troubleshoot. Since so much hardware/software seems to be buggy, it'd be nice to have a button I can press lots of times to ensure the command got through.

share|improve this answer

I like them on the same button. Having a seperate play button just seems like a waste of space, since it won't do anything if the music is already playing.

One argument against combining the buttons, is that people could get confused because one button does two opposite things. I don't think this will be an issue, though, because almost every music player nowadays combines the functions in one button. People are most likely already used to the combined buttons and will more likely be confused if the buttons are seperated.

share|improve this answer
    
That and the fact that if the player starts off not playing (as it should) then when you click play, you will see it change to the pause icon, indicating it does both. –  Matt Rockwell Apr 28 '11 at 15:44

I would say always use a single "Play/Pause" button, with the following condition:

  • The button must only show the usable action. So if the player is in the "play" state, then the pause button should be showing. If the player is paused, the play button should be showing. This makes it obvious to the user what will happen if the button is clicked. (think iTunes)

If that condition cannot be met, I would be for separating the two buttons out. It should be clear to the user what each action will do.

share|improve this answer

@Jim Joel Spolsky's talk from Dev Days, which may be the same as this one: http://joelonsoftware.com/items/2010/08/19.html, discussed the lack of a need for a stop button without reel-to-reel.

The theoretical answers to this question cover almost all of the important points about affordances, so I will give a more practical answer.

  1. Think about the experience of your audience. If they have ever used a digital music player, either software or hardware based, they will already be familiar with the single play/pause button.
  2. If you aren't sure about your particular audience:

    Even the tiniest amount of empirical facts (say, observing 2 users) vastly improves the probability of making correct UI design decisions. (from Nielsen's "Guesses vs. Data" artcile)

In my experience, it's rare for my opinion on what I like to have any bearing on what users actually find usable. Conventions, user mental models, and testing are your friend here.

share|improve this answer

UI design is often about analogies. In my opinion, users tend to see a machine that can be switched on and off as analogous to e.g. a light switch.

You are designing for an audience used to on/off switches? Go for a single button, for goodness sake. These controls are really everywhere: the light switch, the engine of your car, your ballpoint, ...

You only want to separate the functions if you don't want them to be triggered by accident.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.