3

Part of our application allows users to essentially "turn a knob" to crank up some effect. Internally, the numbers go from 0 to 15, but externally the numbers don't matter much. We want to maintain the thought of "cranking it up" (ie, like turning up a volume knob) and our users are not tech-savy. The only real constraint is that there's some "off" position of the "knob".

With all that said, what control should I use given that it:

  • has some start and end position
  • has continuous values
  • has a numerical value that our users don't care about

For a physical device, this is usually why I'd want a knob. If you think about a radio, I don't necessarily care if the volume is at "6" or "9" as long as it's "loud enough" to me. The same thing applies here, the users want to be able to turn up the effect, but don't care what exact number it goes to.

Is the answer just a slider? Is there a better/more intuitive control?

UPDATE 1:

I don't want to use a knob because it's not an intuitive control on a computer screen. How do you rotate a knob? click and drag?

Improve this question
4
  • are you really dedicated to a control other than a knob, or are you perhaps also looking for rationale on when a knob might be okay?
    – Nicholas Pappas
    May 29, 2014 at 4:53
  • I guess I know that a knob would work here, but since the application is keyboard/mouse, I don't like a knob for usability sake.
    – Perchik
    May 29, 2014 at 16:53
  • There's probably more than 5000 audio plugins that use knobs, and perhaps 100 times as many people happily using them, which may not be as unintuitive as you may think. The mouse gesture is the same as with a slider: click and drag. Knobs often take less screen space, yet often offer a bigger handle than a slider, requiring less motor accuracy. The affordance may not be as clear-cut as with sliders, but is hardly an issue - how else can you interact with it? You can always change the mouse cursor to up/down icon.
    – Izhaki
    May 29, 2014 at 22:08
  • 0 to 15 is incorrect. They should all go to 11. ...(although 15 would be 4 louder, so I guess it's acceptable).
    – mc01
    Sep 1, 2015 at 21:30

4 Answers 4

Reset to default
1

A knob and slider are essentially the same thing in terms of how it allows the user to input values. However, as you rightfully point out, a knob is much harder to use with a mouse.

So the default answer is, yes, use a slider if you want to emulate the benefits of a knob virtually on screen.

If precision is a requirement, then you'll also want to make sure the value can be manually edited via the keyboard.

Improve this answer
1

If a knob is the ideal paradigm, then use a knob. Knobs are cool.

Here are some cool knobs, some even have mouse wheel support:

as far as the usability of knobs, it depends on the context. For touch knobs are great, for desktop if it supports mouse wheel and keyboard arrows ect. Meh its ok. If you have a giant knob and its part of your brand, using a knob is usable enough.

Improve this answer
7
  • The third link has some better ones, but if you hadn't said that they had mouse wheel support. I'd be trying to click/drag them. Part of the problem is the majority look like loading circles.
    – Matt S.
    May 28, 2014 at 20:29
  • 1
    The JQuery knobs look really good, but they are basically sliders in circular shape. The others have, quite frankly a terrible UX.
    – API-Beast
    May 28, 2014 at 20:31
  • 1
    real knobs are incredibly usable. virtual knobs tend to be a huge pain to use (though I'd make a few concessions for a touch device)
    – DA01
    May 28, 2014 at 20:35
  • @API-Beast all knobs are basically sliders with circular shape.
    – Fresheyeball
    May 28, 2014 at 21:16
  • 1
    I think it's an option, but feel that it's a stretch to call it 'ideal'.
    – DA01
    May 29, 2014 at 2:00
0

If you need a more intuitive control then you can use jQuery roundSlider plugin, which is very simple to use and customize.

For more details check the demos and documentation page, also you can check some customization here.

In addition,

  • It supports in both desktop and touch devices
  • It is responsive
  • It having keyboard and mousewheel support,... and so on.
Improve this answer
0

You can retain the "Crank Up" feeling while using a sliders, just design the slider to visually represent it this way. I would model it after a soundboard since your application is dealing with volume it will fit the theme.

enter image description here

enter image description here enter image description here

This will give you the familiar crank it up radio feel while providing intuitive, incremental control.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.