Please no.
How difficult can it be to make a knob that works when turned both linearly and circularly?
Knobs are good when you can physically rotate them like for example in a car. But there we are removing knobs and adding touchscreens.
I guess the one advantage they have is they don't take up as much room as a slider, maybe?
Without manual entry, you trap users in fiddly UI hell.
I prefer sliders for knobs… just much more natural with a mouse or touchscreen.
Large slider which doesn’t change place, buttons to select what you are adjusting. Display the current value on the button if you need it to stay visible.
The magic of software ux is that you can actually replace things on a screen in a way you can’t on a physical device.
There is a reason people serious about doing music keep using physical knobs to change values in their software. I’m entirely convinced the sole reason DAWs use virtual knobs despite them being such a poor UX element is because people will map them to MIDI knobs anyway and that keeps the software and physical world looking the same.
Then it takes only knob space at rest, but offers the slider affordance and high-res control when you need it.
Maybe that would work if it popped up VERY FAST. I have never gotten along with touch screen knobs.
I think the best compromise is something that's already very similar to knobs - a "draggable text field". Different software styles this element differently, but the essence is that it's a number, where you can either click and type a new value in, or hold the mouse on the field and drag it left or right to drag through the different values. You can find this in some video and 3D editors. Sometimes these elements are styled to have arrows on the sides of the numeric value to suggest the dragging behavior.
If you don't need a value indicator, you don't need a circular knob as an affordance. You can have a whatever as it just reacts to your input.
If you do have a value indicator which is "infinite", such as a numerical value display, it's better to make it interactive and place the interaction on top of it, instead of splitting the UI between a value indicator and the input.
A lot of software does this.
If you have limited space and you need to both interact with and see fractional ranges, knobs are the way to go. It's way more glanceable, and the entire range is displayed in the knob itself.
Think of it this way: Both a circular knob and a slider have 2 elements: the interactive area and the range display. However, the slide has the same knob size that is set on a large track displaying the selected range by moving the knob, whereas the circular knob has the track displayed radially inside it.
For the track example — the knob is the only interactive element for all practical purposes when it comes to precise tweaking of values. Single clicks on a track usually don't support further dragging after the initial click on any OS or UI implementation.
This comes with many positive sides:
- The interactive area (handle) is always in the same place.
- The interactive area is in practice always bigger than a knob on a linear slider.
- Adjusting the knob doesn't reposition your cursor, no matter what you do with the mouse.
- The circular track allows for much easier visual identification of fractions compared to a linear track due to its radial nature.
- The indicator can be a single pixel, whereas on the linear track, the knob is a fairly imprecise blob due to its nature of needing to serve a dual purpose. This means it's a lot more precise.
- There is a lot more granularity in the same surface area.
- Interaction precision isn't limited to the size of the track where it needs to scale linearly
- You don't need to dynamic element rendering or resizing which may cover other things you're looking at.
- The area is much smaller. On a 16x16px circular knob, I can get up to hundreds of steps which are clearly visually distinct.
All of that being said, the article is quite bad as it contradicts itself, and uses knobs in ways they are not good at, which is circular interaction and being able to do multiple circles. It beats the point of having a knob, might as well have an interaction handler on the number indicator itself.
Of course Apple's mice don't have a physical knob, so that approach doesn't work, but knobs and mice can work outside of the Apple sphere.
On touch screens, you can probably make them work by tapping the knob and popping up a slider to control the value. Lets you use knobs to maintain an overview while exposing usable controls for modifications.
Not good for computers with mouse inputs, but for touchscreens I like the idea.
Pie menus, where the selection is based on the gesture direction, allow you to move further out (longer gesture) to get more "leverage" or precise control over the angle (either continuous angle, or the selected slice).
The angle selects a slice, but you can think of a knob as a pie menu with one slice (the whole pie) that also has a direction and a optional distance parameter.
But you can even use the distance to exaggerate the angular precision even more!
Here's a demo of a "Precision Pie Menu" I wrote in 1988 for NeWS in PostScript, which exaggerated that angular precision effect even more, once you pass a certain distance, allowing you to have extremely precise control over the angle.
https://www.youtube.com/watch?v=c0scs59va4c
>Demo of the precision pie menu. Research performed by Don Hopkins under the direction of Mark Weiser and Ben Shneiderman. Developed and demonstrated by Don Hopkins.
>Transcript:
This is a demonstration of the Precision Pie Menu under the NeWS window system.
It's an experiment in exaggerating the extra precision that you get with distance.
As you move out further from the menu center of a pie menu, normally the further you go from the center the more control you have over the angle.
But if you want to input an exact number like an angle, you might want to get it down to the a certain number, but you run out of screen space before you get enough leverage to change the number to what you want.
Now what happens here is that when you poke out, it makes a flexible lever, that the further out you go, the more flexible it becomes, and you have much finer control over the number.
So as I move around back in and out, I'll poke it into a different place and just come out further to get a lot of leverage, and dial exactly the number I want.
So here's what happens when you go around to the other side: "pop pop"!
And as you get nearer it gets less and less flexible.
Generally you'd kind of eyeball it, and then get it exact like 93, well there's 93 or 273, there's 273.
It’s was a pain to use and they later dropped it for a slider.
Edit: Scrolling further down on the article, I get reminded of the weird pop-out drawer at the bottom of the player. I had totally forgotten about it, and it was also a very awkward and un-ergonomic piece of UI.
> ...
> Apple’s attention to detail is what has propelled it to be the most valuable company on earth. Whether it’s the click of a physical button or the math behind inertial scrolling, Apple employees work really hard to make products that are deceptively simple and just feel right. The virtual knobs found in Garageband are no exception and I hope others enjoyed learning about them as much as I have.
I think these two statements are contradictory. Personally, I've noticed a pattern when people post about Apple UX that seems to go "yes this thing may be unintuitive but actually it's a sign of really good design!" that I can't quite seem to wrap my head around
This is opposed to something that may be very intuitive for 30% of people, but the other 70% are lost, and the implementation doesn't scale.
like if said knob just displayed a vertical bar with marks signalling up and down also works it would be very clear to person that tried to just spin it
Its quite fascinating behavior really. Reality distortion field.
Adding a simple visual clue would help discoverablility a lot. Draw a faint halo on touch, when the mode changes. Draw a more visible trail when the touch point is dragged. Provide immediate and localized feedback, like good UX guidelines suggest.
If a digital knob needs to be turned several times (e.g. 1080º, common in DAWs), the "default" way to interact with a knob on a touchscreen - circling again and again - is slow and uncomfortable. Adding "slider" gestures on top of the default behavior is a nice way to perform many turns quickly and easily.
The author also makes this error, praising Apple's design prowess and denigrating its competition while failing to recognize they "didn’t always react the way I thought they would" because they're ill-suited to the medium.
And with traditional toolkits (i.e. not HTML) it will even be fast.
I can make a 16x16px knob where you can see almost the entire 320° of the range.
It's also easier to see fractions, such as 1/2, 1/3 or 1/4.
Sliders, especially in 16px possess none of those.
Being able to see the full state of the thing is important. Hiding it behind interactions is just as bad as hiding it behind menus.
Sidenote, you have to do this on native because pointer lock/warp is not universally supported in web browsers.
As others have pointed out, sliders have limits & knobs don't, so I do think they have their place on touchscreens.
If a digital knob needs to be turned several times (e.g. 1080º, common in DAWs), the "default" way to interact with a knob on a touchscreen - circling again and again - is slow and uncomfortable. Adding "slider" gestures on top of the default behavior is a nice way to perform many turns quickly and easily.
I'm curious - what UI mechanism would you use instead?
I found this knob to be the best experience.
Curious if others feel strongly for the centered experience.
If you can point me to a DAW besides Garageband on iPad which was on a touchscreen with those three gestures I would love to try it out!
I guess I should probably publish more of my drafts...
Thanks for reading/commenting!
brudgers•1d ago
I understand the rationalization, but a knob is not a slider and what's the point of non-skeuomorphic skeuomorphism?
dsego•5h ago
brudgers•4h ago
quitit•4h ago
Problem 1: Sliders take up a lot of space.
Problem 2: Fine control of a mouse or touch-driven interface is provided by sliding, not by rotational gestures.
The idea here is to use a virtual knob to save space, while providing the fine control possible with a sliding interface. The sliding direction is generally chosen to be intuitive to the function of the knob. (Locking to horizontal or vertical also assists with fine control.)
brudgers•4h ago
Here a counter that increases and decreases with mouse movement would take less space and be more intuitive.
And a much much better design because it would provide a numerical readout of the value directly at the point of interaction.
But in fairness, most design is bad because designers tend toward satisfying themselves rather than users...ok, I will stop ranting now.
pegasus•4h ago
pegasus•4h ago
Synaesthesia•3h ago
duped•3h ago
If you replaced it with text or a bar that filled the area it would be the same.
It's better than a linear sliders because it takes up less space. It's better than a bar slider because you have more range to display (the length of the arc of the indicator is longer than the horizontal and vertical dimensions). This in turn makes it better for putting into tighter spaces.