Design better gradients

A refurbishment of a basic design tool.

Gradients are well known tools for designers that have practically been used since the beginning of computer graphics software. They are often used to mix colors in ramps, to shade objects or to control complex parameters in 3D applications. It feels like they are there since the beginning of computer graphics software and have not changed for years.

With Cinema 4D version R20 I had the chance to redesign a Gradient interface which had to be adapted to a new material system. In this article, I share the enhancements that my team added to the new Gradient, which could be adapted to any other graphics application. It is not exactly a case study but should serve as an inspiration for other designers who are building image-editing software.

The new Gradient in Cinema 4D R20

Gradients can be enhanced using:

Adjustable sizes

With increasing display resolutions, interface elements are getting smaller. It allows to place more functionality on a single screen, however as smaller these interface elements get, they become harder to click. Interface widgets like color choosers, curves and gradients have to be controlled precisely so they need an adequate size. In the best case, the size is adjustable.

Designers love to customize their interfaces. A Gradient should be customizable to a certain level.

Multi-selection and editing

One of the biggest issues of existing Gradients was the lack of moving multiple knots. It is a pain because when designers move a range of knots, they have to drag each knot on its own. Looking at timelines, (which are available in video editing or animation applications) we can see that this problem is already solved.
Timelines usually have to deal with a lot of keyframes. Moving multiple keyframes, the editor or animator drags a rectangle to create a multi-selection. In the next step, he can move a bunch of keyframes at the same time. We applied the same feature to the Gradient. In addition to that, we added scaling, in order that designers can shrink or enlarge an array of selected knots.

Designers can select multiple knots in one action and move them. Scaling and duplicating whole sets of knots allow creating patterns.

Duplication and modification commands

Knots can easily be duplicated when the designer performs a click and drag action while holding a modifier key. Together with a variety of commands, designers can quickly create patterns with the Gradient.

Thanks to multi-editing, designers can duplicate arrays of knots.

Zooming

Sometimes designers have to make fine adjustments to the Gradient. To do this precisely, they usually scale their interfaces that the Gradient can cover more screen space. Here again, timelines have solved this way smarter. We can zoom in timelines to make fine adjustments. So why not allow zooming in Gradients as well?

The designer uses the mouse wheel to zoom in and out. By clicking on the brackets, the Gradient comes back to normal stage.

Visual indications

The interaction cycle teaches us that visual indications are essential helpers in user interaction. In the case of the Gradient, they guide designers and help to evaluate the colors. Visual indications have to be subtle, but readable. In desktop applications, hovering is a great helper for visual indications. Designers are in “save exploration” mode and can hover over any UI element, without invoking a command. Visual indications could be:

Ghosted Knots

They suggest where a knot will be created.

Tooltips

When the mouse is staying still, a tooltip can show up. It displays which modifier keys are supported to access functionality.

Highlighting

When hovering over knots, designers know that they are clickable.

Changing the cursor

Different mouse cursors can indicate which interactions are currently possible.

Stacked knots

Because Gradients are one dimensional, it is impossible to recognize when knots are overlaying each other. A visual indication should allow doing this.

Final thoughts

At the end, I want to mention that users have clear expectations of what should happen when interacting with interfaces such as Gradients. They have a clear mental model. Even if we recognized some flaws in current Gradient interfaces, we had to stick to their basic interaction models. Inventing completely new interactions would only cause frustration.
This is also true for the interface. Even if we added way more functionality to the Gradient, we avoided exposing any buttons to not clutter the interface. All of the features had to be placed at the right time.

Prototyping

All of these options came out because of trial and error processes. We created a lot of prototypes which helped us to evaluate if ideas work or don’t work. It is worth to invest time in prototyping. We gained knowledge, which we did not expect at the beginning of this project.

If you found this article valuable, press the clap button so others can find it. You can find me on my website or follow me on Twitter.