User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am currently creating a slider for numerical values. The idea of the slider is, that values are changed by moving the ribbon. Some tests showed that users mostly tried to move the indicator itself and not the ribbon.
Current state of the slider:
How would I visualize that the indicator is not movable?
I would have also moved the round indicator. Even though the design is very interesting:
Is there a technical reason you can't make the indicator directly draggable? Many applications allow users to grab, slide, drag, pinch and zoom objects directly. So you might be fighting an uphill battle against the expectations that people bring to your application from others.
One thing you can do is to give notches, or marks, so the users can drag the values directly to the left or right.
I think you will have more success with something like this. Reasons –
a. Order of elements - the bar should be above the indicator. The topmost layer will be assumed to be interactive.
b. Stronger visual cues for movement such as arrows.
c. Size of interactive feature – the largest part will be assumed as interactive.
There are a few things about this design that indicate that the "number line" itself should be draggable.
It uses subtle separators that are often used with draggable items.
For example, the first result for an image search for "draggable item ui" is the following, provided by uxdesign.cc.
This item uses an almost identical icon (which I have seen used many times in a similar fashion) to indicate draggability.
The bar fades out on the edges, indicating truncated-but-accessible overflow.
In searching for examples of this overflow fade out UI pattern, I actually saw the design exemplified in the search engine itself.
The first and second rows of filters actually employ the subtle fade indicator to show that the items extend beyond the edges, and uses a dragging gesture to interact with it.
There isn't a clear alternative for how to interact with the element.
The - and + indicators are too small to notice at first glance. The item below uses a "menu" icon, and even knowing that it's draggable, I'm still not sure what would happen if I clicked and dragged on it. How far would the value move? Would the thing I clicked on move, or the ribbon above?
Instead, I'd suggest that you were exactly right to perform this testing and observe their difficulty—let the users influence how you design this element. Your path going forward should embrace the users' instinct to drag the ribbon.
I'd suggest allowing the ribbon to be draggable, and show an indicator of the selected value above.
Something similar to the following might be worth testing.
The bar can be draggable, as your users desire, but the input above can serve both as an indicator for the current selected value, but also an input device for minor adjustments via the - and + buttons, or possibly large adjustments by typing in a specific value.
IMHO, I don't think moving ribbon over indicator is good interaction as it contradicts general mental model of moving marker over a range of values. e.g. setting temp. on thermostat, volume on audio mixing device etc.
However, if you want to stick to moving ribbon -
1) Do not show indicator as a control, just making number bigger would suffice rather than having a circle around it. Users move indicator because it looks like a control.
2) Or best way, separate it from ribbon by some distance
3) Or just show a pointer/needle in the middle (like you have shown) without highlighting number on pointer
Edit: On touch based devices, it makes sense to move ribbon if you can not show all range values in single view. e.g. setting date/time on mobile clock
Like others have pointed out, the design of that circle and the thing attached to the bottom that make it seem like an affordance. The ribbon has to compete with this thing as the way to control it.
Arrows at the ends of the ribbon should indicate the ribbon will move without changing the center of the design.
I don't know what your color scheme is so I used a color from the example. The arrows cover the ribbon mid-frame to indicate there's more frames.
This article about good slider design might be a good place to start -- and it looks like this one would be best as a segmented slider. You mentioned in another article that you're trying to keep this consistent with the rest of the design, could you give us a screenshot of the rest of the design?
https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
