2

1. Context

I have a table that shows a bunch of items falling into either of the below categories.

enter image description here

Some users struggle to find these filters.


2. Possible solution

I am considering using filter chips to increase affordability and to bring visibility to all the possible options.
Furthermore, this solution would reduce the use of one of the combined filter by giving users the agency to combine the filters as they please.

I would like to retain the counter within the filter chip, so the users are aware of how many items of which type are displayed in the table.

enter image description here


3. This made me question my solution

I haven't found any filter chip (or: Tag, Label, Chip, Badge, Pill) in any of the major Design Systems that have a counter in it.

Would it be that bad if I use a counter?

Here the places I looked into:

1 Answer 1

1

Well, the problem here is that design systems are a bit strict on the definitions and the uses.

For example, M3 definition

Use chips to show options for a specific context.

Salesforce

A pill represents an object that can be viewed with or without an icon.

Goldman Sachs

Tags display a single category, dimension, or property related to adjacent content.

Adobe

Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.

Now, the thing is that while you're considering your design as a chip (hence you considered the visual rendering), chips aren't the same as tags and/or badges. Furthermore, they mean different things according to who you ask. Consider the first two (M3 and Salesforce). They are completely different, and you could argue M3 is basically defining the same as tabs (and you wouldn't be wrong).

GS, on the contrary, doesn't speak about chips but tags, which are different. Tags are dynamic, interactive, and depending on the number of tags you use, you'll get different results. The important part is not to know how many results they include (since it's variable) but to close them. So they need that space for the close icons.

Finally, badges are merely decorative and have no interaction; they just display information in a pretty way to call attention, nothing else.

About Your solution

Your solution is actually perfect. You just need not to consider it as what the visual aspect indicates because that's where you're getting confused. What you have there is a faceted search, both in the case of the dropdown and in the case of the "pills." And faceted search best practices indicate that the filters SHOULD INCLUDE THE NUMBER OF RESULTS.

Faceted search interfaces often have a count of how many results belong to each facet. This gives users a visual clue of the range of results available for each facet. from https://www.meilisearch.com/docs/learn/fine_tuning_results/faceted_search

When showing unselected search facets, you should display the search result counts for each option if they were to be applied to the current search query. Further, these counts should dynamically update every time a facet or filter is applied. From https://www.algolia.com/blog/ux/search-filter-ux-best-practices/

In Cognitive Search, facets are one layer deep and can't be hierarchical. If you aren't familiar with faceted navigation structures, the following example shows one on the left. Counts indicate the number of matches for each facet. The same document can be represented in multiple facets. From https://learn.microsoft.com/en-us/azure/search/search-faceted-navigation

In short

Just use what you suggest; it's just a filter with a visual treatment, and it's actually relatively common. I've seen it many times, although I don't have an example at hand. The bottom line is that your approach is that of a faceted search.

Edit: thank you @Izquierdo, here's an example enter image description here

Also, remember: design systems are internal, and you can use them for inspiration to build your design system, but it doesn't mean you have to follow them to the letter. Always feel free to modify them to your specific needs, these design systems are either meant for internal use (GS) or as a generic guideline, therefore they have no idea what your needs are.

1
  • 1
    An example is VRBO.com - apply some filters, and the counters will show up in the chips.
    – Izquierdo
    Commented Oct 19, 2023 at 20:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.