Dials vs. Sliders: When and how to use?

Question

I'm looking for some general information on understanding when and how to use dials and sliders. Our challenge is that we're using both right now to explore relationships, compare values, and displaying data values. I can't find much info on dials and would like to know more about the appropriate use for each.

Answer 1

You say "to display information" so I assume you are using a screen of some kind.

There is no straightforward answer to your question because it's at the base of interpretation of many other factors (which you don't mention).

However dials and sliders are initially used as tactile input sensors for mechano-electronic devices. A general question like your is opt to go back to basics of how we get to the screen and use these metaphors there. A great book regarding this is from Donald Norman titled: The Design of Everyday Things. It gives you understanding of how things are providing you options and how they operate. Or look in the Apple guidelines how they think sliders should be implemented. enter link description here

To help you going forward: if you're not dealing with a new concept, and using sliders and dials in a specific context, you could compare competitors and adopt their best solutions.

Answer 2

Sliders definitely have better usability. Not only are they a widely used pattern, making them commonly understood. But humans are just better at judging and navigating lines and lengths rather than segments of curves and circles. So as far as UX is concerned, go sliders! They are the obvious choice. However I think that dials are a bit more novel and thus, aesthetically more enjoyable, not to mention interactive. I can't remember the exact study, but I remember a discussion about how chromed-up vis and pie charts had more memorability even though they had measurably worse user experience applications.

Answer 3

Nielsen and Norman have written an article on the use of sliders and knobs. This is what they say about knobs:

Virtual knobs or other controls which the user must 'rotate' can naturally represent parameters such as panning – where an audio engineer moves a sound to play from either the left or right speaker (or anywhere in-between) when mixing audio. However, virtual knobs are physically challenging to manipulate with common input devices such as mice and trackpads, which don’t have a natural affordance for rotation. Because linear-input devices like mice have difficulty executing rotation, some designs add a hidden linear-dragging functionality to the knob, allowing users to click and drag up or down, vertically, in order to increase or decrease the parameter value. However, this behavior is not expected, and usually has no signifier, so users may never discover it. (Plus, if implemented poorly, it can wrest control away from those attempting to move their mouse in a circle to mimic the rotation of the knob.)

While there are cases where knobs provide a better affordance, you have to judge whether this benefit is outweighed by the disadvantages in usability.

IMO, for touch-only interfaces, a large enough knob with proper number indication might be appropriate. For mouse interfaces, I wouldn't recommend it.

Answer 4

This is primarily referring the use of them to select a value from an array of data.

I believe that when in doubt use a slider. A slider has the added advantage of being multi-functional as 1 bar may contain multiple sliders, dependent (High, Mid, and Low) or otherwise (height, width, depth). Though technically neither has a limit on range in terms of values between min and max, from a UX perspective sliders make more sense for larger ranges being that a dial will take multiple revolutions while can be difficult with a mouse (keyboard isn't as obvious as one would think and not all accommodate click-and-drag straight regardless of dial location). A standard dial only goes to 10 (11 if Spinal Tap) and if it clicks into place there will be no accounting for any of the value's in between the marked intervals.

So sliders always then... right?

Dear god no are you barking mad? Jason Grover hit it with the use of "novel," in relation ship to dials. While dials provide a sense of limitations (how far they can go in either direction they hit max or you have to re-grip) but let me ask you. Are you going to use a slider in [one of these:

People who look at a historic page with an interactive radio like that will be nostalgic for the dials even if they are inconvenient.

In the end, it's hardly even your choice which to use. It's going to be left up to what ever is appropriate with the design. I almost want to say that if you feel like you do have a choice it would be indicative of an error somewhere.

Answer 5

As with most things UX, which widget type to use depends on a great number of factors, such as: the expected data range; whether they're primarily used for data display or data input; how much precision is required for that data input; the type of data being displayed / controlled; the surrounding layout; as a way to differentiate between two general categories of data; etc etc...

our designers are using both dials and sliders interchangeably

Are your designers able to articulate for each control instance why they chose to use a dial or a slider? If not (or if the answer is along the lines of "it just looks better that way") then the answer is probably "you need to hire better designers"...

Some reasons to prefer a dial

• Can be more compact than sliders, depending on the surrounding layout
• Can be more visually interesting than sliders
• Can have some skeuomorphic benefits, if the product is a digital version of some physical product which typically uses knobs / dials
• Can be appealingly "tactile" for data input, so long as the input doesn't need to be particularly precise
• Can support infinite / indefinite data ranges (Sliders have a definite beginning and end; dials can just keep spinning)
• To clearly differentiate a particular control from a set of other controls which are sliders

Some reasons to prefer sliders

• Significantly easier to use for data input. It's a lot easier to drag a mouse or a finger in a line than in a circle; in fact some radial controls actually accept linear input, which is physically easier to do but more confusing
• Easier to compare values across multiple controls (a set of sliders with the same data range can act as a de facto bar graph, so it's much easier to see at a glance which are higher or lower than others)
• Somewhat more precise than radial inputs (If fine precision is required, of course, numeric data entry is the way to go)
• On the web, at least, much easier to implement (there are native slider controls; radial dial controls require custom coding or a canned library)
• To clearly differentiate a particular control from a set of other controls which are dials