Sort controls

Problem Context

• The page already has a result set, list, card grid, table, inbox, history, or search result collection.
• Users can complete different tasks depending on which ordering is most useful, such as newest first, closest first, highest priority first, or alphabetical order.
• Sorting often appears near search, filters, pagination, table headers, and saved views, so the control must make clear that it changes order rather than inclusion.

Selection Rules

• Choose sort controls when the same result set can be usefully ordered by two or more meaningful attributes.
• Use a separate Sort by control for search results, cards, inboxes, histories, and lists where the sortable attributes are not table column headers.
• Use sortable column headers when the sortable attribute is visible as a table column and users compare row values directly.
• Default to the order users expect for the task, such as relevance for search, newest first for activity, nearest first for location, or due soon for deadlines.
• Name each option with both the attribute and method, such as Date updated (newest first) or Amount (highest first), when a direction-only label would be ambiguous.
• Reset to the first page or clearly explain page position when the sort order changes in paginated results.
• Preserve active query, filters, page size, view density, and selected saved view when users change only the sort order.
• Use filters instead when users need to include or exclude records by status, category, date range, team, owner, or other criteria.
• Avoid sort controls when there is only one obvious order or when changing order would not help users understand or act on the list.

Required States

• Default sort state that identifies the initial order and why it is appropriate.
• Active sort state with visible attribute and direction.
• Alternate direction state for reversible attributes such as date, name, amount, priority, or distance.
• Loading or updating state when remote sorting takes noticeable time.
• Unavailable state when a column or option cannot sort the current data.
• Paginated state showing that the new order applies to the whole set and not only the visible page.

Interaction Contract

• Changing a Sort by select applies the new order to the full current result set and keeps unrelated query and filter state intact.
• Changing sort in a paginated list returns users to page 1 or announces the new page position in the reordered set.
• A sortable column header toggles between supported directions and updates the visible header state, aria-sort state, and result order together.
• Formatted numbers, dates, file sizes, percentages, and month names sort by raw comparable values rather than by display strings.
• If sorting requires a network request, keep the prior context visible while announcing that results are being reordered.

Implementation Checklist

• Define the default sort attribute and direction for each result type instead of inheriting arbitrary database order.
• Write option labels that include the attribute and ordering method when there is any ambiguity.
• Keep sort controls visually separate from filters and active-filter chips.
• For table sorting, expose the active column and direction through visible icons or text and accessible state.
• Apply sorting before pagination so every page reflects the same global order.
• Use raw sortable values for dates, currencies, percentages, file sizes, and localized labels.
• Announce result order changes in a stable status region or result summary.
• Preserve query, filters, page size, selected view, and view density across sort changes.

Common Generated-UI Mistakes

• Putting filtering criteria such as date ranges, status, category, or owner inside a sort menu.
• Labelling options only Newest, Oldest, A-Z, or Z-A when the attribute being sorted is unclear.
• Sorting only the current visible page instead of the full result set.
• Resetting search query, filters, page size, or view density when users change sort.
• Sorting formatted dates, money, month names, or percentages as plain text.
• Using a segmented control for many sort options or long option labels that need a labelled select.

Critique Questions

• Can users tell what attribute is sorted and in which direction?
• Does the sort change the order of the same records, or is it accidentally filtering membership?
• Does the sort apply before pagination and preserve query, filters, page size, and saved view?
• If this is a table, are sortable headers visible, keyboard reachable, and exposed with current sort state?
• Are dates, numbers, currencies, percentages, and localized labels sorted by raw values rather than display strings?
• Does the result summary or live region announce the changed order without moving focus unexpectedly?