2

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: The slider in question

How would I visualize that the indicator is not movable?

5
  • What part of this are you referring to as the "indicator"? Is that the number line, or the item extending out from it? Commented Aug 26, 2019 at 13:11
  • @maxathousand the indicator is the non-movable circle with the 0 in it.
    – Octfx
    Commented Aug 26, 2019 at 13:12
  • Is it touch interface or desktop? User are behaving like their mental model - generally we move "maker" over "range" to set it. Commented Aug 26, 2019 at 13:33
  • The slider should be usable in touch enviroments aswell as on the desktop
    – Octfx
    Commented Aug 26, 2019 at 13:37
  • 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 Commented Aug 26, 2019 at 13:47

7 Answers 7

6

I would have also moved the round indicator. Even though the design is very interesting:

  • Find a way for the indicator to lose the button feel
  • Exaggerate the draggable points marks
  • Or try to simulate the numbers as draggable buttons

enter image description here

1
  • 1
    Thank you for your input, I can't really loose the rounded indicator as it's an integral component of the overall menu design. That being said, your answer definitely helped me understand the core design problem.
    – Octfx
    Commented Aug 26, 2019 at 14:39
4

If users are trying to manipulate the indicator, it's a sign that you might want to conform to their mental model.

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.

enter image description here

1
  • That is indeed true. The plan is to use the slider in a pie menu. Every menu entry has a defined sector, moving the indicator too far would create the issue of letting the indicator leave its designated sector
    – Octfx
    Commented Aug 26, 2019 at 13:41
2

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.

enter image description here

1

Why does this element appear draggable?

There are a few things about this design that indicate that the "number line" itself should be draggable.

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

    draggable item UI, showing a drag indicator

    This item uses an almost identical icon (which I have seen used many times in a similar fashion) to indicate draggability.

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

    overflow contents fade to show it extends beyond the end

    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.

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


What to do about it?

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.

draggable bar with input above

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.

2
  • While I like the thoroughness of your answer I think there is a slight missunderstanding here. Values in the slider should be changed by moving the ribbon, users want to move the circle instead. But: Your 'what to do' section gave me some ideas for moving forward with the overall design!
    – Octfx
    Commented Aug 26, 2019 at 14:41
  • 1
    @Octfx Ah.. yes... that would be exactly what you said when I asked for clarification (this is going to be a long Monday)... Well, my suggestion would still be the same: Separate the indicator from the draggable ribbon. I'll try to update my answer soon. Commented Aug 26, 2019 at 14:48
0

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

enter image description here

1
  • 2
    The reason it works is not that the entire ribbon isn't visible, but that it looks like a spinning wheel mechanism.
    – 習約塔
    Commented Aug 26, 2019 at 16:02
0

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.

enter image description here

0

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/

Your Answer

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

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