Improve user experience, conversion rates, and credibility.
- Include basic filters users expect to find on ecommerce sites - such as price, popularity, rating, and brand - if you offer a limited number of items.
- Faceted navigation is more complex and includes filters like size, color, material, season, body type for a clothing store, for example. Use faceted navigation if you offer multiple categories of products that come in many variants.
For example, LEGO offers both universal filters, like price, and category-specific filters, like theme, to help users find toys.
Automatically apply filters immediately after they’re selected instead of requiring users to tap an Apply button, to improve the user experience.
For example, Nike allows users to select and deselect color options via checkboxes and selected filters are clearly displayed with an X button that allows users to easily remove them.
Place filters and sorting tools in conventional locations, such as above the product list or on the left sidebar.
Filters and sorting tools are usually placed above the product list, while faceted navigation is usually positioned on the sidebar.
For example, Adidas places their filters and sorting tools high up on their product list’s visual hierarchy and uses clearly labeled buttons for each one.
Use modal navigation drawers or overlays to display the filters if you have 6 or more filtering options.
For example, Fat Brain Toys offers users multiple filtering options, so they use full-screen overlays to help users focus on narrowing down their search.