How to differentiate between button and label

Question

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

Previus Design

Answer 1

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:

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

Answer 2

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:

Answer 3

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.

Answer 4

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