Making Direct Manipulation Visible

As I mentioned earlier, both Windows Explorer and Internet Explorer allow you to drag and drop the title bar's document icon to create a shortcut to the currently displayed disk, folder, or Web page. I think this is a really good feature, and I wish all Windows programs allowed you to do this. I'd also like to be able to drag the title bar icon to make a shortcut to the program itself. I could then add a shortcut to a running program to the Quick Launch bar with little effort.

The problem with this feature and its possible variations is that it isn't visible. As currently implemented, there is no visual indication suggesting that the title bar icon can be dragged. The cursor doesn't even change shape when it passes over the icon. Without visibility, very few users will discover this feature.

In general, direct manipulation needs the following forms of visibility:

• Before the manipulation, the interface should suggest that an object can be manipulated and perhaps suggest how to do it.
• During the manipulation, the interface should indicate that a manipulation is in progress.
• After the manipulation, the interface should indicate that the operation was successfully completed or cancelled.

Indication prior to the manipulation can be achieved in two ways—by the visual characteristics of the object itself, such as handles or grabbers, and by the shape of the cursor. Of course, both techniques are often used together. Also, sometimes an object becomes highlighted when the mouse passes over it to show that it can be manipulated. Here are some typical examples of handles:

Painting and drawing programs are famous for using the cursor to show the kind of manipulation possible in the program. The following graphic shows some typical examples of cursors that suggest the ability to manipulate:

At the very least, you should indicate that an object can be manipulated by changing the cursor.

TIP

---

You should indicate that an object can be manipulated by changing the cursor.

How a user interface indicates that manipulation is in progress largely depends on the type of manipulation. According to our definition of direct manipulation, the in-progress feedback needs to indicate the results of the interaction, and it needs to be immediate. Selection is always indicated by highlighting the background of the selected objects. Actions such as sizing and moving are indicated either by actually sizing or moving the object or by showing a frame that indicates the currently selected size or location. Drag-and-drop functionality is typically represented by having the cursor move a ghost image of the object (created by alternating the object's image with translucent pixels) and change shape to indicate when the object is over a drop target. If several types of manipulation are possible for an object, the interface needs to indicate which option is taking place. Windows Explorer indicates a move with a normal cursor, a copy with a cursor and a plus sign, and a shortcut with a cursor and a shortcut arrow. In the case of dragging title bar icons, dragging a shortcut to the program could be indicated by showing the program icon with a shortcut arrow and dragging a shortcut to a document could be indicated by showing a document icon with a shortcut arrow.

A successful manipulation is typically indicated by the action completing. For example, the object changes size or shape, or the files are moved to the target and removed from the source. The indication is often obvious, but sometime it is subtle. Too subtle, perhaps. For example, when you move a file in Windows Explorer, there's about a two-second delay before the file icon in the source folder is removed. The fact that the file has been removed from the source folder is fairly clear, but you have no positive visual feedback that the target folder was the one you intended. A simple animation, such as the target folder icon opening and then closing (or even a Pac-Man-style devouring of the files), would provide even better feedback.

You can cancel a drag-and-drop operation by dropping the object back on its source or an invalid drop target or by pressing the Esc key during the drag. Windows indicates a cancellation with the Esc key by removing the ghost image of the dragged object. I find this technique works fairly well. In fact, I think it should be used whenever an object is moved back to its source to clearly indicate that method of cancellation.