Chapter 32: Creating Better Controls

Controls are valuable tools for interacting with users because they encapsulate complex behavior in a ready-to-use package. The ready availability of controls leads us to rely on them for designing user interfaces. We use them because they are available. Unfortunately, the set of controls that come with most window system APIs is rudimentary at best. Controls remain a significant arena for invention and entrepreneurship. This chapter explores some needed areas of control innovation.

Direct Manipulation Controls

The most striking area for invention is in bounded-entry controls. So many programs offer dialog boxes with edit fields or spinners to gather data that could more easily be entered through direct manipulation. Using click-and-drag idioms in place of entry controls not only makes input clearer and easier, but it can also, by its very nature, put natural bounds on what could otherwise (using standard controls) end up as an unbounded data entry problem.

Example 1: Draggable drop shadows

For example, many drawing programs, such as PowerPoint, permit users to add drop shadows to filled objects. The "obvious" way to accomplish this is to employ a dialog box with two spinner controls, one for horizontal offset and one for vertical offset, right? Possibly you might include a preview image, so the user can see what happens when she enters a new value, so she doesn't need to hit Undo if it doesn't look right. When the user is ready, she clicks OK and the drop shadow is added to the object she selected. There's nothing really terrible about this interface, but there's nothing really useful or compelling about it either.

But what if in place of the spinners and passive preview area, the dialog had a dynamic preview area where the user could just grab the drop shadow by clicking and dragging, and move it wherever she wanted in real time? And what if, instead of a dialog box, this happened right in the main window of the program, so that the user could see exactly how the drop shadow would look in the full context of the document? She could perhaps press the Enter key to confirm or the Esc key to cancel the operation, or choose similarly from small controls that appear when the cursor is within the bounding box of the drop shadow. If the actual numeric values of the offset are important, those could be displayed as an overlay nearby the drop shadow, in the status area of the application, or even in editable fields in a toolbar or dockable palette.

Dragging a drop shadow much more closely approaches the ideal of direct manipulation. Like the carpenter swinging his hammer, the user can place the shadow just so, and clearly and immediately receive direct feedback regarding his input. He doesn't have to wonder whether three pixels are too few or four pixels are too many. He can see when it's just right. The more you can make use of direct manipulation, the more useful and compelling your applications and their interactions are likely to be.

In this last part of the example, you'll notice that there's a bit of modality to the interaction, but it hardly seems modal. This is part of the power of direct manipulation over the use of standard dialogs—even when there are some decisions to make, they don't feel the same as a dialog that stops you in your tracks because they are better integrated into the main flow of the application. Of course, the drop shadow could also be implemented as a completely independent effect layer, in which case there's no modality at all. If you don't want it there, just delete the layer.

Example 2: Specifying grids

A grid might, as in the "before" case of the drop shadow example, be controlled through a small dialog box with two edit controls for specifying the horizontal and vertical interval of the grid. Why not replace these controls with a dynamic preview swatch of grid that the user can adjust by direct manipulation? When the user moves the cursor over the swatch, the cursor changes to indicate that the sample grid is pliant. The user can then just click and drag anywhere in the swatch to adjust the spacing. Dragging down opens the vertical interval. Dragging up closes it. Dragging right or left works the same way for the horizontal axis. In order to adjust one axis without inadvertently affecting the other, you can use a drag threshold like the one described in Chapter 23, or let the user hold down a Shift key, which has become a fairly standard idiom for axis locking in drawing programs. You could also imagine a direct-manipulation grid control built directly into the rulers on the main screen—grab a handle, and pull to stretch it or compress it—this would make the interaction even more direct.

Both the drop shadow control and the grid control replace ugly, inappropriate text controls with the direct manipulation of graphical objects that were visually appropriate to the desired result. The user could stay in context, even though the tools are used rarely enough to justify their residing on dialog boxes. Both controls finesse away the need for text entry and provided visual, bounded, direct manipulation of the settings.