Forward buttons with stereotypical DVD icons in an app I'm making.
Is there a standard for ordering these?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
<< | >/|| | >> | O
Back - Play/Pause - Forward - Stop
From a UX perspective I see it this way. Keeping the stop button is necessary, its an easy way to start from the beginning again. At the same time it needs to be a little away from the play/pause button to avoid accidental stopping of media play.
Color code the same as it used to be on the dvd players.
Back - Play/Pause - Forward - Stop Black - Green - Black - Red
(is the usual, so users might even relate to it as a mental model) or anything that suits the UI but clearly distinguishing each button. This will help for sure.
If you think of a video as a timeline, then for western cultures, the intuitive order would be:
<< | > | >>
See one of my other answers for more information about direction as it relates to representing time in an interface and how the common left-to-right paradigm is representative of western culture's influence on technology.
Within the context of a timeline, moving left on the timeline would correspond with rewinding.
Starting/stopping is controlling the "present" point of the timeline, which would put it between past and future points on the line. Normally the starting and stopping/pausing of a video is handled by the same button (a toggle) so you don't always see that as more than one button.
And lastly, fast forward moves the current point on the timeline to the right, so that button should be last.
My Video Cassette Recorder solved this in a very nice way. On the page 5 on PDF Reader (3 on the physical document) of the Philips VR 668 User's Manual, you can see at the right of the device "kind of a wheel" with the buttons for controlling the playback state.
That strange symbol at the top is the Pause function ; I think they made it different from the standard two vertical bars icon just to make evident that it turns on the Shuttle (a outer wheel for forwarding / rewinding the tape with different speed levels).
This was just a side note; back to the point again. They are organized like
Pause Rewind PLAY Forward Stop
and I like it. The problem with this approach is that it takes three lines and three columns with four empty spaces and I don't know if space is a problem for you.
In the Remote control, the buttons are in a different way. On the page 4 on PDF Reader (2 on the physical document), there is a picture of it where the playback buttons are like
Rewind PLAY Forward Index Pause Stop
and I don't like it so much as the VCR's own interface.
The Index button function is described on the page 18 on PDF Reader (16 on the physical document) of the manual and I don't think it has any useful purpose for your case.
The Pause button (described as Still / Jog On) has a particular interesting feature: when activated, it turns on a green backlight on itself, just to indicate the jog (the inner wheel for forwarding /rewinding with much precision) is receptive to user action on it.
CONCLUSION: From my own answer, there is a noticeable pattern:
The Play button is always on a highlighted way, by making it central and most noticeable than the others. In both VCR and Remote it is bigger than the other buttons.
There is a left-to-right order of Rewind / Play / Forward, which is the logically intuitive one.
The Pause button is on a horizontally centered and vertically aligned with the Play button
The Stop button is on the last position.