Slider & Spinner UI controls

One of the paradigms of the new UI I’m working on: it should be possible to modify each numeric value with the mouse (or touch screen in the future). Although Slider control seems to be the best option in most cases, in some conditions it might be worth to check out the alternatives.

Limitations of Slider controls

First let’s point out what the Slider is good at:

  • simple and quick to use: click + drag the mouse
  • works great with limited range of integer values

However when trying non-integers also precision comes to play. And this is explicitly dependent on the value range and Slider size. In order to keep same precision for higher value ranges you need to make the whole control bigger. It might happen that available UI space might not be enough… then you have to sacrifice precision. Have you ever try to slowly scroll a very long playlist with a slider? If so, you know how frustrating can that be.

Some workaround might be using keyboard (or single mouse clicks) to make a change only by one unit. This however is quite tiring for continuous use and sometimes you just can’t keep from changing the values back and forth in order to find the perfect balance.

In order to mitigate the above limitations a Spinner control was invented.

Spinner knob & covered spinner

If you are a lucky owner of an analog radio you might notice at least two spinners on it: volume & frequency control. Most likely one of the following kinds:

Spinner knobs

Silver spinner knobsDirty spinner knobs

Covered spinners

Covered spinners visible on top of the boxCovered spinner used for frequency scale

Visible on top of the radio on the first picture and in front on the second one.

Real life usability

Let’s make a quick experiment here: I encourage you to type ‘radio’ to your favorite image search engine. You will notice that spinner knobs are used much more often. That make sense as in fact they are easier to handle and allow quicker changes while maintaining similar precision to the covered ones. The only disadvantage I can think of is that Spinner knobs are easier to break (especially the plastic ones) – this however is usually a small, acceptable risk.

Software UI usability

Now let’s move back to virtual reality. Here’s a little side by side comparison I came up with:

Spinner knob

Covered spinner

UI schema

Spinner knob

Spinner covered

Default interaction Drag Up-down or Left-right (the blue arrows direction = increase; red = decrease). Note that this is different from real life “turn-around” interaction. Also while dragging you are actually expected to leave the control area and continue in the outer space (sometimes over the other controls). Those attributes might make it confusing to use for inexperienced people. Up-down dragging – this corresponds to the ‘strokes’ in the real life. Since you can start from any point spanning along the spinner, it’s possible to interact without moving the cursor beyond the control border. Intuitive to use.
Alternative interaction Keyboard arrows? – if so this is once more against the real life ‘turn-around’ scenario. Perhaps double click to reset value? Maybe click over the control to increase and below to decrease? Even if implemented these are just not obvious for the user… Up-down keyboard arrows (e.g. for small increase), mouse clicks on the top/bottom part of the control (e.g. for large increase). Not hard to figure out.
Look & feel Scales down good – can be used within limited UI space (with the cost of being harder to point at). Can have a value indicator (small black triangle on the picture). Doesn’t scale down well – below certain height/width it just doesn’t look nice and loses good interaction qualities. Can be vertical or horizontal. Doesn’t have value indicator. On general: similar impressions to slider control – which is good if you’re already familiar with it.
Summary Less intuitive & less functional, but fits better within limited UI space. Richer & more obvious functionality, however requires more UI space.

Might be quite surprising that this evaluation actually seems to be in favor of Covered spinners (opposite than in real world!).

…so that’s how I decided to use them in my UI :)

Tags: , ,