Nexus – Drag and Drop

Implementation continues on nexus, and we’ve re-factored the way that items in a bundle are ordered, as mentioned in our earlier post. We talk a little about affordance, and show a couple screen shots.

Drag and Drop Affordances

An affordance, to oversimplify, is an appearance of an object that causes users to intuitively know how to interact with it. We found a couple good articles on this challenge and posted them to nexus.

Drag and drop user interface elements are becoming more common on the web. The challenge is that many implementations do not make it obvious to users that the elements can be dragged and dropped. In the best case, users are missing out on powerful functionality. In the worst case, the user interface is frustratingly unusable. Here are the nexus links for the two articles we liked. Please read them, rate them, and comment on them.

• Drag and Drop Controls
• Drag ‘n Drop is Invisible to Users

Nexus Design Choices

The design decisions that we came away with from reading these articles were

1. Include a text explanation like “drag to re-order” so that people would know that it was an option.
2. Create an image that conveys the ability to drag to re-order the items.

Here are the screen shots of what we came up with for our first usable iteration on the task of re-ordering items in a bundle:

1. Two items, in order.

2. Dragging one of the items to re-order them.

3. The two items, in the new order.

The design element we created is a double-headed arrow, with some cross-bar lines that give it a tactile feel. When you drag one element past another, the second element moves into the space previously occupied by the first element. Screenshots don’t do it justice. It is really cool. Effectiveness will be determined by you – but I believe it will work.