SORTABLE LIST

Allows easy one column sorting of large lists with many columns.

Status

Description

Allow users to sort long or multi-column lists by clicking on the header of the column they want to use for sorting. Users often prefer to sort long lists, either alphabetically or numerically, to make it easier to find items.

When to Use

This can be used when one column sorting is sufficient to sort a large list.

Do not use:

when the number of rows is less then 10 and that number is not expected to increase.
when users will want to use more than one column at the time for sorting.

Current Usage

Evolution (three state sort up/down/un-sorted), Nautilus (two state sort)

User Guide

Clicking an unsorted column header sorts the column in natural order, indicated by showing a down arrow in its header.
Clicking a column header sorted in natural order re-sorts it in reverse order, indicated by showing an up arrow in its header.
Clicking a column header sorted in reverse order will do one of two things depending on the application:
- re-sorts it back to the original state if it is useful for the user to return to the unsorted state, indicated by removing the up arrow in its header.
- Re-sorts it in natural order, indicated by showing a down arrow in its header.

Keyboard Navigation

Each column that may be used for sorting has a access-key in the button label that allows the user to sort using that column.

Related Guidelines

Specification

Only use buttons in the column headers for the columns that may be used for sorting.

Comment: Is this possible? In that case it would also be useful to have some kind of symbol on the header button to indicate that is possible to use for sorting.

Label column headers or buttons in the header using sentence capitalization. If the column is too narrow for a sensible label, provide a tooltip for the header/button instead. Apart from its obvious use, this will help ensure that assistive technologies can describe the use of the column to visually impaired users.
Label the list, positioned above or to the left of the list, using sentence capitalization.
Provide an access key in the list label that allows the user to give focus directly to the list.
Provide an access key in the button label that allows the user to sort the list using that column directly.
Make the list control large enough that it can show at least four items at a time without scrolling. For lists of ten or more items, increase this minimum size as appropriate.
If the list appears in a dialog or utility window, consider making the window and the list within it resizable so that the user can choose how many list items are visible at a time without scrolling. Each time the user opens this dialog, set its dimensions to those that the user last resized it to. =
Indicate which column is currently sorted by showing an upward or downward facing arrow in its header button according to the following:

Sort Order	Arrow Direction	Example
Natural	Down	Alphabetical; smallest number first; earliest date first; checked items first
Reverse	Up	Reverse alphabetical; largest number first; most recent date first; unchecked items first)

When a new column in chosen for sorting the arrow in the button label for the previously sorted column should be removed.

Comment: Should the previously sorted column also be “un-sorted” or should it be possible to do multi-column sorting by sorting in multiple steps?

Occasionally, an unsorted state may be useful, for example to show items in the order in which the user added them to the list. In such cases, clicking a column sorted in reverse order should un-sort it, indicated by removing the arrow from the column header. Usually, however, this is better achieved by adding an extra column that the user can sort in the usual way, such as a sequence number column in this example.

Source Code

Terminology

Feedback

Usability Results and Feedback

Discussion

Regarding what arrow to use in what situation - what do we want it to represent? The current state or the action that will be triggered by clicking?

What I understand after talking to Calum the buttons in the header are a part of the widget and their appearance can't really be changed much. I had a quick look at the buttons in Evolution and they don't scream “I'm a button - click on me". If the buttons looked more like buttons in general it would be natural to use the same principles for labelling as for buttons in general. Now however I can understand if there are different opinions regarding the arrows.

I associate the arrows with “<" and “>" so for me the most intuitive would be to show the current state of “natural" sort order as up arrow (smallest number < largest number) and “reverse" sort order as down arrow (largest number > smallest number). If it shows an action it would be vice versa.

In either case I think it would be useful to the user to see in what way the list is currently sorted. If a e.g. a date is used for sorting the list column might display only the date while the sort also uses the time stamp. In this case it is difficult to easily see the current sort order.

When I worked I had a girl in my staff who specialized in human/computer interaction. We did usability tests logging keystrokes and mouse-clicks, video filming eye movements and expressions etc. This was ten years ago but maybe I can find her and ask for her input on this subject.