Lists

A list control allows the user to inspect, manipulate or select from a list of items. Lists may have one or more columns, and contain text, graphics, simple controls, or a combination of all three.

Figure 6.19. A simple two column list

Picture of list control containing two unsorted columns of
          text

Guidelines

Sortable Lists

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

Guidelines

  • Indicate which column is currently sorted by showing an upward or downward facing arrow in its header:

    Sort OrderArrow DirectionExample
    NaturalDownAlphabetical; smallest number first; earliest date first; checked items first
    ReverseUpReverse alphabetical; largest number first; most recent date first; unchecked items first)
  • 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.

    [Note]Un-sorting lists

    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.