March 8, 2001

Learning from Photoshop's "Variations" tool

Summary: Adobe has been using one of the most effective contemporary goal-oriented interactive mechanisms for years, and a lot of product designers should have been paying attention. It is, of course, the "Variations" tool.

Most television sets have controls to alter brightness, contrast, saturation (colour), tint (hue), and sharpness. Users adjust the controls until they're pleased with the picture they're looking at. But it's tough to predict what changes need to be made, and often, users need to sequentially alter the settings over and over again until the picture looks "almost" right.

Similar controls can be found elsewhere. In many cars, for instance, drivers can adjust their seats electronically or manually using a variety of controls. One controls pitch, another height, and yet another the horizontal position of the seat. Stereos have complex equalizers that raise or lower the audible impact of sounds in a certain set of ranges. Users often encounter a plethora of engineer-friendly, detailed settings mechanisms that give control over the minutia of a product. But such controls aren't goal-oriented, because the user cannot form a mental model of the operation and result of use of the product, and cannot effectively use the controls to achieve a result that they expect and will be happy with.

A goal-oriented mechanism looks at the broad goals of the user. In the case of the television, it's being comfortable with the picture. If something looks off, it will disturb or frustrate the user. In the case of the car driver's seat, one goal is to be in a comfortable position. And in the case of the stereo, it's to be pleased with the sound. Naturally, quantifying those goals can be nearly impossible. But it's not necessary: all that matters is the user's ability to effectively manipulate the product to meet their goals.

Photoshop's "Variations" tool: it's more powerful than it looks

I think that a lot of people--designers, engineers, and ordinary users alike--consider complicated products with lots of dials, buttons, and sliders, powerful products. Even if that were always true, effectively using the power would require knowledge of the use and effect of each one of those myriad controls. Usually, the same powerful ends can be reached in a much more user-friendly way.

Enter "Variations", a feature of Photoshop that's been there for many years (please tell me when it was first introduced; email adam@merges.net). It's the best common example of a well-executed goal-oriented interface in any software product I'm familiar with. In other words, it takes a complicated process and correctly "dumbs it down" to the user's mental model and gives the user a way of achieving desired results with minimal fuss. Let's take a look (the low quality image is a result of trying to capture the full effect of "Variations" in a small file; the image is about 30 kilobytes and a bit wide for users with small screens):

IMAGE: Adobe Photoshop's "Variations" tool, which lets users change hue, saturation, and brightness by clicking on thumbnail images of the changes, as opposed to manipulating numbers and trying to predict the results.

The user begins with a source image, and can click on other versions of the image to alter brightness, colour, and saturation. The user can always add or subtract to the changes he's made, and isn't restricted to one kind of manipulation at a time. All the properties of the image can be changed simultaneously (in one use of "Variations") simply by clicking on images that seem to look right. The process of subjectively analyzing the properties of the image as a whole is left to the user's brain, and remains a subjective process, rather than a technical one with many repetitive steps and numerical data. Also note that the user can return to the original image (undo the changes) at any time.

"Variations" may not look spectacular, but it really is. What's good about it?

Sure, "Variations" may not be perfect, but it's an example of how to make a goal-oriented interface. It doesn't take much imagination to see how this simple mechanism could improve the usability of television picture setting controls. Similarly, an audio version of variations would be a user-friendly replacement of complex and technical equalizers on consumer stereos. In fact, such a tool could be integrated with the "sound simulation" tools that are part of many stereos--the controls that let users choose a simulated concert hall sound, for instance. Imagine: more volume, less volume; more bass, less bass; more treble, less treble; more echo, less echo.

Applying the same concepts to the car driver's seat is more abstract and slightly more difficult to imagine. One way might be a joystick that lets the user move the seat in several dimensions at once, rather than having to predict the height, and then the forward position, and then the pitch.

Where would you apply the lessons of "Variations"?

The good things about "Variations" that I mentioned can be found in few other products. Where have you seen them? Where would you use a tool based on the concepts of "Variations"? What existing complicated controls would you replace?

Email your ideas to me at adam@merges.net. I plan to devote a future column (or two!) to "Variations-based" goal-oriented designs submitted by readers.

Adam Baker is a user experience designer who's worked at Google, Apple, BlackBerry, and Marketcircle, and mentored startups in Vancouver.