Working on a website recently that incorporates a music soundtrack I noticed that audio and video controls function in opposite ways.
The video play control shows you what will happen if you click on the button. So, if a video is playing, the pause button will show. And if the video is paused or stopped, the play button displays.
However, with audio the reverse is true. If a website uses music or sound effects the on/off control will show you whether sound is currently on or off, not what will happen if you click it.
It must be because I'm so familiar with how these controls function that this intuitively feels right to me. However, on reflection, it's odd that they've come to work so differently.
The more I think about it the more it seems strange that the video play button displays the opposite of what it is doing. I can't think of another instance in which a button works in the same way.
Posted on: July 11, 2009 | 15 Comments



15 Comments Posted
To me the video control makes sense. Think of a physical remote control. When you're watching a DVD and you want to pause it, you reach for the pause button. I'm guessing that's where the convention comes from.
1. Posted by Scott Nellé on July 11, 2009
Interesting. That's the way audio works, I guess. Think about the volume controls IN a video. The display for sound is an indicator more than a button. It shows either lots of bars coming out of the little speaker, or few bars, or a crossed out symbol. When you change the volume level, the indicator changes. In that regard it is not button more so than a status display. When audio is on a page alone it works the same way. If your only choices are on/off it makes it seem like a button, but it's still just a status display (albeit with two results).
The play button on videos works, as Scott pointed out, just like a remote control or even a dvd player itself. It's really two buttons in one (or one button with two jobs as is the case with some remotes). Video controls are showing you the one you'll need next. They could just as easily put > / || instead of just >. The only other option as I see it would be to have two separate buttons. That's redundant, though, because you'll only ever need one of them at a time.
Your observation reminds me of the way scrolling works. To make the words go up, you pull the bar down. On an iPhone, where you use your finger, to make the words go up, your finger goes up. Both seem logical and intuitive.
2. Posted by SuperKevin on July 11, 2009
I totally agree. It's odd yet we understand the it for the most part. Though I would go as far as to argue for a separate button for each stop/pause and play for video. Far to often I have been forced to reconsider what I think the buttons are telling me when a video does not start playing immediately.
3. Posted by Mark Aplet on July 12, 2009
I also agree that the video control makes more sense. Buttons should be used to show what action will happen when you press them, not to show the system's current status. There should be some kind of display for that.
4. Posted by Ido Schacham on July 13, 2009
I agree with Ido.
5. Posted by Evan the Web Designer on July 13, 2009
This takes me back. I once worked for Dell, if my memory serves me this was a feature designed by software guys due to people playing music at work [ remember over 80% of people access web via work]. I think its just a legacy that one one has bothered to revisit.
6. Posted by brian on July 14, 2009
Good point. I guess it is because we're familiar with it.
7. Posted by miami web design on July 15, 2009
Funny point you make there with this article. Indeed it's strange you click on pause while it plays, compared to music player. On the other hand if it would change, it would feel very very strange.
8. Posted by Webdesign Rotterdam on July 16, 2009
im aggre with brian we are familier with it
9. Posted by sevan on July 20, 2009
hi every one let me share my experience while making my web i was unable to watch an avi file and only the files with windows media player were working we tried hard to over come it but still in vane...hehehe then i write the same code again and worked:)
10. Posted by ntiremeadia on July 20, 2009
hi every one let me share my experience while making my web i was unable to watch an avi file and only the files with windows media player were working we tried hard to over come it but still in vane...hehehe then i write the same code again and worked:)
11. Posted by ntiremeadia on July 20, 2009
Yes it is a right point you caught that audio and video controls function in opposite ways.I totally agree with you.
12. Posted by Probir Das on July 28, 2009
I find the majority of users in our country don't event consider the controls, because as indicated, most users acces the web from work and as soon as they hear audio, they just close the page all together
13. Posted by website design south africa on July 31, 2009
Wow, never even thought of that. Interesting. Now that I think about it... It should show what the player is doing. I don't know how many times things have lagged on me and i start hitting the pause/play button, and end up confused on whether its still lagging or if i paused it.
14. Posted by web ideas online on August 07, 2009
The post was very interesting...... i never thought about it before, the point was very logical...... that is a quite different way to think over tools and options.... but still the answer for this question is pending, isn't any one who can make it clear....
15. Posted by Jennifer johnson on August 21, 2009