Sliders, sliders, everywhere, let’s all have a slide. This design exploration is of digital, touch-screen sliders and not their physical counterpart the linear potentiometer. This was implemented as an iPhone app, written in Swift 3.

Sliders have a number of pros and cons, this design explores these, as well as potential solutions to the cons. In any case, sliders are somewhat overused as the go to “I need to be able to fiddle with this value later” widget when prototyping, so it is worth investing time in their improvement.

Fixed range and footprint

Sliders have a fixed range, this can be a real benefit. You can focus on the most useful range of values, and protect yourself from dangerous values (e.g. blowing up equipment with too high a signal) so they are safe to use without looking. The downside of this is that the range is fixed, which becomes a limit on exploration.

This design started with this problem in mind, by adding number boxes for the min and max values to adjust the range on the fly. These extra controls should allow any arbitrary number to be entered, so typing input boxes are good, while increment / decrement controls would be a bad choice. A downside of these is an increase in screen footprint.

Through iteration I reduced this footprint from the initial design by moving the inputs in-line with the slider and removing their borders.

Iterations to reduce the slider's footprint

Iterations to reduce the slider's footprint

With the full screen width, the slider is is still usable, but in less space the slider would become unusable. To solve this I added a double tap gesture which hides the min and max inputs. Having these values visible isn’t necessary when actually using the slider, and if they need to be checked or modified they are a quick double tap away.

Double tap to hide range inputs

There’s definite an argument that there is a lack of discoverability with this gesture, but I’d argue that it could be easily taught and the double tap gesture is easy enough to do accidentally.

Speed

Sliders let you very quickly explore a range of values. Even though they are continuous controls (in that to get from 1 to 5 you have to pass through 2, 3 and 4), you can quickly jump to a desired value. In fact the fact that you have to pass through these values can be an advantage over a direct input interface (like keyboard entry, where you can jump straight from 1 to 5) for example when changing the amplitude of a digital audio signal, where the discontinuity would cause a loud noise.

Imprecision

Sliders are not precise, while you can quickly approximate a useful value, if you need an exact number, they are not your best friend. The lack of precision due to both their size, as there are a limited number of positions between two points that the sensor can detect, and the imprecision of our hands, there is a limit to how small a movement we can make (and then lift our finger without disturbing it!).

This limit is also relative, when working with a range of 0.0 to 1.0, a precision of three decimal places is probably overkill, while two is adequate. However when the range is in the hundreds or thousands, any decimal value is probably redundant.

Trying to hit 0.525

I then explored having relative precision without any input from the user. Changing the “step” of the slider, the minimum amount a value can change, base the range of the slider. The minimum step was 1% of the current power of 10 of the range, e.g.

  • 0.0 to 1.0 has two decimal places of precision, a step of 0.01
  • 0.0 to 10.0 has a step of 0.1
  • 0.0 to 100 has a step of 1
  • 0 to 1000 has a step of 10
  • 200 to 1000 has a step of 1 as the range is 800, and the nearest

With this dynamic changing of precision, we can also change the formatting so the appropriate number of decimal places are shown e.g. if our step value is 0.1, then only show one decimal place, if it is 1 then don’t show any.

Precision adapting to the range

There are a couple of potential UX problems with this though. The first is, should the range 1 to 1000 really have a step of 1, while 0 to 1000 has a step of 10? Intuitively it seems a little off. The second is that with large ranges and steps, it is far less satisfying, or less “slidery” to only see such round numbers, and only the largest place values changing, my expected behaviour is to see all the digits whirr as I move the slider. I gave the app to a couple of people to try out, and they had the same feeling.

This is partly due to the current feedback mechanism of actually displaying the slider’s value as a number. I think being able to see the exact value also causes people to fiddle for longer, trying to land on round numbers, even when unnecessary.

Visualisation

During a discussion about sliders at my HARC internship, Bret Victor made the case for what I call the “no-slider slider”, or what he might call number scrubbing.

Number scrubbing in Photoshop

Bret also has a neat trick for decimal precision, determined by the number of decimal places entered by the user

I thought about this for a while and could see his point, sliders have their downsides. On the other hand they have the previously mentioned benefits, but they also inherently visualise the current position in a range. It’s easier to understand this relative position visually, than through symbols. This visualisation comes at the price of a large footprint.

Bret also has a neat trick for decimal precision, determined by the number of decimal places entered by the user

Slider as visualisation

Problem with touch screen sliders

One problem with touch screen sliders below a certain size is how easy it is to unintentionally move the slider when first “grabbing” it. This is slightly less of a problem with the mouse, because the cursor is much smaller than a finger. With hardware this is far less of a problem, as grabbing the slider doesn’t require any force to be applied to it, a light touch will do.

Final Design

As a final feature I added OSC sending of the current value and used it to control a filter in SuperCollider on my laptop.

Further work

This design opened up a number of future questions to be explored later:

  • Can the precision control be handed over to the user?
  • Modifier buttons for different magnitudes
  • Dragging vertically for different precisions (Apple scrubbing style)
  • Base precision on the number of decimal places entered (Bret Victor has used this idea)
  • Saving positions / presets