4

I've had difficulty phrasing this question. Basically, at my current design i have a "scrubbing" slider, moving the slider will affect the video preview.

I've added another component. There is a PLUS(+) and MINUS(-) buttons on both sides of the slider respectively. Clicking those, will advance the video in one frame at a time (respectively).

I've made some testing and apparently users think it's an indicator labels, and not buttons, not talking about them thinking it's + - frame advancer.

What is your recommendations to solve this issues? without hurting the UI?

Current Design

enter image description here

Previus Design

enter image description here

7
  • 1
    Your design looks like a volume slider. Why do you want to communicate that it's 1 frame to skip, do users care about that or do they just want to skip a bit? The answer is already given: don't introduce new controls, just use < and >.
    – jazZRo
    Nov 6, 2016 at 6:39
  • @jazZRo Thank you for your respond. And yes, it's very critical that they would have to option to skip frame by frame (one of the app top features). Could you please advise me how to change my slider, so it would "look"\"feel" like a frame scrubber? (it's an app that fetches frames from a video, and export them as photos)
    – Roi Mulia
    Nov 6, 2016 at 8:05
  • Did users think about the buttons as labels in your previous design or only in the new one?
    – Alvaro
    Nov 6, 2016 at 11:40
  • @Alvaro no, they didn't. Tho the experience was bad, because when they "long pressed" one of them. the slider moved, and the buttons moved as well. That's why i've decided to move them to the sides, so they'll stay static when pressing them
    – Roi Mulia
    Nov 6, 2016 at 11:58
  • I didnt understand why they were not centered in the screen. Now I understand they were supposed to be following the slider dot.
    – Alvaro
    Nov 6, 2016 at 12:02

4 Answers 4

4

You need to solve this by making the button more understandable/obvious. I think you can achieve this in two ways:

  1. The form of the button. Try to find an icon which clarifies that you are "moving" one frame. The icons proposed in other answers look correct to me. You could also test making the button a Raised button. Check other industry editing software and see how the same problem is solved.

  2. The location of the button. Users might be having difficulty not seeing the button as a button because of the position on the sides of the slider. Although it goes with the logic of what the button will do, it is creating the impression of being a label. You could separate buttons from the slider as they are not the same action. Displaying them on a different place (like below the slider) could make more obvious it is a different action and will also draw attention to them (as you also say these are one of the top features of the app). (But dont make the buttons move or follow the slider position)

Also important:

  1. Extra information. The user needs to know what will the button do before using it. In this case displaying the time of the next and previous frames visible will help the user understand its purpose (you could also try "next frame" instead of the time of the frame, but I think the time should be ok). And also reduce confusion as the icons by themselves could be understood as go to next video.

I am attaching an image as a proposal applying what I suggested.

EDIT: Updated the image to better explain how the slider would act.

ui

8
  • Hey Alvaro! Great answer!! Separating the buttons from the slider is the right direction. If we quick check what is the convention on iOS (my targeted platform), almost every time there is sort of a label/icon on both sides of the slider. So moving them down is a good idea. I prefer placing a static label next to the buttons. What do you think about these options? %% "1 frame forward"/ "1 frame backward" %% "next frame" \ "previous frame" %% "+1 frame"/ "-1 frame" %% As well, should i use the standard fastword/backward icons that Apple Music provides? This icons from Google as far as i know :)
    – Roi Mulia
    Nov 7, 2016 at 8:27
  • 1
    prntscr.com/d43anh added picture of iOS icons
    – Roi Mulia
    Nov 7, 2016 at 8:28
  • Hey Alvaro, i've took yours and all of the others advices, i'm adding a link to my current design. Would love to hear your thoughts. :) s17.postimg.org/gfgsshkmn/…
    – Roi Mulia
    Nov 7, 2016 at 9:10
  • 1
    Hi Roi! The image you just posted looks much better to me. If those icons are the ones used on iOS, sure use them (the ones I posted are from Google, yea). About the label I would rather use any of the other two options you mention. As Vitaly commented in his answer +/- something gives the idea of adding/removing; try to avoid any kind of confusion. Personally I like the time over the handler without the down arrow, looks cleaner to me; but just a matter of taste.
    – Alvaro
    Nov 7, 2016 at 9:46
  • Thanks! Inspired by you :) I have an issue with the labels length. Frame Backward/Previous Frame doesn't fit in the label frame size (Using SF font, Regular 15). Can you think on shorten phrase for both next/previous labels?
    – Roi Mulia
    Nov 7, 2016 at 9:50
3

For that use, I would expect to see "<|" and "|>" icons on those buttons (that is, a mixture of "⏸" pause and "⏵" play).

I'd wager that using standard icons as found on playback devices would increase your user satisfaction.

Edit: found a random screen shot describing what I mean:

Screenshot of video editor showing previous and next buttons

2
  • Hey! Thank you for your respond! Very interesting! So basically, this will "explain" to the user that these are buttons. In he will understand the specific usability only when trying? I mean, is it bad practice to place this button, if the "result" of the action is different than what he thought? Those button does not explicitly indicate that the video will skip +1 frame / -1 frame. Or is it? Just making sure :)
    – Roi Mulia
    Nov 6, 2016 at 1:22
  • Hey KlaymenDK, i've took yours and all of the others advices, i'm adding a link to my current design. Would love to hear your thoughts. :) s17.postimg.org/gfgsshkmn/…
    – Roi Mulia
    Nov 7, 2016 at 9:10
1

Plus and minus signs typically increase/decrease the quantity or degree of something, like the number of items in a shopping cart, of the level of the zoom on an image. In your case it could be said that they increase the progress of the slider, but that would be stretching it quite a bit. The most immediate meaning of the two buttons is that they move the slider handle left and right. So replacing the plus and minus with left and right chevrons (< >) would be much more effective in conveying both their meaning and their function (i.e. buttons and not indicators).

In terms of UI, there's a number of ways to increase their affordance, but they all mean some sort of compromise to the UI. For example: placing them inside boxes/circles. Giving them the same violet color as the slider handle. Elevating them a little using a drop shadow. But I think that just changing the signs will take you a long way in any case.

2
  • Hey! Thank you for your comment! :) I've thought about < > tho i wasn't sure if it explained well enough. How about +1 / -1? Or it's still not clear enough?
    – Roi Mulia
    Nov 5, 2016 at 12:15
  • Hey Vitaly, i've took yours and all of the others advices, i'm adding a link to my current design. Would love to hear your thoughts. :) s17.postimg.org/gfgsshkmn/…
    – Roi Mulia
    Nov 7, 2016 at 9:10
1

This looks ok to me, but see what your users think.

nextpreviousframe

3
  • Hey Keno. Thank you again. I'm going to test it real quick, and update you asap.
    – Roi Mulia
    Nov 6, 2016 at 8:06
  • Hey Keno, i've took yours and all of the others advices, i'm adding a link to my current design. Would love to hear your thoughts. :) s17.postimg.org/gfgsshkmn/…
    – Roi Mulia
    Nov 7, 2016 at 9:10
  • The controls on the sample image here are usually designated for "Fast Forward" or "Fast Rewind". You can use a <| and |> character to indicate single frame movements. Avid media editors use a similar symbol scheme as you can see on the 3 and 4 keys of this image: bhphotovideo.com/images/images1000x1000/… The 1 and 2 keys indicate moving multiple frames.
    – Dwev
    Nov 7, 2016 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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