Drag ‘n Drop is Invisible To Users
November 1st, 2005
In the world of cognitive psychology, there’s something known as an affordance. Affordances are clues that communicate to a user how they should use an object.
For example, assuming you’re familiar with the convention, a type-in box communicates to the user that they should click within the box and start typing if they want to enter data.
With the advent of AJAX-style interactions, it has become easier to add drag-and-drop elements to web pages. These allow the user to grab an item and move it to another part of the screen, to allow activities such as reorganizing data.
The problem with drag-and-drop is that it doesn’t have any affordances. You can’t tell when you’ve encountered an element that is dragable. The result is that this powerful capability is often only known by developers.
Netflix is clever. They’ve figured this out and acted appropriately.
They offer a margin feature that allows their users to see the top items in their movie queue. And, to give users that extra umph of interface goodness, you can reorder the queue with drag-and-drop.
What Netflix figured out was that nobody else would figure it out unless they included instructions. So, that’s exactly what they do. In a very concise box at the bottom of the list, they include a Helpful Tip that visually demonstrates the drag-and-drop capability.
Clever, clever, clever.
November 1st, 2005 at 12:36 pm
Another excellent way to introduce ajax reordering is to have a “reorder” link that when clicked shows little “drag” icons next to each item. The combination of clicking a link called “reorder” and the appearance of “drag” icons should be enough to clue users into the fact that they should drag the little icons in order to reorder the list.
November 1st, 2005 at 1:08 pm
Hi Tom,
I’m having trouble picturing what the drag icon looks like with the reorder link. Do you have a design you can point us to?
November 1st, 2005 at 1:19 pm
Check out the todo lists in Basecamp for a design similar to what Tom is talking about.
November 1st, 2005 at 2:22 pm
I think the Basecamp is a good example of how you need to compensate for DnD’s inherent lack of affordances. They’ve got both the Reorder link and the hint on the right side margin.
November 1st, 2005 at 4:00 pm
I think Google’s personalized homepage utilizes a very successful DnD affordance in a familiar windows convention. Upon hovering over an item that can be dragged and dropped, the cursor transforms from an arrow to the “move” state letting a user know he or she can dnd the item like a window. However, i wonder how this would look when applied to list of items.
November 2nd, 2005 at 11:14 am
I wouldn’t be eager to say that including instructions is a clever solution, per say. Is writing an iPod manual more clever than designing an intuitive product?
And although there is really no Windows convention whereby a move cursor means the object is movable (its more of a Powerpoint/Excel convention), that solution really is the most graceful.
In addition to changing hover cursor to the move variety, I could envision raising the position of the text and perhaps adding a small left and bottom border — similar to a button — to convey that the hovered text is actionable. And how about adding <a title=”Drag this item to change its position”> while we’re at it.
November 2nd, 2005 at 11:16 am
btw- the instant comment preview on this blog was extremely helpful when writing that code. thank you.
November 6th, 2005 at 5:37 pm
In the case of screen-based interface design, the preferred term is ‘perceived affordance‘. Perceived affordance is concerned with the relationship between the ‘look of a thing’ and how it can be used.
The perceptual psychology use of affordance is concerned, in part, with the physical characteristics of an object. This is only relevant to interface design in terms of physical input devices: mouse, tablet, touch-screen (surface), etc.
November 7th, 2005 at 5:46 pm
Although drag and drop isn’t used as a primary interface in the most popular applications (office type apps), It is a primary user interface for many graphics apps. In these such apps it is often a 2 step process :-
1) Select object to be moved, this is reinforced by visual feedback such as the appearance of ‘Handles’
2) Drag the object to the desired position.
Maybe we should use the same two step process and have some uniformed ‘handles’ or even single step ‘hover handles’ ?
January 18th, 2006 at 4:08 pm
Has anyone received any customer feedback on AJAX yet? I think it can be implemented pretty slickly, but I would be curious what less experienced users think.
January 18th, 2006 at 7:16 pm
bbscan, it seems to work pretty well most of the time. It still runs into problems with statelessness, but, in general, it can do well. One doesn’t have to look further than Yahoo!, Google, Flickr, or Netflix to find examples that work well with users.
October 9th, 2006 at 12:53 pm
[...] Too bad the site killed the drag-and-drop mini-queue though. It was an easy way to reorder your top 10. (And from a UI perspective, it had a nice affordance clue that explained how to use it.) [...]
October 10th, 2006 at 10:19 am
[...] [...]
August 9th, 2007 at 1:54 am
It would be great, if you could share a few interesting representational styles of this type of interactivity. Most of the time we are simply dragging and dropping the items for some end result. But maybe we can still make it more engaging and interesting for the learner.
March 20th, 2008 at 12:30 am
[...] and drop utilizes what cognitive psychologists would call an “affordance”, or a clue that communicates to users how to uses an object. It’s natural. From the minute [...]