Range Slider

RSS

Solution Elements

Comments

Problem Summary

A range selection with slider is used when the user needs to narrow a large set of results by setting a quantitative range of values (e.g., between X and Y, less than X, etc.).

Usages

When the values of the facet are quantitative and are continuous or semi-continuous.
When users would benefit from a dynamic display of the range of dimension values as information scent.
When users will likely need to define a specific range of facet values rather than discrete single values or predefined ranges

Constraints and Challenges

System performance should provide for almost no lag between slider endpoint movement and updates to the values for the endpoint.
Range selections may return zero results if the user selects a very narrow range within the two boundaries. Preventing zero results requires extended design and technical features.

Solution Elements

Expand All

Clearly label the dimension to help explain the purpose of the slider and provide a call to action.
- Consider including the word "range" in the label, e.g., "Select price range".
Show More...

The design of the slider must include obvious "handles" that invite user interaction.
- The range slider handles must look "grabbable" and movable to users.
- There should be enough space on the screen for users to easily move the handles.
- The handle values must be clearly and meaningfully labeled.
Show More...

Provide one or two slider handles for a dimension based on the appropriateness for that dimension.
- One handle allows the user to select an open-ended range with an upper or lower limit, e.g., "Greater than X" or "Less than X".
- Two handles allow the user to select a specific range of values.
Show More...

Determine a series of intervals for the range of values and "snap" the handles along a reasonable interval.
- For instance, a price slider for laptop computers may have intervals for every $100, while one for homes may have intervals for every $10,000.
- Ensure that the granularity and range of the scale are appropriate for slider use.
Show More...

Provide feedback on the user's current slider selections.
- Consider labeling the current high and low selections above or below the respective handles.
- Alternatively, consider including the selection in the dimension's label, e.g., "Vintage: 1986–2006".
Show More...

Consider displaying a histogram to graphically illustrate the record counts for each value to promote information visibility.
- The histogram bars must be easily distinguishable. The relative height of each bar indicates which values will have more or fewer results.
- Consider allowing the bars of the histogram to be selectable. Clicking on a bar should snap the nearest handle to that point.
- Consider showing the record count on histogram bar rollover to provide detailed information scent if user goal achievement would be enhanced by this level of granularity.
Show More...

Execute the refinement either upon release of the handle or by requiring the user to select a "Submit" button.
- If the application allows for dynamic updates (e.g., via AJAX), execute the refinement upon release of a handle. The system must perform quickly enough to provide little to no lag between handle release and result update. If there are two handles, execute two refinements -- one for each handle release.
- For dynamic applications, provide feedback to the user that the number of results has updated. Consider a modal status message above the list of results; "Updating your results" or "Finding cars" are good examples.
- For non-dynamic applications, include a "Submit" button in close proximity to the slider. Allow the user to move one or both handles and then execute the refinement when he selects the button.
- If the user makes another screen action before clicking the "Submit" button, ask him to confirm his range selection. Consider a modal status message over near the slider; "Do you want to apply your selected price range?" This message should be paired with "Yes" and "Cancel" buttons.
Show More...

To reduce the likelihood of returning zero results, provide feedback to the user before the refinement is executed.
- Consider showing the number of results that match as the user is dragging the handle. Display this information in close proximity to the slider.
Show More...

If the executed selection returns no results, provide suggestions to widen the range.
- If possible, consider using a modal window before the page reloads to enable the user to quickly self-correct (e.g., "No products were found from $20-$25. Please widen your price range and try again.").
- Otherwise, place clear directive text on the "zero results" page.
Show More...

Allow the sliders' endpoints to vary only between the minimum and maximum values of that facet in the database.
- This provides the user with a better understanding of the result set and reduces the chance of selecting a range with zero results.
Show More...

Top

Comments (0)

Expand All

Related Patterns

Faceted Navigation: Vertical Stack

Faceted Navigation: Open Parametric

Additional Examples

Isobar's Single Screen Selector Demo

Isobar's Single Screen Selector uses rich Internet technologies and AJAX to create an experience that helps users quickly navigate to a desired product and also encourages enjoyable exploration.

Range Slider

Problem Summary

Usages

Constraints and Challenges

Solution Elements

Clearly label the dimension to help explain the purpose of the slider and provide a call to action.

The design of the slider must include obvious "handles" that invite user interaction.

Provide one or two slider handles for a dimension based on the appropriateness for that dimension.

Determine a series of intervals for the range of values and "snap" the handles along a reasonable interval.

Provide feedback on the user's current slider selections.

Consider displaying a histogram to graphically illustrate the record counts for each value to promote information visibility.

Execute the refinement either upon release of the handle or by requiring the user to select a "Submit" button.

To reduce the likelihood of returning zero results, provide feedback to the user before the refinement is executed.

If the executed selection returns no results, provide suggestions to widen the range.

Allow the sliders' endpoints to vary only between the minimum and maximum values of that facet in the database.

Comments (0)

Leave a comment...

Your comment:

Related Patterns

Further Reading

Additional Examples