Multi Select hierarchy for Mobile Design

Question

I am working on a native application which will user to select multiple level of a hierarchy and perform some filtering.

So for example we have multiple level of category of products like Home Care > Floor Care > Perfumed > etc etc. When a person wants to find a product, he can use filtering where one of the criteria is Category. So the requirement is that the person can select multiple entries across categories and perform the action.

I am unable find a best practice guide where I can understand how to lay out this screen on a Mobile Device. The problem we are facing is

1. The level is not fixed. It can be 3 or 10. When we display a normal tree in the mobile, after 3-4 level, we are unable to display the tree properly as every level takes a lot of indent to right side.
2. Since we have multi select option we cannot have a one level of category display at one time. We used to have single selection previously where we use Cascaded style of tree.

Please let me know if anyone has solved such issue with intuitive design and experience.

Answer 1

Firstly trees are not great tools for use on mobile because on mobile devices, touch targets need to be bigger and so a deeply nested tree takes up far too much navigation space compared to the content displayed.

I would choose an approach which allows you to split up the navigation into a more stepped process. A greater number of simpler steps is easier to manage than a smaller number of more complex decisions. (see Hicks Law)

Consider creating a list of selections which are the chosen categories to filter with - kind of sticky filters.

For example: In a given part of the product hierarchy, allow a sub-category to be added one at a time to the list of selected category filters. Also ensure you allow items in this selected list to be removed, so you make the category filter list an interactive object too. In this way you guide the user through the steps rather than the more complicated and cumbersome process of forcing them to make multiple choices in a nested tree.

Below is an example from what I consider to be an excellent mobile website m.rei.com which demonstrates such a mechanism.

Note that on this example website, the selections are removed once you navigate away from this parent category. It sounds to me like you want your category selections to be retained. If you allow your selection to be more sticky, then perhaps you can extract a working mechanism using inspiration from this example?

Also note that for ease of getting snapshots, I opened m.rei.com in a desktop browser. Opened on a mobile device it looks slightly different, collapsing the less commonly used category filter selection into a 'more' button so that the navigation and filter options do not hog screen real estate at the expense of displayed content.

Answer 2

^{download bmml source – Wireframes created with Balsamiq Mockups}

Based on what @Roger Attrill gave an example of. Here is what I came up with and probably this is what we will implement.