UI design for ordering items in list

Question

What component/UI design would you use for ordering items in a list (a table with move up/down buttons)?

Answer 1

Drag & drop of items is probably the best for most UIs. Unfortunately, it is difficult to make this feature discoverable. A "grabber" area close to each item helps. Visual feedback while dragging as well as automatic scrolling when an item is dragged to an edge are are necessary in a good drag & drop sorting UI.

It is good to provide move up and move down buttons, in addition to drag & drop. There is no universally and immediately recognized "grabber" icon/style. For infrequently used interfaces, time spent using the somewhat clumsy buttons may be less than the time for the user to discover the more efficient drag & drop functionality.

Moreover, with drag & drop there are many subtle details which are frustrating to the user if not done correctly (e.g. autoscroll). Buttons are inefficient in frequent use, but obvious, straightforward to use and much easier to code.

Answer 2

I'd agree that direct manipulation of elements is probably preferred now.

Notwithstanding the accusations that 37 Signals are a bit on the arrogant side, their Basecamp is an eminently usable application. Almost any list within that app allows reordering of elements via drag n' drop.

First, you have to click to go into re-ordering mode, via a text link in the upper corner. Then there's a small image that clearly suggests 'grabbability' which you click and hold and then manipulate to move the item. See attached.

Answer 3

My preference is to use drag and drop with clear drag selectors that show up on mouseover. In our application we use a double up/down arrow that shows up to indicate the item can be reordered.

Simply changing the cursor is good enough for a tech-savvy crowd, but for general purpose apps you want something more obvious.

Answer 4

Drag and drop can be considered 'direct manipulation', where clicks directly on the list have an effect, vs 'indirect manipulation' where you have a separate button or other action that takes effect on the list.

Depending on what is in your list, both might be appropriate.

Whatever you do, please bear in mind the sage advice of Jakob Nielsen's Top 10 Application Design Mistakes:

Drag-and-drop designs are often the worst offenders when it's not apparent that something can be dragged or where something can be dropped. (Or what will happen if you do drag or drop.) In contrast, simple checkboxes and command buttons usually make it painfully obvious what you can click.

So if you provide a direct manipulation ability on a list, provide visual cues such as:

1. visual 'grabber' area (series of dots or lines) that suggest 'grabbability'
2. cursor change
3. feedback as you move. See this demo although notice how my point (1) is not supported and so it's not obvious that these lists are sortable.

Answer 5

Up/down buttons are OK, but the trend is towards operating on the data directly, i.e. being able to click (or tap) on the item and then move it. A prominent example is the Netflix queue. This can work even when selecting multiple items in the list.