0

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!

3
  • 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, 2017 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, 2017 at 21:25
  • One shouldn't rely on the "like this one" link to continue displaying the same appearance, or even to continue to exist. If something illustrates a point, especially if it is an essential point, it should be explicitly included in theposting. Jul 1 at 12:33

3 Answers 3

0

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

0

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.

enter image description here

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.