Optimize filters and sorting for mobile ecommerce

Contributors

@andreea-macoveiciuc-content-expert


Business Benefits

Improve user experience, conversion rates, and credibility.


Offer users both filters and faceted navigation to help them find the products they’re looking for.

  • 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.

Add checkboxes and buttons near filters to make selecting and deselecting filters easier for users.

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.

Use clearly labeled buttons, like separate Sort and Filter buttons instead of icons.

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.