Alternates to the "play/pause" button

by Alex Feinman   Last Updated April 14, 2018 02:16 AM

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?



Answers 6


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

jackJoe
jackJoe
July 20, 2011 18:06 PM

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

jonshariat
jonshariat
July 20, 2011 20:22 PM

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.

John-Philip
John-Philip
July 20, 2011 20:24 PM

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.

icc97
icc97
August 09, 2011 15:24 PM

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.

Engineering Student
Engineering Student
July 14, 2016 15:35 PM

this is so annoying why cant they be simpler ffs heeeeelllllpppp meeeeee youuu never give me the help i neeeeeddddd

paea
paea
April 14, 2018 02:04 AM

Related Questions


What would be a good way to thumbnail audio?

Updated July 13, 2015 14:07 PM

Icon/Symbol for one octave up/down

Updated April 04, 2016 08:06 AM

Buttons for slow- and fast-playback

Updated August 02, 2017 13:16 PM