Drag-and-Drop Controls

Q: Are there any usability issues with using drag-and-drop controls in a web application?

AJAX technology makes it easier to add drag and drop controls to a web application. This is great news. Many times we’ve tested complex web applications where the users asked for drag and drop controls that were not available at the time for the given technology platform.

Download this file to see a video demo of how drag and drop works. (You’ll also need the QuickTime player.)

The advent of AJAX does present at least one major usability issue, though. With drag and drop controls, there is no automatic perceived affordance (the user’s ability to perceive that an action is possible). Since web technologies haven’t commonly supported drag and drop until now, it’s difficult for users to understand when an object in the UI is draggable or droppable. It is especially difficult since the objects don’t usually look different from objects that do not have this functionality. Adding visual affordances such as shading, cursor changes, text and other elements can help to communicate that an item is draggable.

One way to make it more obvious to users that an object has this interaction is to tell them so in the UI. Jared Spool shows an example of how Netflix is teaching users about drag and drop in a June 2005 column.

There is another issue with this functionality, too: performance. Thomas Baekdal notes that in shopping cart applications, drag and drop is over 1000% slower than clicking an “add to cart” button.

Before you decide to implement drag and drop, consider whether it is the right solution for your users. Don’t just implement new technology for new technology’s sake. If you do decide to use drag and drop functionality, make sure to give users a way to notice and learn the interaction.