links for 20 August 2006

when to use drag & drop (some informal research results)

One of the great challenges of Interaction Design these days is that we now have a plethora of new ways to design interaction on the web than we did just a few short years ago. Drag and drop is probably one of the best – creating a sense of empowerment over the interface that can sometimes result in an almost joyful user experience.

Despite the fact that we’ve been designing with drag and drop for a while now, it’s taken this long for me to have the opportunity to do some good solid user testing with users comparing drag and drop with more traditional interaction styles. That is … clicking :)

In the test that were we performing we were (amongst other things) examining the use of drag and drop and clicking to perform two types of tasks: to select objects and place them onto a stage, and to manipulate objects on a stage.

One interface used drag and drop for both tasks. One interface used click to select and drag and drop to manipulate.

When users were interacting with the prototype that used drag and drop for both functions it was common for them to make unsolicited comments about the interface – generally expressions of delight at the responsiveness of the interface and the novelty of the interaction method. Of course, drag and drop is not really so novel – many users are accustomed to this method, and we found that no users (of the 15 we tested) were unfamiliar with the drag and drop method or had any difficulties understanding how they were expected to achieve their task using drag and drop. (The interface did include a small instruction to drag and drop onto the stage).

Some of the tasks, such as removing objects from the stage and understanding how many objects could be dragged onto the stage were not immediately obvious, but through brief experimentation the users were rapidly able to achieve these tasks and exhibited no difficulty. In fact, in many cases they were saying ‘I wonder if I drag this back here will it delete the object’, as they performed the task and were pleased to discover that it worked exactly as they had expected it might.

When users were interacting with the ‘click to select’ interface, there were no such expressions of delight with the interaction, however they also had no difficulty achieving all of the tasks involved in the test.

Later, we asked the users to compare the two interaction experiences and talk about which they preferred and why. Without exception, we found that our test participants preferred the click to select interface over the drag and drop interface – despite the feedback they had given at the time of testing.

They agreed that drag and drop felt ‘fun’, and ‘creative’, but overwhelmingly stated that it was unnecessarily complicated, and that it was just as easy, or easier, to click. ‘Dragging was a drag’ was one of my favourite quotes. :)

On the other hand, users unanimously agreed that drag and drop was an ideal way to manipulate objects in relation to each other (particularly, to change the position of objects in relation to one another).

Based on the results of this testing, the logical findings seem to be that drag and drop is ideal for manipulating the position of objects on a stage, but that when ‘selecting’ objects, simply using click to select is preferable. Even considering that we may be wishing to create an interface that is fun and creative (which was why the full drag and drop approach was originally considered), the inefficiency of this method detracts from the user performing their task. Selecting the objects was considered a preliminary task, and the ‘fun’ part started when users got to manipulating the content.

When thinking of the best examples of drag and drop interfaces (and I think that moving around maps is a great example of this), it is once again the manipulation of objects on a stage and not object selection, that seems to be common.

Of course, it is also important to note that choosing a drag and drop interface also significantly compromises your ability to deliver an accessible interface. This should always be an important consideration when selecting an interaction method.

Designing a drag and drop interface? You could do much worse than refer to the Yahoo! Design Pattern Library where they’ve spent a lot of time thinking about all of the components of the interaction and what you’ll need to consider.

Have you done any testing with drag and drop interfaces? I’d be really interested to hear what you’ve found.