Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to filter content #79

kelliedesigner opened this issue Mar 19, 2018 · 8 comments


Copy link

commented Mar 19, 2018

As a user of the Design System,
I want to know how to filter content
So that there is a consistent experience across sites



Find my local

screen shot 2018-03-29 at 12 14 31

screen shot 2018-03-29 at 12 15 29

screen shot 2018-03-29 at 12 15 56


screen shot 2018-03-29 at 12 21 32

screen shot 2018-03-29 at 12 21 53

screen shot 2018-03-29 at 12 22 05

Links and resources

Acceptance criteria

  • Example of requesting data inputs
  • Method of opening filters options
  • Method of closing filter options

In addition:

  • Add component to design system
  • Addresses accessibility/usability considerations
  • Works on target devices and browsers

This comment has been minimized.

Copy link
Contributor Author

commented Mar 19, 2018

Key findings from UX Matters

  1. Decide on your filter value-selection paradigm—either drill-down or parallel selection.
  2. Provide an obvious and consistent way to undo filter selection.
  3. Always make all filters easily available.
  4. At every step in the search workflow, display only filter values that correspond to the available items, or inventory.
  5. Provide filter values that encompass all items, or the complete inventory.

This comment has been minimized.

Copy link
Contributor Author

commented Mar 20, 2018

Further detail from UX Matters

  1. What filter paradigm does the user need?

Single filter value:
Great for displaying multiple levels in a hierarchy like categories
"I want to narrow my search results to [category]"

  • Links that a user can select for a specific filter or drill down a level in a taxonomy, like a category or department hierarchy

Multiple filter values:
Great for selecting one or more options for attributes like brands or sizes.
"I want to narrow my search results to [category OR category OR category]"

  • check boxes let customers indicate parallel selections of multiple filter values

Filters don't have to be visible at all times, and can be collapsed behind a label

  1. At every step in the search workflow, any visible filtering options should reflect only the inventory that is available.
  • On many sites with Ajax search user interfaces, pages retrieve and recompute all the summary data for all filter values in response to each change a customer makes, so speed becomes a primary concern.
  • For many legacy systems, the demands of just-in-time data delivery are simply too much.

Provide filter options that encompass the complete inventory.

  • Strive to design every filter to include a list of options that encompasses the entire available inventory.
  • One fairly straightforward way to resolve any missing or inconsistent data is to include Other or All Others as a filter option. The SQL condition corresponding to Other should specifically include any items for which the color field is empty, or null, enabling customers always to view the entire inventory by using some combination of the available filter selections.
  • Be sure to test your search results user interfaces thoroughly with both your potential and existing customers.

@jeddy3 jeddy3 added the type: story label Mar 20, 2018


This comment has been minimized.

Copy link

commented Mar 28, 2018

Some links I found useful when I last researched filters (co-incidentally only last month)

You maybe WAY beyond this already but thought I’d share.

(When I looked at the below I switched from using a lot of ‘sort’ columns and turned them into filter options. Their research on giving 'groups' of filters 'titles' also helped me get my head around how different filters need to be clearly labelled for different user-types.

[I will detail my key findings - timeline tbd for me to do this in our next sprint planning.]


This comment has been minimized.

Copy link
Contributor Author

commented Apr 3, 2018

Mockup of filter component:
photo 31-03-2018 14 28 47


This comment has been minimized.

Copy link

commented Apr 12, 2018

As queried by Tim, let's look at conditional filters e.g.

Related to #86


This comment has been minimized.

Copy link

commented Apr 12, 2018


This comment has been minimized.

Copy link

commented Apr 13, 2018

From one of @olliewright's articles:

When to use: Not everything should be stuffed in filters. Important top level choices which are being made by almost all users are best being made upfront. It also declutters and simplifies the user experience.

@jeddy3 jeddy3 referenced this issue Apr 24, 2018

This comment has been minimized.

Copy link
Contributor Author

commented Apr 24, 2018

Key findings from Medium

How to craft a kickass filtering UX

Allow multiple selections
Allow multiple selections, allowing the user to narrow down their search quickly especially on slower connections.

Use real-world language
Filters should be modelled after the actual behaviour of users.

Make it clear what filters are active and how to remove them
Showing applied filters both in their original position in a separate ‘Applied Filters’ section

Make sure filter changes are separate events in the browser
Since the content of the page changes, the perception when using filters on desktop web is that there are multiple “pages” instead of a single page with different filters.
The browser behaviour should match this perception — if a user wants to go back to see a previous filter selection, clicking on the back arrow shouldn’t take them to a completely different page.

Filtering patterns

Airbnb identified the few filters people use the most and displayed them comfortably in the horizontal toolbar. Anything else is tucked under the ‘More’ dropdown, which expands to a full screen.
Full screen filter views are convenient on mobile when displaying longer sets of filters, since they make for a more focused experience and allow for more screen estate.

@jeddy3 jeddy3 closed this in #128 May 1, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.