Comments on: Drag ‘n Drop is Invisible To Users

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

Thu, 20 Mar 2008 04:30:05 +0000

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

By: Upali

Upali — Thu, 09 Aug 2007 05:54:28 +0000

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.

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

Tue, 10 Oct 2006 14:19:37 +0000

[...] [...]

By: Project Syndicate » Netflix nails it

Project Syndicate » Netflix nails it — Mon, 09 Oct 2006 16:53:59 +0000

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

By: Jared Spool

Jared Spool — Thu, 19 Jan 2006 00:16:32 +0000

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.

By: bbscan

bbscan — Wed, 18 Jan 2006 21:08:51 +0000

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.

By: Al

Al — Mon, 07 Nov 2005 22:46:21 +0000

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

By: Andy Kirkwood

Andy Kirkwood — Sun, 06 Nov 2005 22:37:06 +0000

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.

By: Paul Irish

Paul Irish — Wed, 02 Nov 2005 16:16:01 +0000

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

By: Paul Irish

Paul Irish — Wed, 02 Nov 2005 16:14:55 +0000

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 while we’re at it.

By: Dave K

Dave K — Tue, 01 Nov 2005 21:00:23 +0000

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.

By: Jared Spool

Jared Spool — Tue, 01 Nov 2005 18:22:09 +0000

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.

By: Jason Reynolds

Jason Reynolds — Tue, 01 Nov 2005 17:19:49 +0000

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

By: Jared Spool

Jared Spool — Tue, 01 Nov 2005 17:08:11 +0000

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?

By: Tom Werner

Tom Werner — Tue, 01 Nov 2005 16:36:46 +0000

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.