Work in progress on slider redesign

From GIMP GUI Redesign
Revision as of 11:45, 25 January 2019 by Prokoudine (talk | contribs) (Existing implementations)
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

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

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

Adobe Photoshop

Kdenlive