Nexus – Drag and Drop

dragdrop

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.

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.

before

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

during

3. The two items, in the new order.

after

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.

2 thoughts on “Nexus – Drag and Drop

  1. Hey Craig – thanks for asking!

    There’s now a link in the header bar from every page on the blog. Just a text link for now, may jazz it up once nexus reaches the next level.

Leave a Reply

Your email address will not be published. Required fields are marked *