The why, when, and how of using slider controls in your web and mobile UI design, plus helpful tips on prototyping sliders with Justinmind
Think your UI design can do without sliders? Think again. We use sliders every day in our web and mobile user interfaces to define preferences, filter down searches and make decisions. With user-driven touchscreen technology taking center stage in web and mobile UI design, sliders have become a standard.
Slider controls make our devices more intuitive, which makes our web and mobile user experience more delightful. From adjusting our screen brightness to warming up that fading summer tan with Instagram’s color enhancing features, we have a lot to thank slider controls for.
Just imagine where we’d be without great slider design. No, scratch that – just take a look at these monstrosities:
Image credit: Designer News
Image credit: Designer News
Quick, avert your eyes! To save your UI design, we’ve put together a helpful guide for designing and prototyping slider controls with Justinmind. You’re welcome!
What is a slider in UI design?
Slider controls allow the user to select and adjust a value or range of values within a user interface. They indicate inclusion, progression or growth in size or intensity, exclusive or inclusive of preceding options. They can also be used to specify maximum and minimum values for an item or service.
Sliders are designed with a horizontal or vertical track with a thumb that the user either clicks or taps, holds and moves either across or up and down the screen to adjust the value. Designers often use prototypes to build sliders into their UI designs, with tools such as Justinmind.
A classic example of website sliders is the price selection slider, often used in travel or accommodation sites, such as Skyscanner or Airbnb, to assist users in purchasing travel tickets or renting accommodation.
Take a look at the Skyscanner example below, which allows the user to adjust the outbound and return departure times of flights, as well as the journey duration (when possible). This makes their search more specific, saves on time and makes their all-round user experience better.
Why use sliders in your UI design?
The main reason to include slider controls in your web or mobile UI design is because they are intuitive. Sliders are often used to translate an action from the physical world, say turning up the volume on a stereo or keyboard, to the digital world touchscreen.
“Users like sliders when the metaphor of a slider is applicable.” Nick Babich
Sliders improve the user experience by making interactions that might otherwise be difficult to communicate to the user more instinctive. With sliders, users can easily visualize options and put them into context more quickly than with buttons or text input.
Moreover, sliders are particularly effective in mobile UI design, because they are space savers. They can immediately expose a variety of options neatly and concisely.
How to prototype sliders with Justinmind
Designing your price selection slider
We’re going to create a price selection slider, similar to the Airbnb ‘sort by price’ feature. In our example, as the user moves the thumb from left to right, the price increases and the thumbnails change as the value is adjusted.
Before deciding to use a slider, ask yourself:
- How much space can you afford?
- How you’ll design the thumb, track and labels
- How will you avoid dead ends?
- How will your slider track change with thumb movements?
To reproduce our example, the first thing you’ll need to do is download Justinmind. Then, create a new web prototype.
Drag a rectangle widget from the Basic widgets library on the left-hand side to the canvas and resize it depending on how big you want your price slider to be.
Use ellipse and a horizontal line widgets to create your thumb and track. Customize them as preferred and place them inside a dynamic panel. Use vertical line widgets to create intervals in the price slider.
Then, add text widgets on either end of the horizontal line. In each instance, place the text boxes side by side. On the left, write ‘0’ in the first text box and ‘$’ in the second, on the left of it. On the left, enter the maximum numeric value you wish to provide in the first text box and ‘$’ in the second, on the left of it.
Finally, add images above the price slider within each price interval (see our example for details).
To make your price selection slider interactive, you’ll need to use Justinmind’s events and the ‘On Drag’ event trigger. Click here for the full tutorial.
Best practices for your slider design
- Make sure there is enough space between intervals in your track so that it’s comfortable for the user to ‘explore’ options before making their final choice. Smashing magazine offers further advice on this here.
- Provide feedback to users whilst using the slider. If you’re not using visuals above the slider, how will you acknowledge that the slider is responding to the user’s action? Micro-interactions may be the way to go.
Image credit: Nick Buturishvili
With Justinmind, you can use our transition effects to build micro-interactions into your prototypes.
- Indicate the range and current values visually. You don’t want the track or values to be obscured by the user’s finger or the mouse so consider the UI colors and the label styles carefully.
When website sliders don’t work
As we’ve seen, sliders can be really useful for keeping your content neat and making it easier for user to search your site or app. But sometimes, sliders aren’t the answer.
For instance, if your users need to select very precise information. Sometimes sliders can make it harder for users to land on a value if the range is too large.
Similarly, if there are only a few values to choose from (5 or less), making the selection with a slider can be awkward. In this case, it would be better to use radio buttons or a drop down menu. Luckily, you can prototype these alternatives with Justinmind!