Drag-n-Drop on the Web

Overall, drag-n-drop is a popular interaction method, most people get it, and it is often requested. However, there is a distinction for many people between desktop environments and web sites or web applications. The “click for action” paradigm on web sites is very strong, and drag-n-drop is not yet as common on the web. We often find that we have to explicitly tell people that they may drag-n-drop items, but once they know it is available, they get it and use it properly.

The one problem with drag-n-drop (on the desktop and on the web) is that there is no uniform way to visually indicate drag-ability and inform people that the functionality is available. Buttons look clickable and underlining links is a well-known convention, but nothing really looks drag-able. People often must try to see if something is drag-able, hence the need to inform people explicitly.

Drag-n-drop in file management dialogs in a desktop environment is a good example of a learned behavior: the filenames do not really look draggable, but we have learned to drag them around and drop them where we want them. Similarly, we have learned that we can drag-n-drop appointments in our calendars as well as re-arrange our email.

The whole idea of dragging an electronic document (or image or other virutal object) composed of electromagnetic bits and putting it in a “place” relies on the metaphor of space: physical things can be found in places and can be re-arranged. We can re-arrange files in a cabinet, books on shelf, pictures in a scrapbook, or bricks in a new patio. While tangible objects have the affordance of being grasp-able, electronic objects may not.

On the web we have to create designs and provide guidance to help people draw the analogy between physical and virtual dragging and use drag-n-drop in situations where the concept of space applies to the virtual object. We need to help people transfer the skills they have learned in one situation (e.g., desktop applications or making a scrapbook) to another, new situation (e.g., placing merchandise in an online shopping cart by dragging rather than clicking.) Luckily, most of the virtual objects we drag-n-drop around do have the property of location (or space), so the drag-n-drop paradigm typically works well.

Are there instances where a virtual object lacks the analogous property of space and would therefore be confusing to drag-n-drop? Are there situations when dragging and dropping a virtual object would make little sense as an interaction method or would be more complicated than other interaction methods? For example, although it may be possible to select dates for a flight or hotel reservation using drag-n-drop calendars, it may not be as efficient or usable to abandon the drop-down lists or clickable calendars.

Drag-n-drop is an effective, easily learned, and relatively common interaction method, and as web technologies improve and grow we will have many more opporunities to incorporate drag-n-drop in our interaction designs for web sites and web applications.