0

I have an application that uses round knob style range sliders like these:

enter image description here

You can see an example of this slider here.

To adjust the range - the user clicks or touches the slider, and drags directly up or down.

Now - I believe I have a good reason for using these sliders. The application is primarily targeted at mobile users, the the round style gives a larger target area for thick thumbs. Also - the round style allows me to use less height, at the cost of more width.

However - what I've noticed is that users will often try do a circular interaction with the slider, and really struggle with it.

Is there a way I can improve the sliders such that the user knows how to use them correctly?

Improve this question

1 Answer 1

Reset to default
3

Change the design to match the users' expectations and behavior; don't try to change the users to match your design.

You have a mismatch between what those sliders look like they do, and what they actually do, and your user testing has confirmed that that's a problem. You need to either support circular interactions on your radial sliders, or design linear sliders which visually match the linear interaction you currently support.

The target area is a red herring -- a linear slider could take up exactly the same dimensions and offer exactly the same size affordance as those circles. The proof of this is that that's actually what you're doing right now -- the affordance is linear, the interaction is linear, it's just got an illustration of a radial design on top of it. (And linear is fine for mobile. Compare for example the volume, brightness, etc sliders in the latest iOS: they're all big, chunky rectangles, plenty of room for any size thumb.)

If you like the circular shape for aesthetic or branding reasons, that's fine, just fill it from bottom to top to match the real interaction, instead of faking a radial design on a linear slider.

Improve this answer
3
  • +1: also a problem is one of coordination; with the discrete values a user is trying to enter requires much scrubbing, even in a horizontal slider. In this case a single text input field showing helper text with the mix / max values is unambiguous.
    – Mike M
    Commented Nov 12, 2017 at 1:32
  • I'll point out that there are a couple of differences between these sliders and standard vertical sliders. 1. An ordinary slider often has a 'tap to jump' interaction'. 2. An ordinary slider, dragging the slider can only exist within the bounds of the slider. This slider allows the user to scroll all the way up the page, if needed (or multiple scrolls).
    – dwjohnston
    Commented Nov 17, 2017 at 5:00
  • That doesn't change my answer at all. If anything #2 makes it even more important that the linear action look like a linear action rather than being disguised as something else.
    – Daniel Beck
    Commented Nov 17, 2017 at 12:56

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