User interface for reordering a list items

Question

I have a list of items as a part of a web application. The question is how user can manipulate the order of items in the list (not the list sort order). The typical way is to use arrow buttons to move items up or down. The other way is the drag-and-drop.

But are there any other ways for a user interface for list reordering?

Answer 1

There are two other sorting methods (besides those you mentioned) I've seen which work pretty well.

Click To Move

The method used for ordering items in the Gallery web photo album works pretty well for ordering photos, and it should work just as well for any set that can be represented as a sorted group of clickable elements:

• Present your list of items as clickable elements.
• Clicking an element "selects" it, it is highlighted to indicate it's selected.
• Clicking another item moves the selected item to a position just before the clicked item.
• Repeat until all items are in the desired order.
• A dummy item is shown at the end of the list for moving items to the end.

This is slightly easier to use than drag-n-drop as it requires less dexterity, and you don't have to hold down the mouse button while you figure out where you want to "drop" the item.

The method could easily be extended to allow selection of multiple items (via shift-click or similar) which could then be placed in a new position in the same way.

Provide Order Numbers

Used by Netflix and some internal apps I've worked with. This works best if your users have a concrete idea of exactly what the numeric order should be (used when working with lists of instruction steps in our internal app).

• Present your list of items one per line.
• Provide a text entry box next to each item where the order number is displayed, starting with 1.
• The user changes the order numbers in the text fields as desired.
• If multiple items are given the same order number, they are placed next to each other.
• Provide a button to "apply" the sort in JavaScript so that the user doesn't have to submit the entire page to see the re-arranged list. This makes it easy to work in increments.

Edit: A couple of additional thoughts on Drag-and-Drop. You might have used these before or not, but there are a few things that can make drag-and-drop more forgiving and easier to use:

• Highlight the area where the item will appear when dropped. For example, show a prominent horizontal line between the two existing items where the item will be inserted if it is dropped.
• Ghost the draggable item as it is dragged so that it's obvious what's being moved, rather than using a generic "dragging" cursor. This works best if the items being dragged are still legible if shown on top of one another with transparency.
• Make sure the target areas where the draggable can be dropped are sufficiently large. Larger areas can be helpful for people who have trouble with the required coordination.

Answer 2

We've found that drag and drop can be counter intuitive for non-technical people. We have explored the Up Down Arrow which works but can also be cumbersome as you need to keep clicking up and down and it results in a lot of traffic.

Another paradigm we've explored is the Move button so each item in a list has a Move Item button when you click it new buttons are added before and after each item in the list to let you move the item to any location.

This works well when each item in the list takes a lot of space, if each list item is only a single row it can result in a cluttered interface. In our case each item was half a dozen lines of text or more. We also have add item here button before / after each item to allow insertion.

Survey Monkey uses this paradigm as well and inspired some of what we do.

Answer 3

Some thoughts - Very much on the ideas rather than implementation end though...

1 - Provide both up and down arrows and drag and drop, and monitor which is more popular, which type of users use which etc, then tailor from there once you have some data

2 - Add a "random" button which generates the order randomly - could be useless, could be fun depending on your app

3 - Add a "display order" field by the side of each item and allow the user to manipulate it (but make sure that you have some code to auto update the rest of the numbers when one changes) personally I think this could be very confusing, but for some users it might work

4 - Instead of drag and drop in place, have users drag to a new list

5 - For a very simple version, have a "favourite" check box, and then have the list just show the favourites first, (in alphabetical order or something)

6 - Have groups - you assign a group number to an item, all the group ones appear first, followed by group 2 etc

Hope this random rambling has been useful, if i think of anything more I'll come back...