Drag ‘n Drop is Invisible To Users

Jared Spool

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.

Netflix's Movie Queue has Drag-and-Drop instructions at the bottom

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.

[UPDATE: Viveka insists I'm using the term affordance wrong. Frankly, I don't care, because it's the meaning of the term that's important, not the actual word. So, if you agree with Viveka (and a lot of folks do), feel free to correct me.]

18 Responses to “Drag ‘n Drop is Invisible To Users”

  1. Tom Werner Says:

    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.

  2. Jared Spool Says:

    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?

  3. Jason Reynolds Says:

    Check out the todo lists in Basecamp for a design similar to what Tom is talking about.

  4. Jared Spool Says:

    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.

  5. Dave K Says:

    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.

  6. Paul Irish Says:

    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.

  7. Paul Irish Says:

    btw- the instant comment preview on this blog was extremely helpful when writing that code. thank you. :)

  8. Andy Kirkwood Says:

    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.

  9. Al Says:

    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’ ?

  10. bbscan Says:

    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.

  11. Jared Spool Says:

    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.

  12. Project Syndicate » Netflix nails it Says:

    [...] 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.) [...]

  13. Dave Weaver - Mission Research - CTO Blog > Affordance, Usability And Making GiftWorks Easy Says:

    [...] [...]

  14. Upali Says:

    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.

  15. Marta Strickland's blog - recentlyconsumed.com - digesting technology and vinology Says:

    [...] 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 [...]

  16. Julie Horton Says:

    While I think this example from Netflix is good, I would agree with Paul Irish when he says “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?”

    I believe that saying “we’ll just add instructions” might work well for simple sites like Netflix. However, I’d be careful to extend this example to more complex sites.

    What I’d like to know is if this functionality has been usability tested – especially if it has been tested on more complex sites and/or sites that use the functionality with help text. Do users see and/or read the help text? Do they understand how to use this functionality without instruction?

  17. Reclaiming Affordances « 場 (ba) Says:

    [...] Please stop it. If you hear someone else misusing it (and I don’t care if it is Jared Spool), then call them out. We need this word back, and if language is indeed made by its users, well [...]

  18. nauka jazdy Says:

    nauka jazdy…

    [...]Drag ‘n Drop is Invisible To Users » UIE Brain Sparks[...]…

Add a Comment