Button for "Play, but from beginning" for a scrubber UX [closed]

Question

Consider a typical video-editing style timeline:

There's the usual Play button: a right arrow.

There's the usual Pause button: two bars.

-----------------|-----------
         >  ||

However, I want to have a "Play, but from beginnning" button.

When you want to "play, but from the beginning" you have to: bring the slider to the beginning, before hitting play. That is annoying. It would be better if there was a "play, but from the beginning" button.

What should the symbol be?

Help me out gang!

---

Lame idea from non-designer...

Does that get anyone thinking? It's not really very good: the one on the left probably suggests "cycle around in some sense" It's hard to express "go back to the frickin' beginning and then Play"!

---

Complication: most editors additionally have a "Play, but fullscreen" concept, yet another play-related button.

Bonus: If there's a keyboard, space-bar usually toggles Play/Pause. Is there a good keyboard UX for "Play from beginning"?

Answer 1

I agree with many around here that it is possibly best to stick with the icons that are so common for media players.

However I understand the problem you try to solve. Mixing both icons could be a nice solution. But as always; testing is knowing!

My attempt for a possible mix:

And to emphasize that it starts from the beginning...

Add a line:

Or use different alignment:

Indeed you only need this:

Answer 2

v1

I would suggest that the play button stays the same as it always has - a triangle to begin then a pause once playback begins. But, once playback has started, a new button appears like this:

The circle encapsulating the easily recognisable play triangle is pointing in an intuitive direction: anti-clockwise, implying that we are going back in time. The button as a whole still means play but we use the arrow to infer a different meaning.

---

v2

As suggested by JoeBlow in the comments below, here is a second version using a semi-circle shape to "jump" back to the start:

I like the idea here, but as has been remarked it might look a little odd centering the icon vertically. But given the correct context, I think its pretty clear what it is representing as per the following example:

---

v3

Here is one more example that draws from a previous effort...

...but wasn't well received:

The evolution of the previous version to this one looks a lot like one of Crissov's examples in his answer, which again adds weight to the representation of this design.

---

v4

Here's one last example that places the controls on the timeline. Its a bit of fun more than anything else, but the icons flow with the timeline, interrupt the timeline or redirect it. It is quite a departure from normal conventions, but an enjoyable thought experiment nonetheless.

Example Usage

KRyan in the comments asked for a usage scenario so here is an example mocked up with YouTube.

This is how the video interface looks before a video starts playing:

Once the video starts playing the Play button we see above changes to a pause button. I'm proposing that an additional button (once playback starts) could slide in, allowing you to jump back to the beginning. Like this:

Answer 3

IEC 60417 is a standard for symbols to put on electrical devices (TVs, VCRs, washing machines, MRIs etc.) and ISO 7000 collects these. Each costs around 100 bucks, but there is a free preview PDF. It’s the closest I could find that would standardize the common playback controls like play ▶️, pause ⏸, play/pause ⏯, stop ⏹, fast forward ⏩, rewind ⏪, skip/next ⏭, prev ⏮, record ⏺. It covers all of these and more.

The standard even offers two variants for many of the media control icons. Alas, the symbols in actual use are rather a mix of both, e.g. the equivalent of playback in the standard #5107A/B: Normal run; Normal speed is either an arrow with a hollow equilateral triangle as head ⇾ or a filled isosceles triangle ►, whereas commonly a filled equilateral triangle ▶ is used (all pointing right).

or

Likewise, the symbol ↪️ #5125 Recapitulate has two variants A/B:

and

They both follow the example of #5862 Previous; Play previous part, which looks quite distinct from ⏭ #5861 Next; Play next part:

vs.

Those come both in a single variant, but are based upon the different Normal run variants. Standards – go figure.

I obviously don’t recommend to follow standards blindly, especially when they obviously have been adapted with a bit of freedom by the industry. (Other parts of the standards are followed slavishly in respective areas, though.) Also, as I’ve shown, the standard symbols don’t seem to be consistent all the time.

My actual suggestion would be to use an #5459 Eject symbol ⏏ turned a quarter-circle clock-wise, filled or hollow as fits the visual scheme. Reasoning: The vertical bar on the left then indicates an earlier cue mark, which is the start of the current track by default. There’s a similar IEC symbol #5471 Frame by frame, general with two thin lines. Note that the more familiar variant of ⏸ #5111B Pause; Interruption is just as hollow as the triangles (or the Stop square).

⤵︎ ≈ ≠

