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


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.

  • maybe a message that is shown (faded in) when the user uses the button to inform them about drag & drop. – Ian Oct 6 '10 at 9:12
  • There is actually a quite common visualization: a grid of 2x3 or 2x4 small gray rectangles: pasteall.org/pic/78908 @Ian: I like such indicators to show on hover, but it doesn't really work for touch devices. – CoDEmanX Oct 24 '14 at 23:31

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.
  • Drag and drop on the desktop is dead for exactly this reason. No discover-ability. Works best as a compliment to buttons imo. – Gusdor Nov 22 '13 at 8:52

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.

alt text

  • however not everyone has good enough hand/eye control to use drag/drop well. Button are easyer for a lot of users. – Ian Oct 6 '10 at 9:13
  • Buttons, however, are not the type of convention that users would expect for re-ordering elements. Arrows, perhaps. In the example I used above, the user is first provided a link that says "Re-order this list" or similar and then when they click it, these DnD icons appear next to the list items. These icons are as large, if not larger, than many button or arrow implementations I have seen - so your comment really seems to focus more on the size of these elements, not whether they are the correct ones. – jameswanless Oct 20 '10 at 17:45

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.