Drag ‘n Drop is Invisible To Users

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.

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