7

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

Improve this question
1

5 Answers 5

Reset to default
6

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.

Improve this answer
3
  • maybe a message that is shown (faded in) when the user uses the button to inform them about drag & drop.
    – Ian
    Oct 6, 2010 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, 2014 at 23:31
  • 2
    Drag and drop is also not an ideal pattern in every re-ordering case, at least not as the only interaction; long lists, for example, might benefit more from numeric reordering (perhaps a mode that can be enabled), or if there is only one important position, radio buttons could suffice to select that item. And as noted about scrolling above, there are animation and affordance nuances that can make or break your usability, so plan carefully.
    – Mattynabib
    Apr 25 at 13:43
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.
Improve this answer
1
  • 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, 2013 at 8:52
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.

alt text

Improve this answer
2
  • 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, 2010 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, 2010 at 17:45
0

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.

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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