Best practice for multiple select categories

Question

I'm designing an e-commerce mobile app where the products can be filtered by multiple categories. The problem is, the categories can be up to three layers.

The hierarchy example

- Clothes (1993)
    All Clothes          []
  - Dress (376)
      All Dress          []
      Mini Dress (86)    []
      Maxi Dress (34)    []
      Midi Dress (12)    []
  + Shirts (185)
  + Shoes (32)
    Glasses (21)         []
+ Books (573)
+ Electronics (21)

For now it displayed into collapsible list, where the select button added to lowest (most specific) categories. As you can see it looks very cluttered and complex for mobile display and user can easily get lost of what categories they already selected.

My first idea is to show not-empty lowest (most specific) categories just like tags like this one but with counters. But then I realized that user also must be able to choose the 'all [categories]'.

Do you know any best practice to achieve this? Thank you!

Answer 1

Anything that is deeply nested or complex is always a challenge to display on mobile, so there is usually going to be a trade-off between what you can fit in the screen and what is easy to view at any given time.

If it is purely for the purpose of filtering, one strategy is to divide the single tree structure into separate filters, one of each category (assuming you won't be adding to the top level categories) and then you'll have a easier way to organise the items below and display their status (using counter to show how many selected in each category).

It is now standard or common practice to use tags that can be cleared or deleted when there is a complex selection process involved, so even though it looks crowded on the screen the fact is that it can be more practical when it comes to being able to easily see at-a-glance what all the filtering options are and removing them (but not to add).

Answer 2

The previous answer is interesting. You could have a sliding panel that is hideable to avoid using too much space on the screen. And if you can still play on expandable items - quite well understood by the users - for the different levels of categories.

Couldn't we take the problem the other way round?

The nature of the products is very different. Would it not be relevant to filter beforehand according to the nature of the product and having filters by sub-category or others specific to its nature? Very different according to whether it is clothing or a book in this case

Answer 3

Layered navigation in E-commerce follows very old and solid pattern in UI called Tree view, which is what you have, and probably what you should stick with.
Designing this tree view with checkboxes (must not be classical ones, you can expand click area to whole box etc) - will probably be very convenient for the user. Checkbox checked for upper categories (de)selects also subcategories. Active state can be easily signalized with check itself as with color.