Right now we’re in the middle of designing the screens for our next app and like most apps, it contains some sliders. I’ve been designing for mobile since the Nokia Symbian N95 and even in those non touchscreen days, sliders were used quite a bit. Since 2007-8, I doubt if I’ve designed any app that didn’t contain at least one slider.
So far, it looks like our new project will have one discrete slider for choosing a priority sort value from 1 to 10 and will also have several regular sliders in the forms screens. We’re also getting valuable input from our clients own graphic designer and I’m looking forward to seeing what he comes up with in the coming days.
Despite the slider controls good points, they do make it easy for users to choose impricesly and it’s important to size and position them so that the user intuitively knows how to use them correctly. They should look good and do what sliders are supposed to do, which is to represent the physical world on the screen. So I always try to use a slider when a relative change is required rather than an absolute change. For example, the user might want more results in a search, but not know the exact amount, or they might want to set a value relative to another value. Of course, the classic example is a volume control slider. The user wants it to be a little louder, but they don’t know the exact decibel level.
The most common layout error I see with regards to sliders is that the designer or developer places the labels associated with the slider directly underneath it. This doesn’t work for mobile, because the users fingers will always obscure the label when they are adjusting the slider. See this example:
In these examples, the user will not be able to see the values shown in the labels when they need to the most, when they are making an adjustment. For mobile, the labels should always be placed above or to the side of the slider, like this:
Sliders come in several variants. Single sliders are used for single values obviously. Again, the volume control is a typical example. Double or dual sliders have two adjustments and are used for filters where a minimum and maximum needs to be specified. For example, you might be checking for a used car that was registered between 2012 and 2015. Price range is another common use for dual sliders. See the image here:
Again, you can see the classic mistake being made of having the labels below the slider (just before I wrote this blog I downloaded an app to allow remote viewing of security footage and sure enough, the sliders had the labels placed below !!).
Another thing to note from the image above is that there are discrete stops on the slider. In this example, the user can only choose in increments of $20. I use this a lot and it’s a good compromise when the user has to pick a specific value, but as a designer you don’t want to use a text or number entry box. You will see ratings sliders usually contain discrete stops like this.
So sliders are a good tool when an exact value is not required. Users prefer them to text or number entry and they just look good compared to the alternatives. Best of all they work quickly when a user wants to make small continuous adjustments to a setting or search filter.