Best mouse interaction on knob (dial/rotary controller)

Question

I'm creating a custom skeumorphic dial and I have some doubts about what could be the better way of interacting with it using the mouse, which should be as intuitive and effective as possible.

Right now my control has the following rules:

• click and drag on the cursor (the small circle near the edge of the internal circle) allows angular control;
• click on the scale (the outer annulus) selects the value directly, while dragging allows angular control;
• click and drag anywhere else: linear control (vertical/horizontal)
• mouse wheel;

There are two problems here.

First, I'm afraid that the linear control can be confusing, expecially when the dial is very small; maybe changing the mouse cursor (circular arrow on angular control, NWSE on linear) could be a solution? I'd prefer to leave the linear control option, which is sometimes faster than angular, and in my program it could be very useful since there are about 100 of them.

Second, linear control on dials should be available for both horizontal and vertical directions, and the reason is that some dials could be at the edge of the screen: if one control is near the top edge, for example, increasing its value would require at least two click+drag actions to reach the maximum value if the control orientation is only vertical. What could be the best practice for the movement > value conversion? Radial distance is an option, but wouldn't account for relative distance once the range is reached; another possibility could be waiting for a minimum amount of pixel-space reached and then decide the orientation (horizontal if delta X > delta Y, otherwise use vertical).

PS: please, don't suggest to use sliders: there are specific reasons for dials, most importantly the space occupied by the whole interface, which has to contain all controls, and tabs/multiple windows/mdi/panels are not an option.

Answer 1

Nielsen&Norman have written this about knobs:

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.)

In short, angular control makes for harder manipulation, linear control is not discoverable and can be disorienting.

From my own personal experience, I have found linear controls frustrating and unintuitive, so I think your first hypothesis might be justified. However, don't take my word for it — test it. Your original design and all the suggestions you put forth can be tested with users (qualitative testing, though you can supplement it with quantitative testing, too). Then you'll know what works best.

Also, I'd recommend you to toy with other ideas. You say space is limited: why not implement a slider that grows larger on mouse down? Or a slider that uses the entire screen area as its drag area? (I believe the iOS brightness and volume sliders in the control center work somewhat like this.) Or a slider that appears on button click?

Answer 2

garageband for Mac does what you're trying to accomplish, I think. They stick to the Y axis; up turns the knob up, down turns it down. Here's a video of the interaction: https://youtu.be/LcJwLhRVmyw