3

The context here is a hybrid Android (v 4.4.x+) app. I have started with the code for the rather well written and documented noUISlider which I have modified to make it look more like a "Material" slider. My choice of this control was dictated by the fact that I require linear and logarithmic sliders that are also easy to control via script. Take a look at the image below

enter image description here

The slider range needs to be altered in half hour increments. This works just fine when I use the underlying code in a web app and use a mouse to move the slider around. However, in the Android phone app (i.e. touch screen) it is well nigh impossible to accurately move the slider - not without a few failed experiments when it gets a too low/too high value. About the only way I can think of addressing this problem is placing, rather fat, + & - buttons at either end of the slider which would at best be clumsy and ugly. Perhaps someone here might be able to suggest more functional and aesthetic alternatives?

  • The problem is in the touch interaction; what/how is exactly not functioning correctly? – Alvaro Mar 17 '17 at 14:18
  • It isn't a question of "not functioning correctly". More an issue with "fat fingers". The slider divisions are packed too close together to permit accurate finger tip adjustments. As you will appreciate - not an issue when using a mouse. Nor a stylus for that matter but few phone users would use a stylus. – DroidOS Mar 17 '17 at 14:24
2

I'd suggest not using a slider. Nielsen Norman published an article on this:

https://www.nngroup.com/articles/gui-slider-controls/

Here's their summary, which might tell you all you need to know:

Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.

Having said that, the best "fine control" slider I've seen is on Youtube's long videos.

While holding down the slider thumb, you can move the mouse up, and the person's view of the slider essentially zooms in. This means that the same movement range left and right is now selecting from a smaller section of the overall value range.

If you'd like to try it, find any Youtube video that's an hour long (On the desktop website), click and hold on the slider thumb, and drag the mouse upwards. The slider will expand vertically.

This isn't ideal, though: No-one knows it exists because there aren't any signifiers, and you'll probably run into the same issue.

  • Thank you for that insight, the nngroup article and the description of how the youtube "fine control" implementation works - like 99/99% of all humans I was unaware of it. I have now thought of my own solution to this issue which I will post here along with a demo in a day or two. – DroidOS Mar 18 '17 at 4:04
  • +1 Really interesting approach in the Youtube video. It is very useful, but I wonder if I would have noticed it without knowing it beforehand (it has arrows pointing up as a hint, though). – Alvaro Mar 18 '17 at 12:03
  • I am accepting your answer because it put me on the right track - and that apart thank you for the Nielsen Norman link. – DroidOS Mar 21 '17 at 10:04
  • To complete this thread I would like to mention what I eventually did. The problem with highly granular sliders is that on small touch screens (phones) fat fingers get in the way of using them with any semblance of accuracy. One way to get round the issue is to use a circular slider which effectively allows you to increase the track width by a factor of 3+. I used the well documented and beautifully implemented rounduislider in a popup dialog. It works a treat – DroidOS Mar 21 '17 at 10:08
0

If the step in the range is too small for the finger you could:

  • Use a higher step: an option might be to break the slider in two
  • Remove the range: either use a different element or remove the step
  • Remove the step while the user is interacting: it is difficult to tell without interacting and testing it, but I guess the problem is the slider is "jumping" between the predefined steps. If this is the case you could remove the step "jump" while the user drags while the numbers keep showing the values in steps (from 30 minutes to 30 minutes).
0

Slider with plus and minus

You might consider adding a plus or minus to the slider so that the finger can select the exact time with less effort.

Another option is to provide another control that determines the increments that the slider moves. This might take a little getting used to, but will provide the functionality that you need.

Slider with calibrator to the right

The idea here is that the '30' is the increments that the slider moves and the knob to the right of the number allows the ability to change the increments for the slider. For time, I might make the increments 1, 5, 15, 30, and 60. Move the calibration knob up and the slider increments increase, down to decrease.

Or this could all be overkill and not work at all - I have not tested this.

If you would like to try it, please let me know if it does or does not work for you.

  • Thank you for both suggestions. Some form of secondary control to allow fine adjustment is probably in order. Both suggestions here would be useful - if only this were not a range slider. However, if - for instance - the user wants to set a "quiet time" from 06:30 to 09:30 this becomes an issue. Putting in one "fine adjustment" control of some description is doable. Two would look downright clumsy. – DroidOS Mar 17 '17 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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