Number in Range Input

Example of the Number in Range Input UX pattern.

Problem

People need to provide a number that is limited within an upper and lower limit.

Solution

Provide a control that guides people to enter an acceptable number within a given range.

Context

The target audience does not know the acceptable ranger or value type.

Rationale

This pattern works by providing visual cues to users to indicate what the upper and lower limits are in the range and what acceptable values are in between. Without these, people would have to guess and wait for validation feedback, which is cumbersome and annoying.

Implementation

Determine the range and acceptable increments as well as the value type (e.g., percentage, currency, integer, decimal, etc.). Think about if there is a domain-specific representation for your range. For instance, stars used for ratings are a common visualization. If you were counting some other object, you could use an icon of that object in a similar manner as the star ratings. If it is, for example, a percentage of a whole, you could have an empty container of some sort that would fill as someone dragged from 0/empty to 100%/full. If you’re measuring temperature, you could show a thermometer. These kinds of visualizations can help make the range input more natural.

If it is just a number, it’s common to use a slider or spinner, as shown in the examples.

The key things to communicate are:

The range (i.e., the minimum and maximum values).
The acceptable value types (such as kind of number), which can be controlled unless you provide direct manipulation with a text box, in which case it is more important to communicate this.
The increments – you can explicitly communicate this or just provide feedback by changing a visible value as people use the affordances to change the value.

If your audience is familiar with the kind of number and range, it can be better to just let them provide it directly rather than requiring a more complicated interaction with a range-based widget, so be sure you’re not encumbering people rather than helping them—know your users.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Number in Range Input pattern is implemented in the following ASP.NET control: WebSlider. Check out the samples browser to see it in action.

This pattern can be implemented using combination of any numeric ASP.NET input control with min and max value settings. You can also attach a regular ASP.NET range validators with these input controls as well to restrict control input values.

Silverlight

You can use the NetAdvantage for Silverlight xamWebNumericEditor for this.

Windows Forms

You can use the NetAdvantage for Windows Forms WinEditor controls with spin buttons to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Spin Increment to see it in action.

Examples

Pandora uses a very simple thumbs up/thumbs down metaphor. If you select thumbs up, it replaces it with a check mark. If you select thumbs down, it simply goes to the next song and (I think) does not play that song for you ever again.

http://quince.infragistics.com/11c1

This example shows the use of a progress bar in WPF styled to look like stars as part of the Infragistics WPF exemplar, Tangerine.

http://quince.infragistics.com/11ee

The primary example shows a common usage of this pattern —ratings. This can be done as simply as using radio buttons to something as fancy as the stars shown in this example. These show a really good approach by clearly displaying the lower and upper limit, and they use a preview (Invitation) letting people know what the star their over means if they choose it and showing what it will look like by filling in the stars up to that point—very effective.

http://quince.infragistics.com/11eh

Example of the Number in Range Input UX Pattern

The slider is an obvious metaphor. The position of the value in the range is shown visually. The user cannot enter a number outside the range. On the other hand, it has high space consumption; the way to operate it with the keyboard is not obvious. It is generally best to show the numbers, both the max and the min as well as for either each stop point or some interval between them, and while dragging, it is helpful to show the value of where the slider is currently positioned to help people know where to stop. It should also respond to keyboard arrows to manipulate the value.

http://quince.infragistics.com/11ev

Example of the Number in Range Input UX Pattern

This slider with a text input formalizes the feedback of the currently-selected value by showing it in an adjacent text input and conversely updating the slider if the value is directly manipulated. It makes up for the deficiencies of the slider by itself. Would still probably be desirable to show upper and lower limits at least.

http://quince.infragistics.com/10x0

Another fairly common approach is using the “spinner.” The values are constrained to be in range when buttons are used. Its glory and its bane is that it has low space consumption. To be so small, the buttons are tiny and are hard to target correctly, even for experienced mouse users. One way to overcome this if your platform supports it would be to give the buttons magnetism so that they grow larger as the mouse approaches them to meet the mouse make it easier to target. It should also respond to keyboard arrows to manipulate the number.

http://quince.infragistics.com/11d3

This one uses a Drop Down ChooserDown Chooser with a slider on the dropdown.

http://quince.infragistics.com/113v

Example of the Number in Range Input UX Pattern

FanCast provides a way to select the rating by selecting words instead of numbers. Dreadful maps to 1 start, Awful to 1 ½ stars, etc.

http://quince.infragistics.com/11d5

Example of the Number in Range Input UX Pattern

Bret Victor suggests using whiskers to provide information about the distribution of values, not only the average. This helps a better understanding of how users rate the item.

http://quince.infragistics.com/11fq