> ...
> 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
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.
Its quite fascinating behavior really. Reality distortion field.
Somebody comes up with an acceptable solution to a design problem, people get used to it, then when somebody comes up with an otherwise theoretically better solution it is in practical terms worse at first because the user has an intuition for another one already. Having to relearn is worse than if there was no preexisting intuition yet.
This is why it is possible to say it is both not very intuitive but good.
Software has many successful examples of the latter but it’s not a paradigm that designers are familiar with or that startups tend to go after.
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.
To be more concrete, if I had to guess, the author tried using the knob like a slider, trying to drag the visual slider down to decrease and up to increase the knob rotation, but that conflicted and caused movements in “random directions”.
Such cringe-inducing, delusional fawning. You can find counterpoints to this oft-regurgitated claim all over Apple's products, with a cornucopia of them in the rightfully-scorned Tahoe release alone.
But back to the topic at hand: "knobs" in GUIs. They suck, for the very reasons demonstrated here. Audio software in particular is replete with this skeuomorphic failure, and why? Because people who work in music or audio can't understand more-effective GUI affordances? Because they'd be lost without something that looks like the physical knobs on a mixer or stompbox? What an insulting assumption, not to mention nonsensical in modern times.
"Apple employees work really hard to make products that are deceptively simple and just feel right."
This grand declaration is based on what, exactly? In a decade as a software engineer at Apple, I saw a wide range of dedication and aptitude in UI design and implementation. This varies within teams and between teams, with no set standards for research or testing of UI effectiveness. I saw the same amateur-hour mistakes made repeatedly, despite their being pointed out incontrovertibly... and some have come back to bite (and cripple) new generations of Apple products.
Design isn't getting better, folks. It's one thing to give bad design a free pass; but to LAUD it hurts all users.
- display a value compactly
- show that the value is modifiable by the user
- allow changing the value to use more screen real-estate than the knob itself
An abstract slider that works like a knob is jumping a knights-move away in design space from a traditional control. The user has to understand 2 things about the widget:
1. It's user-modifiable
2. It's manipulated by clicking on the widget, then dragging away
A knob is only 1 step away from a traditional control. You get the "user-modifiable" knowledge for free, because everyone knows what a knob is already.
Knobs are good when you can physically rotate them like for example in a car. But there we are removing knobs and adding touchscreens.
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.
They have touch area where the scroll wheel would normally be, that works extremely well.
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.
I do it all the time on an iPad. It handles up to 5 simultaneous controls very well.
At that point I guess the physical resemblance is a virtue.
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.
There are some music software that do this, and it looks clunky shifting between a graphic of a slider when you're moving it and a graphic of a knob when you're not.
I prefer sliders for knobs… just much more natural with a mouse or touchscreen.
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.
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.
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.
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.
There's no motion you could make that would infinitely increase without a break. A knob you can just move your cursor in a clockwise circle infinitely.
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?
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 had a Novation Zero SL mkii in 2008 which had a "universal knob". It acted as an HID mouse input and when you spun the knob it would click your mouse and drag it vertically. It worked with most music software at the time because vertically dragging a knob had become fairly standard.
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.
How difficult can it be to make a knob that works when turned both linearly and circularly?
First, it's a visual representation of the value, and it's easier to map "Slightly more to the right" than "an extra 0.7"
More importantly, all DAWs can map physical control surfaces to the on-screen knobs, and control surfaces all use knobs and sliders.
For example https://mackie.com/en/products/mixers/onyx-series/Onyx16.htm...
I understand the rationalization, but a knob is not a slider and what's the point of non-skeuomorphic skeuomorphism?
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.)
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.
Most software I use does still show some numeric value somewhere, either around the element when changing it, or in some other panel. This way you get some more information than in the hardware equivalent if you need more granular control. Its particularly nice if they allow you to click/double-click for editing values.
From my perspective as a user, knobs convey exactly what I need. Mostly I don't care about the exact number, just about what position something is in. Knobs behaving like sliders is fine. I'm not physically moving a knob, I might be moving it with a mouse or touchpad. You can't stray with a physical control the way you can with a digital one. And they allow interface designers to put a lot more information on screen where space is at a premium.
Honestly, just go download a trial version of something like Reaper or Reason and go make some music. You'll get a better feel.
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.
Like if knobs suck, then every audio UI has always sucked.
Because competent designers.
One of the issues (in my opinion) is how much control per pixel you get from a control. Certainly a knob has more control factors than a button. If nothing else you can click it and turn it. In the same size, a knob has much more control effect.
The other issue is how easily and comfortable a person can be using the control. This is complicated. If you see something on a screen that looks like something from the real world, then you have an idea of how to use it. And many of us became very comfortable with the old goofy Windows controls. But initial comfort is not necessary. Learned comfort is. If initially we don't know what it can do and how to use it, can we learn and once we do will we be comfortable?
It is not straight forward. The challenge I face is using a very small form factor - a mobile phone screen - to inter operate with complex systems and vast amounts of data.
The fact that it embodies more control factors in a small package makes it interesting.
- Going "around the rim" in an arc is difficult both for touch and mouse. Results in jerky motion.
- Defining the direction based on which outer rim I am closer to makes it unpredictable, especially for small knobs.
Best in my opinion is the "click / hold the knob and pull vertically or horizontally with up/right turning to the right. Makes it fast and predictable even with little space like a DAW audio mixer.
I found this knob to be the best experience.
Curious if others feel strongly for the centered experience.
I guess I should probably publish more of my drafts...
Thanks for reading/commenting!
Did some CxO let their brother-in-law's cousin's nephew have a go at managing all the teams? I haven't felt this kind of frustration with an operating system since jumping from the Microsoft ship during Windows 8.
Some basic UI is literally unreadable on the dumbass "glass" implementation. There are blatant rendering bugs and placeholders still in the shipped version, just look at the effing Contacts app. DRM slowdowns have crippled the Music and TV apps so much I literally cancelled my subscription and went back to piracy. I'd post example screenshots but I already wasted enough time just writing this ragecomment.
i can guarantee the only reason there's 3 input types for the knobs, is because three different teams did their own thing and nobody cares.
Please no.