forms - Slider control when there is no maximum value

I'm trying to design a control where the user can enter a figure that has no maximum value. For example, how many miles that person wants to travel that year.

There's a text field there for direct entry, but I want to make this tweakable. The control updates another field in real-time, so as they make changes to this 'miles' field it updates a map elsewhere showing how many times around the world that works out as, or how far towards certain countries it would take you. That sort of thing.

Text fields aren't very 'tweakable'. But because the total in the box could be anything (it could be 10, it could be `10,000) going with standard +/- options would be pretty painful. so I added in a slider to adjust the value that way.

^{download bmml source – Wireframes created with Balsamiq Mockups}

However, the drawback with a slider is that by the very nature of the control there is a maximum value. So I tried to come up with an alternative.

My idea was to mimic a horizontal 'thumbwheel' - the sort of scrollable cog you get on volume controls (or the mouse scrollwheel too) but one with no end - it just keeps rotating as you scroll:

^{download bmml source}

I designed it so that when the user gets to the end the thumb drops back to the middle, or when they let go of it the thumb returns to the middle again, so that they could then scroll to the end again, then repeat ad infinitum.

Unfortunately, this is suffering from the same issues as the slider. Usability testing finds that people still treat this control like a slider - pulling it to one end of the bar and not letting go, or not understanding that it can be used in the manner I had hoped.

I think my metaphor of a thumbwheel may not have been ideal here. Unfortunately I only have horizontal space to work with. So what am I doing wrong? Is there a better control I could go with to allow the user to adjust the text figure up/down?

Because the total in the box could be anything (it could be 10, it could be `10,000) going with standard +/- options would be pretty painful.

Answer

I've always been enamored at the way the iOS quicktime application works when viewing MP3s in Safari, and I think this method can be adapted for your use. We can stay with a normal slider bar - perhaps the handle could be changed from the normal circle to show a difference. We can add tick marks to the bar and numbers that change on either end. Then, instead of having the user drag a moving marker along the fixed slider bar, we can flip the equation - fix the marker and illustrate a movement on the slider bar by animating the ticks. We allow the user to slider their finger / mouse off of the marker and use the y axis of this input to adjust the scrubbing speed - the further offset the mouse / finger is from the marker, the higher the scrubbing speed in the given direction (we can use the x axis to determine forward / backward). We can even offset the marker visually a bit to illustrate the current direction of movement. The ticks animate, and the numbers on either side change to illustrate the current range.

Reasons I feel like this might work:

• The variable range you mentioned is present


• It allows for fine tuning - simply move your finger closer to the bar when you want the multiplier to be lower

Reasons why it might be confusing:

• It might not be immediately apparent that you can move your finger from the slider bar to adjust values, and there may be a confusion because the user is used to dealing with slider bars and this one behaves differently.


• It may be a more difficult analogy with a mouse pointer instead of a finger

I don't have an iOS device, so I've included a small sketch as well to (hopefully) better illustrate this.