Slider control when there is no maximum value

Question

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 1

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.

Answer 2

Well, I guess there is a maximum number of miles someone can travel in a year, since there are a finite number of seconds in year, and one cannot exceed the speed of light.

A more practical limit may be 1000 miles every three days, which would be about 100,000 miles in a year.

I suggest using a normal slider but with a logarithmic scale.

i.e. equal spaced notches for the following values:

0, 10, 100, 1000, 10000, 100000

Or if you need more resolution, then:

0, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, etc.

ALTERNATIVELY:

You could have plus and minus buttons and a number.

[-] 5000 [+]

Plus increases the most significant figure by one (minus reduces).

You will only get a subset of numbers though:

1,2,3,4,5,6,7,8,9,10,20,30,40,50,60,70,80,90,100,200, etc.

then 300-900, 1000, 9000, 10,000-90,000 and so on.

Answer 3

One interesting solution that hasn't been proposed yet is a sort of "odometer" that the users could set to the desired number. This would have the benefits of preventing users from having to scroll through smaller numbers to get to larger ones, allowing users to be as precise as they wish, and being as simple as plain text entry without messing with a keyboard.

You can make it so if the user click on the top or bottom of a number, it would swivel to the next number in the direction desired. In addition, the user could drag a dial up or down to match the number they want. I admit this solution isn't "infinite" like was originally requested, but you could add enough dials to be reasonably sufficient, or you could add a + button on the left if the user wants a greater order of magnitude.

Answer 4

Reading @Henrik Ekblom's comment about circular controls reminded me of how the Timer app works on Android phones (image below is from the Timely app). You can add as many minutes/hours to the timer as needed by continuing to drag the cursor in a circle around the clock. Obviously the circular format works a lot better for clock-like functions, and it could be more difficult to use with a mouse-based interface rather than a touch-based interface.

However it remains the best example of a control for specifying a specific amount with no maximum. Depending on what numbers you use for labels and where you place them, you could give users the control to be as specific as they'd like.

The biggest downsides to a circular control is it takes up considerably more space than a horizontal slider, and it is strongly associated with clocks and time.

Answer 5

I suggest you replace the slider with a dial by removing the thumb indicator and adding arrowheads on either side so it looks something like this:

I use a program at work that uses a similar dial to control frequency during an online simulation, and I've never seen anyone get confused with it. Here's the interface:

Answer 6

It seems like your users need something that first selects a less detailed milage area, with big steps. When that area is selected it's time to fine tune. One way of doing that could be something like my image below shows.

As soon as the user clicks and drags in the span control (A), the red marker follows and a more fine tuned area (B) shows up. The user can move the mouse up to area B to fine tune the milage.

(Blue text is comments)

Answer 7

I like your general idea, but it seems that your users are not getting the metaphor. Which leaves you with two options:

1. Make it very skueoumorphic, hoping that they will get the hint. Instead of using a slider, use something which looks like a physical lever that can be pushed more or less to the left (or right), and beside it a spinning number display like the one from Chase Sandman's answer, which turns quicker or slower depending on how far the lever is pushed. It will probably take the point across, but it's very showy, and will probably not fit with most designs out there.

2. Forget about the metaphor altogether, and use a simple, straightforward digital control which has nothing to do with a thumbwheel. This would be my preferred option. My first attempt would be just a few incrementing and decrementing buttons:

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

With the steps I am showing here, it is semantically equivalent to the spinner proposed by Chase, with the downside of taking up more space. But it is more flexible, because it can choose the steps as you want and not only in powers of 10 - for example, you can have +1, +10, +50, +250 or whatever makes sense. As for the infinite number, I'd say only start with numbers which make sense for the usual range, but show additional buttons once the user reaches an unexpectedly high number.

