Sortable table

Tagged as: , , ,
 

The Design Need:

The user needs to find an item they are looking for in a large table that consists of multiple columns. The search approach might differ depending on the user’s purpose. This makes it impossible for the designer to know up front how the user will scan the table.

Design Examples:

A sortable table on www.bestbuy.com

Design Solution:

Allow users to sort the table data according to their needs. This design pattern is closely related to best practice for filtering search results. If you offer sorting options, bear in mind that users often do not know the difference between sorting and filtering and do not care. Sorting or filtering actions on a large set of data often seem to provide the same kind of result: easy access to the items that they are looking for.

When you design sorting options you should ensure that:

  • If possible, sort controls are placed at the top of the columns the data can be sorted by. If the user clicks the control the data is sorted one way (e.g. lowest price – highest price) and if it is clicked again the sorting is reversed (e.g. highest price – lowest price)
  • If you place the sort controls separately, you do not hide your sorting options. If you place the sorting options away from the other controls they might not be noticed. If they are noticed they might be interpreted as unimportant
  • Do not make users think about the difference between sorting and filtering, but offer controls that tell the user what the control does, e.g. “recently used”, which is a sorting option, and “bookmarked”, which is a filter option.

When to use:

When you provide data in a table that needs to be scanned through to find what is needed. You can only offer sorting if the offered data can be sorted according to relevant attributes. Sorting helps to get the most relevant information at the top of the table.

Why use this solution (rationale):

Sorting helps users to find what they are looking for in large data tables. Sorting options will help your user especially since sorting options will never deliver “no results”, unlike filtering.

More info elsewhere:

• Categorized as Design Patterns