Using sliders to filter results
Sliders in web design are becoming as ubiquitous as the fading yellow highlight. They certainly offer a more interesting and sophisticated way of interacting with a lengthy data set (remember the old days: choose from a drop-down, click Submit, wait, look at new page, click Back button, get lost …).
Some sliders allow changes to the top and bottom of a range of values:
Other sliders are designed to help the user choose a value (especially useful when it’s a hard value to remember):
Yahoo! UI Library - RBG Slider Control
Some sliders even include sparklines (small data displays), a very data-rich approach:
Prisjakt.nu (via IXDA-Discuss):
Other than the obvious cool factor, there are definite advantages to using sliders:
- instant feedback allows the user to focus on the data itself, rather than on manipulating it
- it’s much faster to modify a number of criteria at once (price, bedrooms, bathrooms) while keeping the cursor in one place (compared to a bunch of drop-down lists)
- small changes to the chosen ranges display right away, allowing for faster decision making
There’s always a downside:
- Sliders aren’t good for small adjustments or for choosing very specific values, because they require too much fine coordination (not everyone uses a mouse, and some of us have a lot of cat hair on the mouse’s infrared sensor, which makes it jump around a lot)
- People who aren’t used to seeing sliders may not even notice it’s there, and get frustrated.
Nonetheless, sliders are a very useful design element, so get going and use one! Better yet, use one on every page!