Filter design pattern

[yongjie1]

In the Twilio intelligence product, users (e.g. the call center manager ) need to be able to filter a list of calls and find the ones that are important or relevant to them. Users can filter the calls by agent name, customers name, operator name (intelligence insights) and find the calls that are important to them.

The most complicated part is the filtering by operator name, as it has 2 levels of filtering:

• level 1 is filtering by the operator name
• level 2 is filtering by the label name within the selected operator

And users can also filter by multiple operators and each of the operators could has multiple labels.

Here are a few different concepts that we've explored:
V1 - Hide the filter in the side panel:

V2 Show all the filters at once

V3 Show some important filters and hide some additional filters in an accordion

[gloriliale]

Hi @yongjie1, wanted to add the related discussions you mentioned for context:
1601: Filter Pattern contribution thread
1702: Designing complex Filters for data
1715: Search / filter on a data table
1366: Combobox Group
865: Table Filters for bulk action
926: Filter data table (filter vs. search)

[kelseycavitt]

Hi @yongjie1 !
Another useful link is Corinne's first draft of the Filter Group Pattern Spec

[kelseycavitt]

Hi @yongjie!
Thanks for a great discussion yesterday with yourself and Qi Feng.

Here’s a link to the Office hours discussion recording.

Here’s a recap to what we discussed:

1. We are encouraging you to pursue the use of the side panel / drawer container for your filtering needs, as there are several possible filters that can be applied in your context/use case, specifically with the multiple levels for operators. With pursuing this approach, we are hoping to have this kind of component on our roadmap in the future, so when it’s available, it’s expected that the component would need to be switched out for the new one for Paste. This kind of pattern for filtering exists currently in the Flex product as well.
2. We both discussed looking into best practices from a UX and accessibility perspective for displaying selected filters (e.g., exposing them outside of the drawer, or just keeping them in the drawer). I’ll be working on some research/suggestions these next few days!
3. For your combobox needs, we suggest using the Autocomplete combobox.
4. If you’re using disclosures, specifically for the Agent name that uses a checkbox group, ensure the checkbox group has a label, as the disclosure label only gives a label to the disclosure, not the form elements inside it.
5. For the operator filter, we suggest moving the “add operator filter” action to the top, as a screenreader could miss that action when being read, a user could also be confused and it could get moved below the fold when adding more operator filters. Additionally, the action should be a link-style button.
6. As discussed, let’s do another design review pass once you’re ready to help ensure the best usage of some design tokens, namely the spacing and possibly box shadow for the drawer/side panel.

[yongjie1]

@kelseycavitt Thanks for the summary. It was great to chat with you and the design system team about the filter experience within our product.

For the point 3, we'll need autocomplete combobox for multi selection. I've seen this example.
However, as a users if I need select multiple options, I have to select one, then click on the input box again and select another one, and so on. This isn't efficient for users. Is it possible to do something like this for multi selection(See screen)?

For the point 4, if the form inside the disclosure is very simple, do we still need another label name for the form (see the screen example)? It feels repetitive. I think what you have suggested make sense if we have a form with different sections and it should have section title but I'm not sure if it works for our use case.

[kelseycavitt]

Hi @yongjie1!

For the mulit-select combobox needs, yes! You can use the Combobox primitive to do what you want to do in your design.

As for the form label question, no, you don't need an extra form label here, as the text inputs themselves have labels. It was just for that example for the checkbox group, as that didn't seem to have a visible label in your design.

Let me know if this makes sense! I'm also still looking into some best filtering practices for displaying selected filters, hoping to have something to you soon!

[yongjie1]

@kelseycavitt Thanks.

I've found some examples: Shopify

Another example from AirB&B

I'm still try to find out if there is any good articles talking about filters and the best practices. Let me know when you found anything useful.

[kelseycavitt]

@yongjie1 ,
Great examples! I think I found a couple of useful articles that point to extensive user research on best practices for filtering.

1. How to design applied filters (Baymard)
2. Crafting a kickass filtering ux (Medium)

It seems that user research has shown that the UX is better off with showing both applied filters in their original position, AND in a separate ‘Applied Filters’ section. I think that with the designs you have going on that you could definitely test this idea. For the Airbnb example, this is most similar to your design, by showing the most highly used filters, then having the option to see or apply more with the "more filters" button

Take a look at those articles and let me know if you have any questions!

[corinne-nagel]

Hey all, I just saw this thread but I'm working on this for Insights. I signed up for office hours on the 2nd to discuss the state of this and the next steps. Would love to sync up on progress and steps forward so we don't duplicate work.

[yongjie1]

This is what our team is planning to build for the filter & search experience, here is the design prototype. The idea is to show some commonly used filters as default, if users want to use more filters they can click on "more filters" button that will open up the side panel.
I won't be able to make the office hour but let me know if you have any questions.

[corinne-nagel]

Ah I see, ok looks like you have a lot more filters you're working with. Have you had a chance to do user research you could share?

[yongjie1]

We've only had chance to chat with 2 clients, I won't call it a proper research. They are the business persons not the end users, and the chat is focused on the high level concept not the detailed interaction. In general, they know where to find the filters if they need more filters. When filters in the side panel has been applied, they think it's useful that we've showed the pills of the applied filters on the page.
We've asked about frequently used filters but it seems that different types of job roles will have different frequently used filters. In future, we may allow users to set up the order of the filters based on their own needs.

[loreina]

Hi @corinne-nagel - just wanted to share the office hours recording with you in case you'd like to revisit any of our conversations. Here's the video (it includes timestamps for each topic), and the password is posted in the #help-design-system channel.

To summarize some of our conversation:

• Custom filtering won't be part of the filter group pattern for now, currently we have simple in scope for review with committee
• The designs you shared for custom filtering looks visually appealing, though we're unsure if it will account for other operators like AND/OR

Thanks again for coming to office hours!

[loreina]

We have a Filter group pattern available in Paste with guidance on simple table filtering. Marking this as answered due to inactivity.