Work in progress on slider redesign
This WIP page focuses on issues users have with the current implementation of sliders used in tools' and filters' options, researches alternative implementations, and suggests redesign options.
Contents
Issues
Common issues with the current sliders as pointed out by users online:
- The split of the slider area for small/large changes separation is not obvious. People only figure it out when specifically told about it.
- Numeric input is too difficult to use. The area is inside the slider, so it clashes with the slider. It's also very small, hence changing the value completely (e.g. from 123.7 to 300) means having to make a very fine hand movement to select all of the digits, then press Del, then input new digits.
- The widget occupies twice the size of the vertical space of slider widgets found in most other applications because it has to provide a high enough area for both the 'fine adjustments" and the 'large adjustments' parts of the slider to make the widget usable at all. This means users see a lot fewer controls on the screen and have to scroll for more.
Types of interaction
Existing implementations
Executive summary
Is there a single most common implementation people expect?
Is GIMP's current implementation matched by any other application?
As far as we can tell, not. In fact, Inkscape developers, who reused our slider widget, specifically got rid of the horizontal separation and introduced key modifiers instead.
Krita
MyPaint
Inkscape
Drag = regular changes
Alt + Drag = very small changes
Ctrl + Drag = Constraint to a step of 10
Click to set to position = yes
Numeric input = by editing an entry field next to the slider
Increment buttons = to the right of the entry field
Blender
The label is to the left of the slider, outside.
Drag = regular changes
Ctrl + Drag = Constraint to a large step
Shift + Drag = Smallest changes
Click to set to position = no, enables numeric input instead
Numeric input = by single/double-clicking inside the slider
Increment buttons = to the left (decrease) and to the right (increase), visible only on hover (not always available though)