• Light
  • Dark
  • Night vision
English

Language

Palette

  • Light
  • Dark
  • Night vision

Knob

2 minutes440 views

The knob is a control that is used for the entry of numeric value or to choose one of the options by rotating it. It is a digital metaphor of physical knobs.

The knob is a relatively rare compact version of the slider. It is more popular in products that are close to HMIs, like music synths and sequencers, where you need to track and control multiple parameters simultaneously.

The knobs have relatively lower precision compared to sliders and other inputs, but typically the usage context doesn’t require high precision. The precision can be adjusted by using keyboard modifiers or if there is enough space for the mouse or finger around knob — in the last case, the user may affect the change of the turn angle.

Behavior

Absolute and relative positioning of the knob

There are two ways to implement knob rotation behavior:

  • Absolute positioning: after mouse press, the system tracks the angle between mouse and center of the knob and sets knob angle of rotation equal to it. It is slightly closer to operation of real physical knob.
  • Relative positioning: the user moves the mouse or finger up and down, and the difference in vertical position is equal to the increment or decrement of knob rotation angle. This method is like dragging up and down invisible slider, that sets the rotation angle.

Both ways have their own pros and cons:

  1. Absolute angle gives more precise positioning, if there is space around the knob. But it may be very unprecise right after the mouse press, especially if it is in the center of the knob.
  2. Relative positioning gives more smooth change at any step, but it is less direct manipulation, you have to keep an eye on the knob, not the cursor. It can require more time to move the knob from one extreme position to another. Also it may be more demanding to the empty area above or under knob, but it can be solved for mouse interactions (not for touch screens).

See also