Moving and Re-ordering Items

I spent some time recently looking at examples for moving and re-ordering items.

Moving Items

Folder systems provide perhaps the most familiar examples of move actions. In a desktop application, most users expect to be able to move items by dragging-and-dropping them to a different location. 

However, the drag-and-drop interaction can be awkward depending upon the location of the target. It's often helpful to also provide a "Move to" command.

The "Move to Folder" command in Microsoft Outlook

Moving vs. Re-ordering

The above example from Microsoft Outlook--moving email messages to a different folder--is an example of a system that lets you move items, but you can't manually re-order items within a folder. Compare that with Firefox's "Organize Bookmarks" function, which allows you to both move and re-order items using drag-and-drop. The feedback in each instance is appropriate to the action.

When moving, the target destination is highlighted:

When re-ordering, an insertion point is displayed:

Re-ordering

Some functions only involve re-ordering. As with the move actions described above, drag-and-drop is commonly used to support re-ordering items. However, in the web environment, users may not expect drag-and-drop functionality. Backpack addresses this discoverability problem by explicitly labeling the "drag" handles for each item. (The handles only appear when the user chooses the option to "re-order" items.)

From: Backpack

Another approach to re-ordering is using "move up" and "move down" buttons.

From: SmartSheet

In the Netflix queue function, users re-order items by assigning a numerical priority. After editing numerical priorities, the user must save the changes.

From: Netflix

The Netflix example takes into consideration that users are mostly concerned with the precise ordering of "top priority" items. Numerical entry lets them quickly specify the desired order.