List Sorter

Example of the List Sorter UX pattern.

Problem

People like and often need order.

Solution

Help people bring order to chaos by letting them arbitrarily sort the items in a list.

Context

You have a list of items that would benefit from specific ordering and your target audience has indicated a desire (or you infer it) to be able to arbitrarily sort the items.

Rationale

People have many reasons for wanting to order their surroundings. Sometimes it is to aid memory, sometimes it is to communicate priority or logical or chronological precedence, and sometimes it is to arrange things to make them more usable based on personal habits. Whatever the reason, it’s basically a no-brainer that the ability to order items to suit a person’s preferences or needs should be available in the virtual realm as well as the physical, but since it introduces additional affordances and effort, you still need to have a user-driven reason to make this available—don’t make every list sortable.

Implementation

There are several ways to make a list sorter, but some commonalities exist. First, you should pretty much always make as many of the items in the list as possible visible at once. At a minimum, show the items that are contextually relevant because people need to see how the items are currently ordered so they can make good choices about how to reorder. You can use scrolling or paging if you have to for long lists, but in that case, you often will want extra capabilities such as a “move to top” or “move to bottom” or maybe even “move to page X” option if using paging.

Most of the time list sorters are used to move individual items around at once to provide for arbitrary ordering, but you can complement this with holistic sorting schemes (such as alphabetical, chronological, size, or by some other attribute of the information). These holistic sorting options can provide for a good way to start with a clean slate or get folks most of the way to where they want to go and then customize from there. Similarly, providing a “reset to default” option is good, especially for complex or large customization operations.

A common approach to sort individual items is to select and then use arrows to move up and down, though you can also provide other options that are specific to the domain as Survey Monkey does in the examples or Netflix’s “move to top” feature in their queue. If you use the pick then move approach, consider letting people select multiple items to move together. Usually, the affordances to move should be in a stationary place near the list itself, but you can have contextual “move selected here” affordances as well.

A very natural way to sort items is by dragging and dropping. If you can support this technologically, it is a great option. If you go that route, you should follow the visual cues associated with that such as a “move” cursor, previewing (i.e., visually showing the item or at least its silhouette while dragging), and also previewing where it will go, ideally moving the items around it to give a feel of the end result. Again, if you can support multiple selections and moving, that is often desirable, but you should verify it is worth the extra effort to implement if you can.

Consider supporting common keys as well such as the cursor keys and maybe even page up and down if it makes sense for your data set. You might also consider mouse wheel support, but that’s probably a bit much for most applications.

If you are building a Web application avoid page refreshes like the plague. These days there’s basically no excuse for inflicting that on your customers.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

List Sorter pattern can be implemented with any of the grid controls displaying list of items like the WebDataGrid, WebGrid and using WebImageButtons or Drag and Drop Framework allowing users to rearrange items. Check out the samples browser to see it in action.

Examples

The primary example from Microsoft Word 2007 shows how you can reorder the commands in Office’s Quick Access Toolbar—just pick an item and use the up and down arrows to move it.

http://quince.infragistics.com/115z