Click-and-drag controls

Many controls, particularly menus, require the moderately difficult motion of a click-and-drag rather than a mere click. This direct-manipulation operation is more demanding of the user because of its juxtaposition of fine motions with gross motions to click, drag, and then release the mouse button. Although menus are not used as frequently as toolbar controls, they are still used very often, particularly by new or infrequent users. Thus, we find one of the more intractable conundrums of GUI design: The menu is the primary control for beginners, yet it is one of the more difficult controls to physically operate.

There is no solution to this problem other than to provide additional idioms to accomplish the same task. If a function is available from the menu, and it is one that will be used more than just rarely, make sure to provide other idioms for invoking the function — idioms that don't require a click-and-drag operation.

One of the nice features of Windows, which recent versions of the Mac OS have also adopted, is the capability to work its menus with a series of single clicks rather than clicking and dragging. You click on the menu, and it drops down. You point to the desired item, click once to select it and close the menu. Microsoft further extended this idea by putting programs into a sort-of menu mode (as soon as you click once on any menu). When in menu mode, all the top-level menus in the program and all the items on those menus are active, just as though you were clicking and dragging. As you move the mouse around, each menu, in turn, drops down without your having to use the mouse button at all. This can be disconcerting if you are unfamiliar with it; but after the initial shock has worn off, the action is generally more pleasant, mostly because it is easier on the wrist.

Palette tool behaviors

In drawing and painting programs, after a tool or shape is selected from a palette, the user manipulates it by dragging. Palette tools have their own unique behaviors, which are worthy of separate mention here. There are two basic variants of palette tool behavior: modal tools and charged cursor tools.

MODAL TOOLS

With modal tools, the user selects a tool from a list or specialized toolbar, usually called a toolbox or palette. The display area of the program is now completely in the mode of that tool: It will only do that one tool's job. The cursor usually changes to indicate the active tool.

When the user clicks and drags with the tool on the drawing area, the tool does its thing. If the active tool is a spray can, for example, the program enters Spray Can mode and it can only spray. The tool can be used over and over, spraying as much ink as desired until the user clicks on a different tool. If the user wants to use some other tool on the graphic, like an eraser, he must return to the toolbox and select the eraser tool. The program then enters Eraser mode and can only erase things until another tool is chosen. There is usually a selection-cursor tool on the palette to let the user return the cursor to a selection-oriented pointer, as in Adobe Photoshop, for example.

Modal tools work both for tools that perform actions on drawings — like an eraser — or for shapes that can be drawn — like ellipses. The cursor can become an eraser tool and erase anything previously entered, or it can become an ellipse tool and draw any number of new ellipses. The mouse-down event anchors a corner or center of the shape (or its bounding-box), the user drags to stretch out the shape to the desired size and aspect, and the mouse-up event confirms the draw.

Modal tools are not bothersome in a program like Paint, where the number of drawing tools is very small. In a more advanced drawing program such as Adobe Photoshop, however, the modality is very disruptive because, as the user gets more facile with the cursor and the tools, the percentage of time and motion devoted to selecting and deselecting tools — the excise — increases dramatically. Modal tools are excellent idioms for introducing users to the range of features of such a program, but they don't usually scale well for experienced users of more sophisticated programs. Luckily, Photoshop makes extensive use of keyboard commands for power users.

The difficulty of managing a modal tool application isn't caused by the modality as much as it is by the sheer quantity of tools. More precisely, the efficiencies break down when the quantity of tools in the user's working set gets too large. A working set of more than about five modal tools tends to get hard to manage. If the number of necessary tools in Adobe Illustrator could be reduced from 24 to eight, for example, its user interface problems might diminish below the threshold of user pain.

To compensate for the profusion of modal tools, products like Adobe Illustrator use meta-keys to modify the various modes. The shift key is commonly used for constrained drags, but Illustrator adds many non-standard meta-keys and uses them in non-standard ways. For example, holding down the Alt key while dragging an object drags away a copy of that object, but the Alt key is also used to promote the selector tool from single vertex selection to object selection. The distinction between these uses is subtle: If you click something, then press the Alt key, you drag away a copy of it. Alternately, if you press the Alt key and then click on something, you select all of it, rather than a single vertex of it. But then, to further confuse matters, you must release the Alt key or you will drag away a copy of the entire object. To do something as simple as selecting an entire object and dragging it to a new position, you must press the Alt key, point to the object, click and hold the mouse button without moving the mouse, release the Alt key, and then drag the object to the desired position! What were these people thinking?

Admittedly, the possible combinations are powerful, but they are very hard to learn, hard to remember, and hard to use. If you are a graphic arts professional working with Illustrator for eight hours a day, you can turn these shortcomings into benefits in the same way that a race car driver can turn the cantankerous behavior of a finely tuned automobile into an asset on the track. The casual user of Illustrator, however, is like the average driver behind the wheel of an Indy car: way out of his depth with a temperamental and unsuitable tool.

Adobe Illustrator is firmly rooted in the Macintosh world. One of the errors that Adobe made in its Windows interface design was refusing to take advantage of the benefits of the two-button mouse, something that comes cheap or free with Windows. Illustrator doesn't use the right mouse button at all. Undoubtedly, someone in the company felt that interoperability with the Mac was more important. Adobe could have put all selection tools on the left button and all drawing tools on the right button, for example. Users could then go back and forth between drawing things and manipulating them just by deciding which mouse button to use, and even better, each button would then have available to it three meta-keys: Alt, Ctrl, and Shift.

CHARGED CURSOR TOOLS

With charged cursor tools, the user again selects a tool or shape from a palette, but this time, rather than the cursor switching permanently (until the user switches again) to the selected tool, the cursor becomes loaded — or charged — with a single instance of the selected object.

When the user clicks once in the drawing area, an instance of the object is created on the screen at the mouse-up point. The charged cursor doesn't work too well for functions (though Microsoft uses it ubiquitously for its Format Painter function), but it is nicely suited for graphic objects. PowerPoint, for example, uses it extensively. The user selects a rectangle from the graphics palette, and the cursor then becomes a modal rectangle tool charged with exactly one rectangle.

Many common drawing programs work this way, but it is also very popular for graphic direct-manipulation idioms in programs that aren't normally thought of as drawing programs. A good example is Visual Basic. When the user clicks on one of the controls on the tool palette, the cursor becomes charged with that control. The user then clicks again to create a single instance of the control on a form. Borland's Delphi uses charged cursor too, but if you Shift-click on a control in the palette, you, instead, get a modal tool for creating multiple instances of a control. Nice touch.

In many charged cursor programs like PowerPoint, the user cannot always deposit the object with a simple click, but must drag a bounding rectangle to determine the size of the deposited object. Some programs, like Visual Basic, allow either method. A single click of a charged cursor creates a single instance of the object in a default size. The new object is created in a state of selection, surrounded by handles (which we'll discuss in the next section), and ready for immediate precision reshaping and resizing. This dual-mode, allowing either a single-click for a default-sized object or dragging a rectangle for a custom-sized object is certainly the most flexible and discoverable method that will satisfy most users.

Sometimes charged cursor programs forget to change the appearance of the cursor. For example, although Visual Basic changes the cursor to crosshairs when it's charged, Delphi doesn't change it at all. If the cursor has assumed a modal behavior — if clicking it somewhere will create something — it is important that it visually indicate this state. Charged cursor also demands good cancel idioms. Otherwise, how do you harmlessly discharge the cursor?