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

Filter a list #133

Open
joelanman opened this issue Apr 5, 2018 · 14 comments
Open

Filter a list #133

joelanman opened this issue Apr 5, 2018 · 14 comments

Comments

@joelanman
Copy link
Member

@joelanman joelanman commented Apr 5, 2018

Also known as: faceted search

What

Help users filter a list of items for to see things that are relevant to their task. For example filtering search results.

Why

Services that use this pattern:

Anything else

@ignaciaorellana
Copy link
Contributor

@ignaciaorellana ignaciaorellana commented Jun 4, 2018

There is a conversation in the designer mailing list that is talking about examples of filter or advance search components (relevant to this issue). There is an example from Digital Market Place and GOV.UK pages

@joelanman
Copy link
Member Author

@joelanman joelanman commented Jul 19, 2018

Screenshot from GOV.UK search
image

@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Jul 19, 2018

You can see this component in GOV.UK Publishing at https://finder-frontend.herokuapp.com/component-guide/option-select

@adamsilver
Copy link

@adamsilver adamsilver commented Oct 25, 2018

Here's some work we've done for HMCTS on filters:
hmcts/design-system-backlog#43

Here's a demo of an AJAX-enhanced responsive filter with accessibility measures. You can turn off JS to see how things behave.
http://nostyle.herokuapp.com/examples/filter-form

@mikeash82
Copy link

@mikeash82 mikeash82 commented Nov 27, 2018

@fordie commented on this issue on 26 Jun

This pattern allows a user to search or filter a list of items that have been returned by the system, for instance looking for only pubs or properties in a certain postcode that are in a list of properties. This is similar to search, but the user will already have been presented with a list of results that they want to reduce.

find-a-client

property filter

@benwakefield commented on 27 Sep

@stevenaproctor We're using this approach to refine results where usual closed checkbox filtering isn't appropriate, the prototype should be out for testing in the coming weeks. This UI is for an internal HMRC system fyi.

screen shot 2018-09-27 at 07 58 21

@dashouse
Copy link

@dashouse dashouse commented Jan 21, 2019

@timpaul timpaul moved this from Proposed to To do in GOV.UK Design System Community Backlog Feb 4, 2019
@timpaul
Copy link
Contributor

@timpaul timpaul commented Feb 4, 2019

We've moved this card to the 'To do' column of the community backlog because it's a dependency on the Search for something pattern, which is already in the 'To do' column.

@FarhadUX1
Copy link

@FarhadUX1 FarhadUX1 commented Mar 6, 2019

Faceted search tags (aka Chips, Tags, Pills) on GOV.UK finders e.g. https://www.gov.uk/service-standard-reports?keywords=MOT&assessment_date%5Bfrom%5D=&assessment_date%5Bto%5D=

screen shot 2019-01-21 at 14 54 47

Curious as to why the filters selected (in a rectangle) would be separated from the filters itself. Happy to help with this design, as we are using filters for an activity feed.

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Mar 28, 2019

It would be super if the collapsing filter component could be adopted - we've got a number of things you can filter by, and this helps keep the list manageable.

@joelanman
Copy link
Member Author

@joelanman joelanman commented Mar 28, 2019

This has not yet been through any user research at all

Here's a mockup of ideas for filtering GOV.UK search. I thought the accordion might work better with arrows here as people could understand plus and minus as adding filter (which is kind of true) and removing a filter (which is not true, you'd just be collapsing the group)

image

@campbellssource
Copy link

@campbellssource campbellssource commented Apr 10, 2019

@joelanman I noticed that a previous implementation of search on gov.uk/search had a count next to each filter, Hinting at the consequence of selecting/deselecting the filter. I notice this isn't in the mock up or current version. have you had research suggest it isn't helpful?
Screenshot 2019-04-10 at 15 35 55

@joelanman
Copy link
Member Author

@joelanman joelanman commented Jun 7, 2019

@campbellssource sorry for the long delay! There was no deliberate change there - I think at the point I made the screenshot we just hadn't implemented that aspect yet.

@adamsilver
Copy link

@adamsilver adamsilver commented Nov 29, 2019

Here's the MOJ's filter a list pattern:
https://moj-design-system.herokuapp.com/patterns/filter-a-list

Big screens:
image

Small screens:
image

@jonathaninch
Copy link

@jonathaninch jonathaninch commented Mar 11, 2021

I'm looking into a set of filters that can be applied to a case load. I want to show how many cases there are for each filter (let's imagine there's 9 cases and there's 4 filters: case open, case closed, UK cases, international cases).
e.g.

  • case open (6 cases)
  • case closed (3 cases)
  • UK cases (7 cases)
  • international cases (2 cases)

What I want to do is change the case number in brackets if another filter affects that total - so in the above example if I select UK cases (of which there's, say, 7), then I'd get:

  • case open (5 cases)
  • case closed (2 cases)

In other words, because I've not selected international cases, those two have been removed from the totals within case open and case closed, and the totals in brackets have dynamically updated when the UK cases filter has been clicked. Hope that makes sense....

Has anyone done this or knows how to do it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet