đ How Apple Designs a Virtual Knob
đĄ Author's note: This unpublished post was originally written in May 2012, and refreshed for publication in November 2022.
Just want to see the code? Check out github.com/jherrm/knobs
When Apple introduced Garageband for the iPad back in March 2011, I just had to try it out. It wasnât just the ability to create music that drew me in, it was the realization that this was a flagship app that uses the strengths of a multitouch interface to create experiences that werenât possible with a keyboard and mouse. My favorite example is how you can hit a note on the sound sampler keyboard then drag your fingers left and right to bend the pitch.
Some time after a new type of interface is introduced, a handful of concepts tend to âwinâ and become a standard way of interacting with the interface. Keyboard shortcuts and right click contextual menus arenât tied to a specific OS, theyâre part of the standard toolset you get by using a keyboard and mouse. The iPhone popularized pinch-to-zoom, swipe, long tap, and many other useful multitouch interactions. With Garageband, Apple explored uncharted waters in user interaction and Iâm going to talk about one simple control that has a few surprises in both use and implementation: the virtual knob.
Appleâs Three Ways to Turn a Virtual Knob
After using the knobs in Garageband for a while, I noticed that they didnât always react the way I thought they would. Most of the time the little indicator dot on the knob would follow my finger as I spun the knob around in a circle. Other times the knob wouldnât follow my finger at all and seemed to go in random directions. I eventually figured out that I had stumbled on three different ways to turn a virtual knob. I was so impressed by this added functionality that I had to try and reproduce it myself, which led to me writing Knob.js, a javascript implementation of multitouch knobs that attempt to replicate the knobs found in Garageband. Knob.js powers all of the examples used in this post.
Spin
The natural interaction with a knob is to spin, so being able to touch the knob and drag it in a circle is key to a successful virtual knob. You can start the spin at any point on the knob, and if your finger is hiding the indicator you can drag away from the knob as you spin, so you can see whatâs going on. Dragging further away from the center of the knob also lets you be more precise in setting the value.
Vertical Slide
... continue reading