I need to allow users to manipulate playback speed for audio; to do so, they can use three buttons:

  • - to slow down the playback speed by 10%;
  • + to speed up the playback speed by 10%;
  • = to set the playback speed to its normal 100%.

Tooltips are also used to convey users with meaning of each button. The users can also use keyboard shortcuts for the same effect:

  • Ctrl + down;
  • Ctrl + up;
  • and Ctrl + =.

But now, as I'm preparing the app for prime time, I'm looking for a better signage. Here's what I came up with (and why I think it won't work):

  • -10%, +10% and 100%: this might be confused with volume controls (of which there are none in this up);
  • , and : this is not right; slowing down a track does not make go backwards;
  • , and : the is too similar to the load media button (which the app doesn't have).

Is there any standard imagery associated with such a functionality and that we can use in this particular context?


Here's what I made so far (note the diamond button; I find it more appropriate than the dash, as it shows an up- and a down-button stacked on top of each other and canceling each other's effect):
enter image description here

  • 1
    Do you have a mock of the player in context, with the full control set? – Mike M Aug 2 '17 at 13:17
  • There you go @MikeM! – ahmed Aug 2 '17 at 13:33
  • 2
    Are you sure percentages are the right value to indicate a decrease or increase in speed? Playback speeds are normally indicated as values of multiplications of normal playback speed, such as 1x, 2x etc and .5x for slower. – DarrylGodden Aug 2 '17 at 13:35
  • 2
    Also, have you canvassed your users as to what they need? What's the maximum speed up or slowing down they need? As that may affect the type and position of controls. – DarrylGodden Aug 2 '17 at 13:36
  • 1
    Maybe a compressed wavelength icon for fast speed and a streched one for slow play. – Fernando Aug 2 '17 at 13:46

Couple of options, one inspired by the load calculator question I saw on this site.

Normalise playback speed options to the 1X, 2X.

Or go with a drag control that increases/decreases speed, up to the limits you mentioned.

Playback Speed

  • I like the drag idea. I'll see what I can do about it. thanks! – ahmed Aug 2 '17 at 15:07
  • yeah. the typical scale for drag would be: turtoise to running rabbit. These are the common icons for different speeds. – JonnyZoo Aug 3 '17 at 15:50
  • Or stick with one button for speed up and one for slow down, but dynamically change the label on those two buttons to say what speed will be achieved when you click them. – calum_b Aug 3 '17 at 17:17

I arrived at this question with the same problem, and after reading Darryl answer I think I will go with an extended approach:

Using two horizontal button bars

  • The upper bar would have the typical media control buttons;
  • The lower bar would contain the pre-set speeds and would form its own radio-button, mutually-exclusive scope.

I think it occupies more space than strictly needed, but my previous experience with software that allows multiple playback speeds is that jumping between well-known speeds is more agile than tentatively dragging a slider.

Also, I thought about using different "fast forward" buttons (if regular play is > then there would be >>, >>>, >>>> and so on) but I couldn't figure a good representation for values smaller than one, and I wouldn't like to mix text-labeled icons with symbol-only icons.

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.