Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 7 down vote accepted

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?

enter image description here

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.

share|improve this answer
add comment

mockup

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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