jQuery Knob – UI Knobs Done Right

Posted on Monday, April 1st, 2013

jQuery Knob solves one of my bigest pet peeves when it comes to Digital Skeuomorphism. The problem stems from applications like Propellerhead’s Reason. Reason is an integrated music recording and production studio that aims to bring an analogue workflow to a digital environment. While the application is quite successful, the one part that chaps my nuts are the knobs. I understand that they are used to emulate the look and feel of old hardware that some engineers might be familiar with, but there is an inherent problem with using knobs in a GUI.

The first thing anyone tries when seeing a digital knob for the first time is drag it along a circular path as if they grabbed it with their thumb and forefinger. What they notice then is that the knob moves as expected at first, but after geting to the peak of the knob, it begins moving backwards. This is because most digital knobs are programed to be clicked and dragged either straight up or down. Not so intuitive if you ask me.

What makes this even worse is that some programers try to make the knob act like you would think it should (dragging along a circular path). The problem with this is that the area to drag along is quite small on these elements, making the knob even harder to manipulate if you are used to the aforementioned up-and-down method.

What this plugin does is solve the UI problem by making knobs work how you think they should, and they do it well. I’m not saying that all knobs should look plain or ‘flat’, but they should work the way you think they should on first use. Form follows function, sound familiar?