Drag-n-Drop on the Web
by David HogueWednesday, September 21st, 2005
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.
January 18th, 2006 at 10:37 am
David,
I recently read your macromedia article “Modeling User Workflows for Rich Internet Applications” and I really like the workflow template that you used.
Did you create them with visio 2003? Also, what template and shapes did you use? I’ve searched high and low for that template and I cant seem to find it anywhere.
thanks
karl
January 18th, 2006 at 11:15 am
Karl,
I’m glad you found the Macromedia paper useful. Yes, the workflows were created with Visio 2003 Professional. The stencils and page templates were created by Fluid; the stencils have been adapted from some standard flowchart shapes and have evolved over the years as we have needed to represent different behaviors in the workflows.
If you have additional questions about the workflow modeling method, please contact us.
Thanks!
Dave
January 23rd, 2006 at 11:56 pm
Hi
I read your drag-n-drop article.I am working on dragndrop questions and am almost throgh with the functionality, still i feel it isnt perfectly done.
The design part and also the ease of dragging is not perfect.
If you could please help me out with some simple but inspiring dragndrop examples reference?
Shilps
Blog: flashonmind.blogspot.com
January 24th, 2006 at 1:56 pm
Shilpi,
I wish I could post a big list of successful instances of drag-n-drop UIs on the web, but I can’t. Truthfully, it’s just not done that well yet.
One case that does seem to be working well is the new Yahoo! Mail UI (still in beta.) I think this works so well because it is directly analogous to file management systems and desktop email applications - people already know how it works.
There are other web-based examples that I have seen for ecommerce (not that good yet, though interesting, because it’s faster to select an “add to cart” link than it is to aim, drag the item to a cart, and drop on the correct spot) and image/photo manipulation where users can change the display sequence and create photo groups (but this is how desktop applications work, too.) There are even web-based information architecture tools for card-sorting tasks that effectively use drag-n-drop (check out Rashmi Sinha’s company, Uzanto, and their MindMap tools at http://www.uzanto.com/ )
I believe we need to be careful about using drag-n-drop: we want it to facilitate and enhance the interaction, to make a task easier and faster to complete, but we do not want it to simply be gratuitous (e.g., “look what I can do! who cares if it makes the task more difficult…”) There are certainly cases where it could be a good interaction design choice, but we have an array of methods available to us as designers, and we should always ask the hardest question: just because it *can* be done, is that enough reason to do it?
I’d like to hear more about how you want to use drag-n-drop in your UIs, and I’ll to remember to take a look at your new site when it launches at the end of the month.
Best wishes,
Dave
January 25th, 2006 at 2:47 am
Hi Dave
Thanks, for taking out time to help me with my concern.I would also like to acknowledge that your explanation has provided me with a better approach to look towards the dragNdrop problem(…as you said … it should be developed to facilitate and enhance communication).
I had a look on the MindMap tools, where you can find a number of different dragNdrop ideas well played with.As I am very keen to learning, I would be reading your blog and Rashmi’s blog too.
I am working with Whizlabs, India.Whizlabs deals in Exam Simulators for Java,Oracle,CCNA certifications etc.
We have a typical question type i.e dragNdrop for our CCNA simulator.Here we use a questionimage with some blank places on it.These blank spaces are to be filled by dragging answers present as small components.We maintain the coordinates of the questions in an xml.
I wonder, if my explanation could make you any sense.I would appreciate if you have a look at one of our product and give your feedback on that.You can get a free trail download at the following address:
http://www.whizlabs.com/cisco/640-801-details.html
You can find the dragNdrop type question - Qno. 5 in trial exam.
Do have a look at my website……….. just 4 more days to go.
Best Regards
Shilps
Blog: flashonmind.blogspot.com