PS: The ISO/IEC 9995-7 standard symbol for the Home key is ⇱.

Related standards

I didn’t actually review any of these in detail, but provide them for reference:

• ISO/IEC 18035 Icon symbols and functions for controlling multimedia software applications This one seems very appropriate, in section 6 it specifies:
  1. Dynamic media controls (Play, Stop, Pause, Replay, Play backward, Scan forward, Scan backward, Fast forward, Rewind, Step forward, Step backward, Record)
  2. Attributes of dynamic media controls (Loop, Set volume, Mute, Speaker on)
  3. Navigation controls (Go to … beginning, previous state / visited presentation segment / media object, next presentation segment within the application / media object within the composite media object, end / exit)
  4. Additional controls (Main menu, Eject, Help, Snapshot, Save)
• ISO 14915-2 Software ergonomics for multimedia user interfaces — Part 2: Multimedia navigation and control This standard is more about the concepts than the symbols.

More general ones:

• ISO/IEC 11581-1, -6 User system interfaces and symbols — Icon symbols and functions — Part 1: Icons — General Not about multimedia control, this standard deals with common icons for office and generic applications, e.g. Open, Save, Print, Bold.
• ISO 14915-1 Software ergonomics for multimedia user interfaces — Part 1: Design principles and framework
• ISO 9241-12, -13, -16 Ergonomic requirements for office work with visual display terminals (VDTs)
  • Part 12: Presentation of information
  • Part 13: User guidance
  • Part 16: Direct manipulation dialogues

Examples from actual products

_{(source: adobe.com)}

Answer 4

you can use a restart / reset button, here's an example from YouTube, the leftmost button

Answer 5

Traditionally, the 'previous button' is used. 1 click returns to the beginning of the clip, and a double click goes to the beginning of the previous clip. Holding could also jog back.

Answer 6

How about this.. It shows 00:00 , meaning the beginning of the clip. This probably IMO is easiest to understand for a general user.. without using loop symbols etc.

Edited based on comment from Crissov.

Answer 7

Play .. play from "where the head is now". We're still in edit concept.

You need to use the icon that has to toggle between pause and play, something like

However, I want to have a "Play, but from beginnning" button.

Try this icon for simply restarting from the beginning.

Try .. Leave edit concept (so, things could happen like "widgets disappear from screen" "we go to full screen" or whatever), and play from beginning to end; at end, likely revert to edit concept.

If something has been edited, just show a checkbox Check this to save on Play. If user doesn't select it, then changes will be lost.

Answer 8

So many good ideas here... I think the most intuitive ones incorporate the concept of the scrubber/timeline combined with the play button. Here's my take:

EDIT: A refined version...

This is a fascinating exercise. Great question.

Answer 9

As this is a take on the skip back control which is a standard media playing control. You could incorporate a progressive disclosure icon into that skip backwards icon. When held the additional options would appear.

Example:

• When single clicked the main action would initiate i.e. normal skip to start and would stay paused if currently paused.
• When tap/clicked and held down, a menu of additional options would appear which would include your skip back and play option. You then hover across and release on your option of choice or tap if touch screen.

Rest state:

When held down:

---

Inspiration

This little arrow in the corner can be seen in programs like Photoshop/Illustrator. I've also seen it in Apple Xcode on the Run app button, when held Test, Profile and Analyse also appear as options. As Run is the predominant action in Xcode this has the main prominence, the other 3 actions are less common but still accessible when clicked and held.

Answer 10

After reading some of the comments and answers and realising you want this button to skip to the start and start playing even if paused I realised maybe youre trying to invent a control that isnt necessarily needed by the majority of users (an assumption) and also would add more elements to the UI and potentially cause confusion and clutter.

From my experience when you are currently PAUSED and you use a skip control, the media will not automatically begin playing after skipping.

So an alternative idea is to offer an option in a settings area on your UI to turn auto play on/off. Therefore users that might benefit from the autoplay after skipping function can turn this on, and users that want a conventional skip and DON'T autoplay can have it turned off. And everyone gets to use a standard media playing UI without a brand new control that could cause confusion to some users if its unrecognisable.

Example (in settings):

Answer 11

In products that play multiple items (videos, songs, etc.), you often have skip buttons, with icons like these:

In theory, these are used to navigate between items.

In practice, skip backwards more often means "go to the beginning of the current item, and if we're already there, go to the beginning of the previous item instead." You could eliminate the "if we're already there" part and just use it for "go to the beginning."

