(Not) Knobs 5

(Not) Knobs 1
(Not) Knobs 2
(Not) Knobs 3
(Not) Knobs 4

For parameters with a low resolution, it might be of advantage to show the steps, so 2 variations on that.

Showing on overlay like in the 2nd row could encourage the user to increase the distance to have more precision (it took a while from my first encounter with radial knobs to taking advantage of this).

I should have mentioned earlier that this is all SVG done with Inkscape. That means the graphics can be adapated to various sizes easily or even be rendered in realtime.  I tried to keep things simple because of this. But now it’s time  for a little experiment, trying to add more ‘realism’ .  Many layers, transparency and blur also mean that this is rather not suitable for realtime rendering.  Caching might do the trick, though 🙂

Finally 2 variations on an overlay while dragging on the distance-based widget. The simple version can lead to nasty aliasing problems, apparently

(Not) Knobs 4

(Not) Knobs 1
(Not) Knobs 2
(Not) Knobs 3

If there’s ever a need to adjust a range …
Followed by 3 variations for parameters with a neutral/center position. The triangle could serve as reset button.
The very last widget is about using the full circle. In combination with radial behavior, there would need to be a block to avoid jumping from min to max.

(Not) Knobs 3

(Not) Knobs 1
(Not) Knobs 2

Throwing some out, a few more variations (3 groups: radial, additive, distance):

Simple shading:

(Not) Knobs 2

Continuing where I left in (Not) Knobs 1

So besides radial, knob-looking widgets, I want similar widgets that work linear and give a visual hint at that. They should work with both dragging horizontally and vertically and behave sensible in between. So any jumpy behavior when dragging in odd angles must be avoided.

After talking with David García (blog), one already implemented and proven way is to just add the values for the x and y axis (zero at the center). Not linear if you move away from the axes, but there is no jumpiness and the calculation is always the same.

The only other way I can think of now, is to use the distance from the initial click and to assume a rotating axis. Initialy, north-west to south-east is plus, the other half minus. If the mouse is moved around the center, plus and minus have to rotate accordingly. Picturing this as a physical object, it would be like a slider that can be rotated around its center. Having analogical overlay graphics while dragging would be helpful, but apparently common toolkits aren’t build with things like that in mind.

Earlier experiments led me to the conclusion that a round scale works better than growing circles, rectangles or straight. It seems to be space efficient and just looks better 🙂

No shading for now, just plain geometry to try a number of variations.

Radial

Additive

Distance

(Not) Knobs 1

So recently the topic of knobs came up on IRC again. Audio applications tend to have many semi-continuous parameters and knobs offer a way to fit them into little space.

The trouble with knobs is, that people can’t stick with one behaviour: some knobs have to be manipulated by click-hold and moving up and down or sideways (linear), while others react on direction (radial).

Radial has the advantage of allowing faster change or higher precision depending on how far away from center the pointer is moved. But moving the mouse in a circle is more of a hassle than a linear movement.

Linear movement is not intuitive with knobs. The shape and the metaphor both point to turning. It’s just simple in implementation and use.

Non-radial knobs should look differently. I had a go at that quite a while ago, but now want to be a little more systematic.

So let’s see what the realy important basic properties of knob-style widgets are and how they could behave.

Basics

• Represent a parameter on rather small space, with a width/height ratio close to 1.
• Allow changing the value via a click-drag operation
• The point of reference should be the spot clicked on. The alternative would be the center of the widget, but having to aim for it to start from a neutral place is not acceptable.

What can be evaluated?

• Distance from the center
  • Directly
  • Projected onto an axis
• Direction
  • as fine-grained angle
  • in zones
• Speed of pointer movement (tricky)

Each of these could be mapped either directly to the amount the value is changed, or to the rate of change (time based).
3 mouse buttons and 3 modifier keys allow many options and alternative modes.

Fan-sliders

Initial Concept

I think it was in 2004 when the problems with knobs as explained in (Not) Knobs 1 led me to think about ways to combine linear movement with variable precision: the fan-slider concept was born.

Right on moving the mouse pointer over the slider the fan appears to the right. This is important for making the special functionality discoverable.

Clicking anywhere on the initial slider grabs the value, so there’s no value jump, but pointer and indicator movement are kept in sync. The whole slider is one target area and the user doesn’t need to aim at a small button.

Moving the pointer to the right means adjusting sensitivity, up and down is value change. Moving the pointer out on the other side makes the fan flip over.

GTK / Phat

I worked in cooperation with Pete Bessman on the design of a GTK+ version, which he implemented as part of the Phat widget collection. The audio sampler Specimen was the first application to use fan-sliders.

 

When moved over the slider the mouse pointer changes to the up/down arrow to indicate the main functionality. When the mouse button is pressed, small arrows to the sides appear to give a hint at the fan functionality. The fan only appears on moving the pointer outside the slider area. This way the fan’s edge marks the current position on that axis, an additional marker line like on the original design is void.

Following Pete’s proposal the mouse cursor disappears as long as the mouse button is held down. The value indicating line and the fan take its place. After the operation it appears right where the button was pressed down. This way there’s no problem with leaving the screen: with a kept visible cursor it either wouldn’t be possible to leave the screen (part of the fan outside), or the pointer would have to jump back on screen afterwards, which might cause confusion.

Holding down ctrl while manipulating the slider freezes the precision axis, so only the value can be changed. Holding down shift freezes the value axis, so that you can scale the fan up without worying about unintended value change.

Problems of the current Implementation

Sadly this implementation is plagued by flickering and a lack of anti-aliasing and transparency. My hope is that these issues can be resolved now thanks to compositing, Cairo or whatever it may take exactly 🙂

Another issue: hiding the mouse pointer and making it appear back at the start doesn’t work with tablets (absolute mode). To still allow making full use of a fan that leaves the screen, the best option might be to detach and “scroll” the whole widget inwards as the pointer approaches the edge.

Another Slider

Recently I designed a new fader for Ardour 2.0.

It has no fans (it’s long enough), but otherwise behaves like a fan-slider as it has no button to offer one large target area instead. With early designs, there were some concerns of it looking too much like a meter, so I came up with a relief as hint that the whole area allows dragging.

Blender has sliders that allow dragging everywhere, too. They have what looks like a button as indicator, though. I witnessed that people thought they had to aim at the indicator for dragging until being told otherwise several times. I noticed myself aiming at the indicator even though I know of this (similar is true for check boxes). My conclusion is that there should be nothing on the slider looking like a special area if it isn’t.

New Style

Now what could or should modernized fan-sliders look like?

After trying a number of relief variations, I picked the 2nd. Below Nr. 8: Showing the fans on dragging while the pointer is still over the slider to make the user aware of the special functionality and to invite him to use it. Transparency allows the user to still see everything else and makes comparing slider values much easier. Last: a version for parameters with a neutral center. The triangle can serve as Reset button.