8

I have Stop, Play, Back, and Forward buttons with stereotypical DVD icons in an app I'm making.

Is there a standard for ordering these?

3

<< | >/|| | >> | 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.

  • So for extended media controls, could it be something like: |< , << , >/|| , o , >> , >| (First, Prev., Play/Pause, Stop, Next, Last) ? – Joe DF Jun 21 '18 at 17:43
5

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.

Back

Within the context of a timeline, moving left on the timeline would correspond with rewinding.

Start/Stop

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.

Forward

And lastly, fast forward moves the current point on the timeline to the right, so that button should be last.

1

Yes. It is generally:

|Back|Stop|Play/Pause|Forward|

These roughly correspond to a timeline, as if one was scrolling horizontally through the video.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.