How to present two filters when one depend on the other?

Question

I have two filters in a filter bar that are like supplier and product number. Each supplier has a list of products. Some products might have the same product number. Right now I have a typeahead for supplier to filter by supplier, and a typeahead for product number to filter by product. However, it seems confusing because one kind of imply certain values of the other. How is this type of relationship usually presented?

Answer 1

This is a common design problem with some potential design patterns that might help you. I think the important thing to realise is that there are natural tendencies for users to assume relationships when you combine multiple controls and filtering options for them, and when you want them to be used in a particular way then it is a good idea to be more explicit with the labels and interactions.

Say for example, you want the second filter to be based on the first filter (in a dependent manner), then you should make sure that the hierarchy of the layout and place of controls match this (e.g. top to bottom in order of how the user would interact with them). And you would also have default states and labels that reflect this.

In your case, it is possible for users to want to find products/product numbers by supplier, or for users to want to find suppliers by product numbers. If you want to enforce the way the filters work then you have to be more explicit with the labels and interactions. This will prevent the users using the product number filter to look for suppliers. However, you should consider whether this is a useful enough feature to provide to users in another way.