UI Patterns and Techniques

Sortable Table

From Windows Explorer
Use when:	The UI displays multivariate information that the user may want to explore, reorder, customize, search for a single item, or simply understand on the basis of those different variables.
Why:	Giving the user the ability to change the sorting order of a table has powerful effects. First, it facilitates exploration. A user can now learn things from the data that they may never have been able to see otherwise -- how many of this kind? what proportion of this to that? is there only one of these? what's first or last? etc. Suddenly it becomes easier to find specific items, too; a user need only remember one attribute of the item in question (e.g. its last-edited date). Furthermore, if the sort order is retained from one invocation of the software to another, this is a way for the user to customize the UI. Some want the table sorted first to last; some last to first; some by a variable no one else thinks is interesting. It's good to give a user that kind of control. Finally, the clickable-header idiom is familiar to many users now.
How:	Choose the columns (i.e., the variables) carefully. What would a user want to sort by or search for? Conversely, what doesn't need to be shown in this table -- what can be hidden until the user asks for more detail about a specific item? The table headers should have some visual affordance that they can be clicked on. Most have beveled, button-like borders. Up-or-down arrows should be used to show whether the sort is in ascending or descending order. (And the presence of an arrow shows which column was last sorted on -- a fortuitous side effect!) Consider using Rollover Effects on the headers to reinforce the impression of clickability. Try to use a stable sort algorithm. What this means is that if a user sorts first by name, then by date, the resulting list will show ordered groups of same-date items that are each sorted by name within the group. In other words, the current sort order will be retained in the next sort, to the extent possible. Subtle, but very useful. If your UI technology permits, the columns may be reordered by dragging and dropping. Java Swing has this feature.