18

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?

13 Answers 13

14

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?)

4
  • 1
    Joel Spolsky talked about the reel-to-reel tapes in his Simplicy vs. Choice talk. Sep 2, 2010 at 13:29
  • 1
    1+ Great answer
    – Willbill
    Sep 3, 2010 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. Sep 4, 2010 at 7:05
  • Stop is often missing, but that doesn't mean it's unnecessary; it should request that the system close the file associated with the media, thereby releasing any locks that might be held with it. Clicking "Play" should attempt to open a file at the previous location (which may be the same file, or a new file which replaced the old).
    – supercat
    Feb 10, 2015 at 22:21
15

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.

0
5

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.

7
  • 1
    Double-clicking a play button should do nothing whether it toggles to pause or not.
    – JeffO
    Sep 2, 2010 at 16:53
  • If the button isn't a toggle, then shouldn't the first click start the content if it isn't already running, and only the second click do nothing?
    – supercat
    Feb 10, 2015 at 22:22
  • @supercat yes. On the other hand if you DID use a toggle...
    – badp
    Feb 10, 2015 at 22:56
  • @badp: I misinterpreted JeffO's statement as "whether it toggles [is a toggle] or not" [meaning it isn't the fact that the button is a toggle that causes the double-click to be ineffective] rather than being an affirmation of your statement that it even if the audio is playing, a double-click would not likely have a useful effect.
    – supercat
    Feb 10, 2015 at 23:00
  • @supercat I think his point is that the UI should detect a doubleclick and reject it as such (so even if you used a play/pause toggle, the control would only trigger once). It's a reasonable point.
    – badp
    Feb 10, 2015 at 23:28
3

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.

1
  • 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, 2010 at 18:14
3

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.

3

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.

2

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.

1

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.

1
  • 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. Apr 28, 2011 at 15:44
1

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.

1

@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.

1

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.

0

When you combine the play and pause buttons, technically what you are doing is removing the play button.

The play button is traditionally supposed to start playback from the beginning of a track. The pause button can both pause playback and restart playback from the current position. The combination play/pause button just does what the pause button does.

0

Think of a TV remote for example. Remotes use some form of wireless connection that might operate unreliably (too distant, low battery, slow response).

If we have separate buttons, the click of each button is an idempotent operation, that is, clicking play (or pause) can be repeated multiple times without changing the visible result. So, for example, if your remote is acting up, you can click-click-click play until you see it works.

If we have the same button for play and pause, the button click becomes a non-idempotent operation. If you click it once, don’t see an immediate response on TV, and click it twice, to your annoyance the result might be play -> pause -> resume.

With that regard, separate play and pause buttons may result in a better user experience (Ux).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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