Work in progress on slider redesign

From GIMP GUI Redesign
Revision as of 15:54, 25 January 2019 by Prokoudine (talk | contribs) (Types of interaction)
Jump to: navigation, search

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.

Issues

Executive summary: the current implementation of the slider is not obvious, makes numeric input difficult, and takes too much space on the screen.

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

Sliders generally support several types of behavior.

Incrementing by dragging left and right

There are generally three subtypes:

- Default incrementing. Uses default increment rate, default input device sensitivity, no constraints. - Incrementing with lowered sensitivity of input device to slow it down and thus allow making smaller increments using same force. - Constrained incrementing. Uses a step of X units or X power of default increment rate to allow making faster increments (e.g. increment opacity by 10% for each change until it reaches either 0 or 100).

Incrementing by mouse wheel

Typically uses default increment rate.

Incrementing by buttons

Typically uses default increment rate.

Setting new value by clicking in the respective position

Allows quickly setting a value that's just about right, but might need some tweaking.

Numeric input

Allows setting precise value.

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

Mypaint-2-0-sliders.png

Drag = Regular changes

Shift + Drag = small changes

Click to set to position = yes

Increment buttons = none

Constraints = none

Numeric input = none (value only displayed in the advanced brush settings dialog, not editable)

AzPainter

Inkscape

Inkscape-1-0-sliders.png

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

Blender-2-80-sliders.png

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)

Affinity Photo

Affinity-photo-1-6-5-sliders-1.png

Drag = usual speed

Alt / Ctrl / Shift + Drag = slower speed

Click to set value = yes

Numeric input = clicking on the field autoselects all digits

Increment buttons = no

The modifier works only in some dialogs (e.g. yes for Split Toning, no for advanced brush settings). Maybe a bug?

Adobe Photoshop

Kdenlive