13

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?

Improve this question

6 Answers 6

Reset to default
4

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

Improve this answer
6
  • 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, 2011 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, 2011 at 17:20
  • 8
    Why add "Stop" at all?
    – Jonta
    Aug 9, 2011 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, 2011 at 9:27
  • @Jonta Indeed! It really isn't needed
    – jonshariat
    Sep 29, 2012 at 20:48
2

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.

Improve this answer
4
  • 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, 2011 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, 2014 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, 2014 at 8:47
  • I usually have this buttom problem with movie players. There is usually a stable scene on a beginning of a movie. (Sometime just black screen) I look at the interface and thinking "Is it playing? Did I pushed the button?"
    – Ada
    Apr 14, 2018 at 13:04
1

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:

soundjam

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

Improve this answer
3
  • 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, 2011 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, 2011 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, 2011 at 18:44
0

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.

Improve this answer
0

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.

Improve this answer
2
  • 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, 2016 at 15:44
  • The music is never allowed to play backwards? If it is more than 0.7 volts you can hear it? Umm...?
    – user67695
    May 10, 2017 at 19:22
0

It highly depends on how much functionality you want to implement.

I suggest keeping three buttons for clarity and functionality reasons:

Play

  • if stopped or playing: starts the chosen song from the beginning
  • if paused: resumes playing the chosen song from current position

Pause

  • if playing: pauses the song
  • if paused: resumes playing
  • if stopped: does nothing / is disabled

Stop

  • if playing or paused: stops playing and clears position of song
  • if stopped: does nothing / is disabled

This is how good old WinAmp behaves where it looks like this: Play/Pause/Stop in Winamp

Improve this answer

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.