Sorting
Last updated: October 14, 2015 at 17:40 pm

Sorting does not reduce the actual size of a found data set. It merely rearranges the order of the display of the data based on specific criteria.


Visual example of the element:


What problem does this element or pattern solve?
Unlike filtering, sorting a large block of data does not reduce the actual size of a data set. Sorting merely rearranges the display order of the information. For example, filtering by price allows users to actually remove all items costing over $100, thereby reducing the found set from 5,000 to only 50. Sorting by price will take the subset of 50 items, and re-arrange those items from lowest to highest price.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web,

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • The location of the sorting controls. Traditionally, sorting controls are often placed in a horizontal row, just above the data display.
  • Do you permit multiple sorting operations? For example, can a user sort by zip code and then sort within that zip code by price?
  • How are sorting controls displayed? Are they clickable table headings? Do those labels present small arrows to show ascending or descending sort order? Or are your sorting options presented in a select list?
  • Your standards should define the default sort order for all initial displays of data.
  • When results are sorted, how is the current sort order communicated to the user?
  • If you permit multiple sorting operations, how are those controls presented? Options might include a right rail, a modal, or a side drawer.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
ordering, reorder, sort by
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply