Monday, November 7th, 2005

Drag and Drop Ajaxian Indicators

Category: Editorial

We can do drag and drop in browsers these days, which is made more useful with Ajax, since you can do something server side on a drop. Our lovely toolkits like Dojo and Prototype also make working with drag and drop pretty trivial, and what does this all lead too?

“Wow, thats cool. Let’s do it!” :)

We need to remember that drag and drop is invisible to users, and that we need to give our users queues to how it can be used in our interface.

I have sat there watching a user stare at the screen not knowing how to add something to their shopping cart because there was no “add to cart” or “buy” button. They needed to drag the object onto the cart, but that isn’t the way we have done it on the web for years.

Netflix comes out and tells you out right.

What other cues can we use to get people thinking more about drag and drop for when it makes real sense in our interface.

As a power user, I would love to be able to hit a key and see all of the keyboard shortcuts available for the current application, as well as drag and drop options.

Posted by Dion Almaer at 8:51 am

3.4 rating from 8 votes


Comments feed

I think what you want to give your users are *cues*

Comment by Craig Allen — November 7, 2005

I’ve been pondering this too. My current inclination is to have ‘analog’ links that would work the traditional way, then use feature sniffing to attach ajax events to them. For example, if your product thumbnail was meant to be dragged into the cart area, I’d also have the standard “add to cart” link and attach an event to it that would animate the thumbnail dragging into the cart, then cancel the link with ‘return false’.

Another thing that seems fairly straightforward and should almost be considered a bare minimum is to use the ‘title’ attribute to give a tooltip on what you’re supposed to do, and use css to style the cursor.

Comment by Mike Ritchie — November 7, 2005

I agree this is a conundrum. It would be nice if there was something obvious, like an underline indicates “I’m a link” and a button indicates “press me to do something”. allows handles to be associated with the draggable object. If there was some consensus on what this handle should look like eventually users will get the idea. Also, the drop zone for the draggable should be indicated as well, maybe as soon as you start dragging an object, the area that accepts the object should be highlighted or get the users attention in some other way so users have an idea about what we want them to do. :)

I’m starting to see more posts on this topic so hopefully some like this will evolve soon.


Comment by Linda — November 7, 2005

This is a good point, given that DnD has rarely been used on the web until now.

A few ideas:
– Visually render draggable items as being “in front of” their container. e.g. Use cues like drop shadows and transparency.
– Provide draggable handles. There are some fairly well-understood conventions for designing these, e.g. curved edges, bevelled surface.
– Change the CSS cursor property
– Tooltips, as Mike mentioned. I would consider something fairly big and obvious if this is the first time the app’s used, according to cookies and the fact the user hasn’t registered. A little intrusive, but worth the trade-off.
– Animated GIF in the tooltip. e.g. a speech balloon-style tooltip with an animated GIF showing an icon being picked up and dragged somewhere. Similar to the animation used in windows help (e.g. the autocomplete dialog when you first use IE).
– Even if you provide “analog links” (a good thing to do), animate the movement as if it were being dragged, e.g. from the catalogue into the shopping cart, or from the shopping cart to a trashcan if you delete it.

Comment by Michael Mahemoff — November 7, 2005


Comment by babito — December 1, 2005

Leave a comment

You must be logged in to post a comment.