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!

  • I think your question is too broad, do you have any references that you like, you dislike, any other proposal as well as the one you present? – Alvaro Feb 13 '17 at 21:11
  • @Alvaro I like the categorization as tags like this one 8tracks.com/explore/bedroom/hot but it looks like it only works on one-level categories. Using the current UX, users can choose for example 'shoes (all shoes)' and 'maxi dress'. But that kind of list looks very crowded to me so I don't like it. – Dolorosa Feb 13 '17 at 21:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.