Drag & Drop: Usability Information

Recently, there has been some discussion on implementing Drag & Drop. I thought people would be interested in this article which recently appeared in our newsletter, Eye For Design. (See end of the article for information on getting a free issue.)

DRAG & DROP HAS A LEARNING PROBLEM In testing the designs of several client's products, we've observed several issues related to how users learn drag and drop operations. While drag and drop can improve a user's productivity considerably, if they can't learn how to use it, the benefits will not be realized. Here are some of the problems we've observed.

Users May Not Expect It

User expectations are often shaped by other products that they've worked with. However, we've observed that drag and drop experiences always seem to translate well to new products.

For example, just because users have dragged files in the Windows 3.1 File Manager doesn't mean that they look for drag and drop capability in some other application. Users don't see the File Manager as an application. (It appears as a piece of a bigger thing -- the operating environment.) Therefore, they don't seem to connect that an application's interface might be similar to the File Manager. In testing other applications, we've seen that users are often not aware of drag and drop methods, and have to learn about them in each application.

Since every application that implements drag and drop seems to implement it slightly differently, it's no wonder that users have trouble transferring knowledge from one application to another.

It's Only A Shortcut

We've observed that new users typically learn product functions from menus or toolbars then "graduate" to faster methods such as double-clicking and drag and drop. If there is functionality that can only be accomplished by drag and drop, users may never find it at all.  We saw this in the Lotus 1-2-3 dialog box for editing SmartIcons -- users didn't realize they were supposed to drag icons from one list box to another.

Four Things To Learn

Users must learn four concepts to use drag and drop effectively:

1. "What objects can I drag?"
2. "Where can I drop them?"
3. "What's it going to do when I let go?"
4. "If I don't like it, how do I undo it?"

No Clues

The first two questions arise when clues are missing. Drag and drop isn't readily visible. Users must learn that it exists through some external mechanism.

One development team we worked with tried a visual cue, using a small blue square to indicate a draggable object. Users didn't get it. The team then tried another tack: illustrating the drag and drop capability on a mockup of the product box. This worked better -- users picked up on the drag and drop capability and used it successfully. Caveat: we don't know whether in real life users would have looked at the box!

What's The Verb?

The "what's it going to do?" issue arises because the verb is implied by a drag and drop operation often depends on the context. Consider the Windows 3.1 File manager, where dragging a file to a directory on the same disk moves the file, but dragging a file to a different disk copies it. Same drag and drop, but two different verbs are implied depending on the relationship between the source and destination.

Cursor icons can provide clues, but users must still learn what the different icon mean. Microsoft Publisher tries an interesting idea: attaching words to cursor icons. For example, the "Move" icon shows a picture of a truck with the word "Move" on it. Although we have not tested drag and drop in Publisher, we do have ample evidence that an icon and word approach improves recognition for toolbar icons.

How Do You Undrop?

Since drag and drop can have destructive consequences, users need a way to undo drag and drop they didn't intend. In one test, we saw several users accidentally destroy spreadsheet charats as follows:

• User wants to move entire chart, but positions the mouse insed the chart and drags just part of the chart
• User notices error an makes an unsuccessful attempt to drag it back the way it was
• User tries undo, but it only undoes the last action (the attempted correction, not the accidental drag)
• After a few more attempts to correct the chart manually, user deletes the chart and re-creates it

Thus, adding drag and drop capability to an interface may increase the need for verification questions and/or multiple levels of undo.

User Interface Engineering produces a bimonthly newsletter called Eye For Design, which contains the latest tips and techniques for developing excellent applications. You'll read about the latest research we've done on how to build usable applications.

If you send us your postal address, we'll send you a complimentary issue.

(c) 1995, 1996 User Interface Engineering

 Jared M. Spool                User Interface Engineering
 jspool_at_uie.com            800 Turnpike Street, Suite 101
 (508) 975-4343                   North Andover, MA 01845
 fax: (508) 975-5353                                  USA

      If you send me your postal address, you'll get
     the next issue of our newsletter, Eye For Design.
==========================================================