Answer 12

To answer the keyboard UX question, HOME is often used to go to the beginning of a media clip. Show then it would be HOME SPACE to skip to the beginning and play.

Answer 13

I think that my idea may give you a little different view of this button.

Basically, my idea is very similar to the v1 of Chris Spittles's version, but the button should contain the progress bar (e.g. when you are around 50% of the progress, the button should look like in v2, but when you reach 90-95% of progress, it should look like in V1.

Of course, when you play the video, the progress bar "around" the rewind-and-play button should also be changing to mimic the current state of the progress bar. When the user notices the button for the first time, he/she may be a little confused but when he/she sees the button later, with a part of the circle around the play button, it should be very clear what is the function of the button. Plus, we get a nice "repeat" button at the end of the video :)

The "visual" part (all credits belong to Chris Spittles):

50% of the playback:

95% of the playback:

Answer 14

I would suggest the above or something similar to:

|->

"Start at the beginning and play." Or:

Edit: I realize this could be interpreted in ways that you might not want.

Update: I did an image search on "play from beginning icon" and saw some of the samples from this page, but also an example using a bar like this:

Here the Play button could toggle between play and pause, while the first button will always play from the beginning.

These examples are from a set of icons called Diagona Icons Copyright (C) 2007 Yusuke Kamiyamane but I did modify the "play from beginning" button to suit this example.

Answer 15

Joining the brainstorm... I feel this should be more of a comment to some of the previous ideas. Borrowing from music notation and the general idea of the beginning of a score:

Or, more correct maybe but less recognizable (Da capo):

[ edit [

Or even with the 'real' note bar?

In my opinion, the second one works strongest and connects best to previous ideas.

Answer 16

[►

Opening bracket [ for the beginning, ► for playing.

Also, there's a Home button on most keyboards that does what you'd expect.

Answer 17

The icon should visually represent the action(s) performed when clicked.

In this case, the action is:

1. Go Back (to the beginning)
2. Play (or continue playing)

The icon below is the most clear representaion of these two actions in sequence.

 

This shows 'go back' leading directly into 'play', and nothing following play. Other icons that do not show the connection and sequence could be interpreted as representing a different action - e.g. 'play then repeat'.

You should test this with your users. You might discover that they find the extra play buttons confusing, and prefer to click play, and then click the go-back-to-start button - because that is what they are used to when they operate a TV remote.

Answer 18

Why don't you simply go to the basics? What you want exists since tape recorders and was used by most video players since the 70s (and even audio devices like walkman later): stop and pause/still buttons. Stop button sends you to beginning, pause/still button keeps you in place. No need to create icons, new affordances, anything, this is an at least 40 years old technology

This way, you only need a regular play button, and if anything, just highlight the "pause" button to denote position. Good proven old school design.

Answer 19

Have you considered a textual "Play from start" button?

Every one of the proposals here is worth conducting user testing on and collecting analytics for. If none prove to be adequately recognizable, a textual button might be the best solution.

Answer 20

I propose having three symbols. If other action-symbols are appearing in buttons, then place all three of these symbols into a single button a button (a circle or (square) rectangle).

• A vertical line, and a left arrow (as seen in , Kevin's answer, Samuel Kelemen's answer)
• A comma
• A right arrow

This may be cramming things a bit, which could be counter-acted by using smaller symbols. However, those downsides would be countered by the benefit of clarity of meaning. Using these symbols is sort of like ideogram's answer but designed for people who can read and write paragraphs, not music notation.

Answer 21

How about having a "bookmarks" panel, with a means of setting a particular bookmark as a default, and then having a "play bookmark" button on the scrubber control? If there is a default bookmark at the start of the piece and no other bookmark is set, "play bookmark" would replay from start. If, however, any other bookmark is set as the default, "play bookmark" would play from there.

Answer 22

To answer your bonus question:

On Youtube, you can hit 0 and skip to the beginning of the video. If it's not playing already, but paused at some other point, you only need to slap Space. The "regular" hotkeys don't work reliably every time because sometimes the browser focuses on the trackbar or you clicked the page, and the player isn't getting those key presses, so pressing Space might do a "page down" scroll instead. So press K to play/pause instead.

In media players, if you have extra keys on your keyboard like Play/Pause, Stop, Next, Previous, like this for example:

…You can press Stop and then Play.

If you don't have those extra keys, media players usually understand pressing the Home key as "go to start".

So this is usually a 2-key job if you're paused, unless you're already playing.