Does A Slider Control UI Element Like This Exist -- The Joystick Slider?

Question

A standard slider, such as an html5 <input type ="range"/> or its many javascript-enhanced brethren, works by providing a handle that you slide between two endpoints, typically with your mouse or with your finger on a touch device. This controls a value by moving that value between the range of values defined by the endpoints. Importantly, the handle you slide is visually proportional to the numeric value it controls: If the handle is visually centered between the enpoints, the value it controls will also be exactly halfway between them.

A Problem With Standard Sliders

One problem with these sliders is adjusting the value to a precise number. Consider a 0 to 100 slider on a typical iphone. It's pretty easy to move it to within plus or minus 3 of your target value, but getting it exactly right is tricky, and you'll often over or undershoot by a couple points. Even if you do nudge the slider to your exact target value, it will often shift a tiny bit when you lift your finger from the screen. One solution to this problem is to add "+1" and "-1" buttons under your slider, so that the slider can be used to get close to the target value, and the buttons can be used to finish off the job exactly, as pictured here:

But this feels clunky both visually and experientially.

An alternative: The Joystick Slider

I am imagining a slider control that looks similar to a normal slider, but operates differently. The principle I'm imagining would be analagous to a remote control airplane joystick:

When centered, the joystick has no effect. When moved to the right or left, it would increase or decrease your target value. The farther right or left it get pushed, the faster this increase or decrease will be. Like this:

Questions

1. Do you think this is a good solution to the problem presented above? If not, what are other alternatives?
2. Have you ever seen such a UI element used on a website or mobile app? Can you link to any examples?
3. What would be a good way to visually indicate how such a control worked? Eg, to distinguish it from a standard slider.

Answer 1

I think sliders are bad practice in general when it comes to selecting a precise number.

A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 5. — Microsoft

Sliders are functional when it comes to something like volume, where the exact number doesn't really matter. I know I like the volume on my TV somewhere between 10 and 15, it doesn't really matter.
But when selecting a quantitiy, it becomes a different matter entirely. I once came across a concept app for grocery shopping. The user could select the quantity with a slider. You normally want to buy an exact number of certain item, not somewhere between 10 and 15 items, no, you want exactly 12 eggs.
The problem with that particular case was that a slider was easy in use with a low range of numbers. If the range was from 0 to 10, you could easily make the steps in grids so the number would be easily to select. But when selecting an amount of items, where should the max be? Some people buy their groceries in bulk, other don't.

You mentioned some people add +1 en -1 buttons to sliders. That just gives me the shivers. It's like tying a ribbon around a pig to try to make it more pretty. You shouldn't go adding stuff to something that is already broken trying to fix it. You'll just make a bulky mess.

Therefor I kind of like your idea. The alternatives to sliders are normal input field or numeric input field with the arrow up and down to increase or decrease the number. But the first can be considered cumbersome and the second doesn't work on touch devices.

My only concern is it's sensitivity. Holding something down on a touch device can be difficult. I don't know how difficult it is on a technical level to detect the touch-and-hold event. But on a practical level it could be difficult for the user to use. People aren't always sitting in a chair when using their phones. They're walking or they're in the bus. Keeping connection with your screen can be difficult when you're on a bumpy road.

A similar concept without the need of having to hold your finger down would be a slider you control by making long or short swiping gestures.
A long swipe gesture (over X amount of pixels) will move the sliders faster and further depending on the speed of the swipe. Short swipes will move the slider by +1 or -1.

Answer 2

If I recall correctly the YouTube app for the iPhone (when it was still developed by Apple) had a similar concept for its time slider: Swiping horizontally would move the slider and dragging vertically would control its sensitivity.

For example when you grab the sliders thumb and drag it 20px to the right it will move by 20px (like every other slider). If, however, you grab the thumb move up by 20px (the thumb won't move) and then to the right by 20px it would move the slider by only a few pixels.

You'd need to explain this feature to the users somehow as it is an unusual concept at first but once you got familiar with it it's pretty convenient.

Answer 3

First off, I have to say that the slider wasn't meant for fine granularity. They are best used when there are only a few values to choose from, a slider between 1 and 5 for instance. Granularity will kill a widget like a slider. Like you said, the solution to this is to add a +/- button to afford the user that granularity but that's just an experiment in making things more complicated than it has to be.

Video editing apps use a concept like the one you suggested when scrubbing video. It's great for getting to the general area you want to get to but not useful when you want to be exact. that's why video editors scrub to the general area then use a second control to get to the exact spot in time. Also, not very good with granularity.

Sliders do not offer much in terms of good user experience. You spend so much time fiddling with the controls to get to an exact value that you end up frustrating quite a few users who can't get that level of granularity because of a lack of dexterity. Section 508 will puke on this as well.

My question is this: Why not just use a text input box? It seems to be far simpler and quicker to just type 51% into that box. It's easier to design, easier to implement, and easier to make 508 compliant.

An alternative to a text box, if you feel the need for some visual sexiness, is a mobile ready widget like mobiscroll. It allows the quick flicking to get to the general area and the drag control to get to the exact value.

Here's an example of the mobiscroll widget I was referencing: http://demo.mobiscroll.com/temperature/temperature/#