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
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?
Answer
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.
No comments:
Post a Comment