Filtering
Last updated: October 9, 2015 at 14:16 pm

Whenever a large data set is presented, filtering controls allow users to eliminate items from the set, creating a smaller and more relevant subset of data.


Visual example of the element:


What problem does this element or pattern solve?
Although it is one of the most common interactions, filtering is often misunderstood by users. When a large data set is presented, filtering allows users to eliminate items from that found set, showing only the data that is relevant to them. User confusion enters when filtering criteria and sorting criteria appear to be the same. As a result, these two interactions should be carefully considered, and tested together, to ensure that the function of each one is clear.
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

  • Location of filter controls. Traditionally, filtering controls appear on the left side of the screen, but that may not be the best solution for your application.
  • Do you permit multiple types of controls? Radio buttons, check boxes, drop downs, range sliders, and other common form interactions can be used.
  • Does the data automatically refresh when any filtering control is used? Or should the user set all their filters, then hit a “submit” button to view the results?
  • For complex filtering, will you provide the user with a reset button?
  • When filters are applied, how are those shown to the user? Common presentations include a breadcrumb-like trail near the top of the screen, or highlighted filter names.
  • If you have many filters, should you present them using accordion or other show-hide interaction to save space?


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:
filter out, culling
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