It is probably a nice touch to make these not just normal buttons, but have them increment steadily when long pressed, like the controls of some physical watches. While this feature will have low discoverability, the ones who discover it will probably appreciate the playfulness (you said that you want to introduce some, so I assume it's OK with you), and the ones who don't discover it are not prevented from efficiently entering the information by multiple clicks.

You will have to test this suggestion against some of the others proposed here before finding out which works. I haven't seen it in practice and so cannot guarantee it has no gotchas.

Answer 8

I might be missing something (you might have been referring to this when you said "standard +/- values"), but this seems like the perfect use case for a spinner:

The design of the spinner is such that "the appearance of the spinner at a given time does not represent the quantity of the associated value" (Wikipedia). Thus, you wouldn't run into the problem you currently face with the slider, which has distinct endpoints.

Furthermore, spinners make it easy for users to select any value (large, small, precise) because they have several ways to input the value: directly entering it into the text box, clicking the up/down buttons, and pressing the up/down arrows on their keyboards. If they want to scroll quickly through the options, they can hold down a button/key. Finally, spinners are a well-known UI object, so users already know how to interact with them.

Answer 9

EDIT

Whatever number the user enters into the text box, that is the middle value of the slider. They can tweak that number by sliding left (for less miles) or right (more miles). How much distance to place between the middle number and the upper and lower ranges is up to you.

---

In your case, there is a maximum number.

1 Year is 365 Days or 8,760 Hours available as travel time.

The average speed of an airplane is 550 mph.

A Boeing 777-200LR is a long range passenger jet, and its maximum distance with load is about 10,800 miles, or about 19.6 hours assuming its traveling at the above speed.

So even if literally landing and then immediately taking off (and somehow refueling instantaneously), a 777 can go its maximum distance ~447 times.

Thus, ridiculous yet defensible, the maximum distance a person could travel in a year is 4,827,600 miles.

How about this:

Let the user (or your default) set the maximum number for the slider. So the right side value of the slider is always equal to the text field. That way, people can either enter in the number, or increase it and see what happens when they lower it. You could also try the variations of this approach.

Answer 10

Put a logarithmic scale on the slider. Larger values rarely need to be precise, so you can put a quite large upper limit on it. Take the largest conceivable value for this input, add 50%.

In response to the system wanting volume rather than substance, I will restate what I said in the above paragraph.

The question wants a scrubber/slider-style control, but with a very high upper end. If you put a logarithmic scale on the scrubber you get both detail at the lower end and a very wide range at the upper end. This is what "logarithmic" means. Significant-figures rules say we rarely need "104,253" - 100,000 is usually good enough, but 20 vs 25 is important.

Answer 11

Hopefully I understand how you've implemented your "thumbwheel" concept so that I'm not simply rehashing the same idea, but the following concept comes based largely on what you've already laid out.

At the moment, the way that you've designed the thumbwheel means that to get through large values (such as when adding 10,000 miles), you would need to repeat the same action a number of times (dragging to the end and letting go), which could be an issue for users due to the fact that repeating this task numerous times could become fatiguing. A better solution to this might be to use the same concept, but instead of increasing the value only after the user has dragged to a certain point and let go, you continually increase the value while the user is holding the circle away from it's central resting point.

To elaborate, this would mean that while the circle stays in the centre, the value doesn't change at all. If you drag the circle slightly to the right, it increases the value based on how far you have moved the circle away from the middle, and it does this every x milliseconds. This means that the user can move the circle a certain distance and then wait while the text field increases in increments of only a small value, or they could move the circle to the very right hand side and wait while the value increases very quickly.

A real life example of this idea can be found when scrolling using middle mouse click on web pages. If you go onto a sufficiently long page, click the scroll wheel down and then move the mouse either up or down, you'll see that if you only move a small distance, the page behind will move in the same direction at a speed that represents the distance between the start point and current point of your cursor. In this case, the cursor represents the proposed control, while the page behind represents the counter that is being incremented or decremented (the comparison is a bit of a stretch, but it's relatively hard to explain otherwise).

The benefit of this kind of approach is that users can move large amounts by moving the slider to the very right hand side and holding it there, stopping (or slowing down) when they are close to the value that they want. It also bypasses the issue of having no maximum value, as the value can continue to increase as long as they manipulate the control.

