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.