User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've never been happy with the old 'iTunes' model ("flip-flop" buttons; see this question) where the play and pause are the same button, with an icon showing what state you can go to (Play when you're paused, Pause when you're playing). Users often mistake action for state or vice versa.

Lately I've been seeing buttons marked > / || which have two states, unhighlighted and highlighted. Users seem able to grok this, though I'm never sure if 'in' means 'go' or 'pause. It's vaguely unsatisfying.

I was debating a single pause icon: || which gets pressed 'in' when engaged, like an old tape deck; but perhaps that too would be confusing.

Can you think of another way to present this play/pause dual?

share|improve this question
up vote 2 down vote accepted

I think an elegant solution is to style the look of the buttons how they act. So play and pause are a toggle, make them look like a toggle.

And while we are at it lets place them on the same line as the timeline to show the relation of how they effect it.

By placing play and pause at the start of timeline it shows the user these start/push the timeline forward.

By placing the stop button at the end, you show the user that it will end the timeline and push it backwards to the start.

And the timeline player can help as well. By coloring it while its playing you show that its being pushed along and time is passing. By uncoloring you show it has paused.

Here is my mock up: UI Mock Up

share|improve this answer
I would advice against putting the stop button on the right side of the timeline - users don't like to move their mouse cursor far between related actions. For example: to stop and then quickly wanting to start the song will cause a long unnecessary mouse drag. In the same manner - "next" and "previous" should be adjacent to the rest of the buttons. – Henrik Ekblom Jul 25 '11 at 15:57
Good point @Henrik, Though stopping the video would return it to the start and is very different than pausing. If I could I would love to see how my design fairs in some tests because I hypothesize that users would prefere it be out of the way of the more used controls. – jonshariat Jul 25 '11 at 17:20
Why add "Stop" at all? – Jonta Aug 9 '11 at 17:24
I think the pause button should be removed when it's useless (initially absent). Then it magically appears when it starts playing. – Knu Aug 10 '11 at 9:27
@Jonta Indeed! It really isn't needed – jonshariat Sep 29 '12 at 20:48

I don't like the play/pause in the same button, but I understand the advantages from an "economy" point of view and also in terms of usability it makes sence.

Trying to create a different system may not be the best idea (I'm not saying inventing something new isn't good) since this is a proven system that most recognize.

iTunes uses something even worse (IMO) which is the play/pause and no stop button...

"My" trusted SoundJam MP uses this:


A Play, Stop and Pause. It is very clear and works wonderfully.

Another thing to consider is keyboard shortcuts, this for me is paramount, because to be honest I haven't pressed any of those buttons for the last several months, I use keyboard shortcuts and via Butler (on the mac) I control the playback via shortcuts also... What I mean with this is if simplifying the button system isn't such a bad idea, since maybe they won't even be used that much (?)

share|improve this answer
Oh, man, SoundJam MP--that brings back memories. But it does use a lot of screen real estate. I failed to mention that this is (a) for a phone app and (b) may have a list of items all of which require play/pause capabilities, which precludes using hotkey alternates (but opens the space for gestural interaction). – Alex Feinman Jul 20 '11 at 18:12
@Alex Feinman oh, in that case I think you're stuck with the play/pause combo, it's the best arround, but since you will/may have several, you will probably need to grey out the other plays while one is playing, or at least pause the ones playing, tough one... – jackJoe Jul 20 '11 at 18:41
Spotify also has the play/pause and no stop. It's slightly disconcerting - like maybe it's still streaming but not outputting audio. Similar to a CD that's on pause - it's still spinning - just muted. However, visually, the symmetry of it with the previous and next buttons either side is aesthetically pleasing... – Roger Attrill Jul 20 '11 at 18:44

Seeing how widely used this is in pretty mainstream players such as iPod and Spotify most users should have no problem with this. Also most users probably don't overthink what the states means, such as if streaming is going on in the background. Either the music is playing or it's not and the play/pause toggle shows this pretty well.

share|improve this answer
I disagree with the general idea that "if the big company X does that, it must be correct". It is often a good starting point to look at industri leading software, but it isn't always the right way. I, for one, don't like that the play becomes pause. Your idea that "if the music plays" fails if the speakers are unplugged, which can make the user be unsure of why it's silent ("because the player isn't playing or something else?") – Henrik Ekblom Dec 7 '11 at 10:01
@HenrikEkblom: An even more common problem arises when music isn't playing because of network congestion or similar problems. Multiple states are possible (should eagerly buffer data and play when data is available, should eagerly buffer data but not play until asked, should hold off on buffering data so other applications can do so, etc.); IMHO, a drop-down selector would be much more helpful than a toggle whose state can easily be ambiguous. – supercat Aug 19 '14 at 18:36
I didn't mean it was correct, just that people get used to how things work and something that has a lot of users mean a lot of people expect it work like what they're used to. Just check a Windows user sit down on a Mac (or vice-versa) and go "why doesn't ctrl+c copy my text?", "why did all my windows go?", etc. – John-Philip Sep 10 '14 at 8:47

Inspired by @jonshariat, I've created a similar version of this for a timer on my site:

enter image description here

I've also got it working so that the space bar will stop/start the timer as it does with spotify.

share|improve this answer

I believe the play/pause symbol (Arrow with Vertical line amalgamated to the right vertex of the triangle) is also the symbol of a diode in a semi-conductor device used in electronics. If you research how a diode works then i think you would be pleasantly satisfied about the design of the play/pause symbol.

share|improve this answer
This doesn't really answer the question. Most likely belongs as a comment to the original question. It is informative however, and that's why it's important to state. – Andrew Jul 14 at 15:44

Your Answer


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.