This idea isn't a new one, but I am unsure of what name the control has traditionally been given. I'm also relatively sure that I've seen it applied physically in the past, although I'm not entirely sure where.

Answer 12

I propose that you display (1) a position indicator (displaying a number of miles, for instance) and (2) a "speed knob" (a thumb on a slider).

Let's suppose that the speed knob position goes from -1 to 1. Then when it's in position x, you increase, once per tick of some clock (e.g., once every 60th of a second) the position indicator by an amount Ctan(pix/2) for some value C that you choose by experiment, and which depends on how fast you want people to be able to move. As x approaches 1 and -1, this rate of increase will go to plus-or-minus-infinity, so you can move very fast...but in mid-control, it'll be pretty rational and controllable.

Igarashi once proposed something clever for map-scrolling -- can't recall the reference -- but the idea was that the map scrolled in proportion to how far you moved your mouse...except that when you moved your mouse more, the map "zoomed out", so that your effective speed across the map was very fast.

In your case, imagine having those "tick marks" so that every tenth one was red. You move the mouse to the right, and they begin spinning past...but the distance between them also shrinks a bit...and if you move further right, it shrinks more, with the grey tick-marks fading out, until now you just see the red tick-marks moving...and it turns out that every tenth one is blue...and so on, through multiple levels of scroll. Basically, if you're between positions -1/2 and 1/2, you see grey ticks with occasional red ones; by the time you reach +/- 1/2, you really see only red ticks, with occasional blue ones; that pattern remains as you go from 1/2 to 3/4, at which point you're seeing blue, with occasional green ones; from 3/4 to 7/8, ... well, you get the idea.

Of course, you COULD make the grey ones fade out at first, and the red ones, as they get closer and closer together, get more and more grey, with new BRIGHT red ones every ten steps, and so on, so that you don't have to keep inventing new colors.

In short: use a mapping from your available cursor space, which is an interval, to a larger part of the reals -- something like 1 / (1-x^2), or the tangent function I suggested earlier.

Answer 13

How about having two controls--a pull-down or "zoom" control which selects a range or scale, and a slider which selects a number within the indicated range, or of a suitable scale?

Another approach, depending upon the precision with which values must be entered, is to use a logarithmic scale, so that the values 1, 3, 10, 30, 100, 300, 1,000, 3,000, 10,000 are roughly equally spaced. That will allow some reasonable precision at smaller values while still allowing the selection of larger ones.

Answer 14

Any kind of control which presents a visual start and stop is going to be problematic for your criteria. Why not just use scroll to modify the input field? The ratio of pixels to distance units can be customized, and scrolling affords a much more natural interaction than repeated clicking/tapping, or trying to carefully navigate a number line. I've prepared an example to show how it'd work:

http://codepen.io/jessejackson/pen/taAbB

The only things you'd have to modify are:

1. Make it a scrollable element within the flow of your form/page
2. Add an EventListener which would modify the scroll position if the user manually entered a value (so that if/when the user scrolls again afterward, it would begin to modify the value starting at the point the user entered). In this step, you would also add functionality to increase the height of the scrollable element in case the user enters a [ridiculous] value beyond the element's maximum (I started it at 20 000 000).

Answer 15

You could map from a scale [0,1] to [0, Infinity), with the condition that the derivative at x=0 is 0, the derivative at x=1 is Infinity and that y=500 at x=0.5, say. For example, f(x) = 1000*x*tan(0.5*pi*x), which looks something like this:

On this scale, you have the following values:

• 0 <-> 0 miles
• 0.1 <-> 16 miles
• 0.25 <-> 103 miles
• 0.5 <-> 500 miles
• 0.75 <-> 1810 miles
• 0.9 <-> 5682 miles

Of course, there are plenty of other transformations you could use, and you might want to play around with some others. One of the problems is, the further to the right of the scale you go, the more difficult it is to fine tune. A 1% increase at the x=0.1 corresponds to 3 mile increase. A 1% increase at x=0.9 corresponds to a 700 mile increase.