I am working on a mobile application (Android ICS based) where I need to show a lot of products on screen. Now the products are categorized in several categories which are on X level, where X is defined by business. So it could be 4, it could be 10.

So in a navigation where I want to let the user choose from category to navigate to a particular set of products I am trying to use Cascaded Menu as shown below. But how can I let the user jump from one level to parent or directly to home or directly 2 level up? enter image description here

I am using a breadcrumb sort of feature here but want to understand if you guys have a better solution which is more for mobile usage and helps in easy navigation. Clicking on breadcrumbs looks cheap for a mobile device in my opinion.


4 Answers 4


Skip the breadcrumbs.

You are not building a desktop app. The mobile platform comes with constraints. Some features, like breadcrumbs, works better on desktop than on mobile. Often you are better off reducing the number of ways to do stuff in a mobile app. Fortunately ...

... users know that the standard back button allows them to retrace their steps through a hierarchy of information. ... Creating a multisegment back button causes several problems /iOS HCI Guidelines

On a mobile you multitask less with the apps than on a desktop, and the risk of forgetting where you came from is smaller. Reasons for this are among others: no multiple apps at screen and once, no Alt+Tab, and shorter usage scenarios. This instead puts demands on making it clear where you are at the moment. Focusing on content, making it clear what the user is looking at, and what is waiting one level up from here, should be enough.

enter image description here

I see you are developing for Android, and I made an iPhone take. But I still hope you will consider settling on a simpler navigation system. :) Good luck!

  • Please comment why you downvote. We're all here to learn. :)
    – JOG
    Commented Sep 6, 2012 at 14:20
  • Most desktop users don't actively juggle many tasks simultaneously; users' memory constraints are no smaller an issue on mobile than on desktop. And if the user wants to directly jump from one silo to another, hitting back several times is going to be quite costly. Commented Sep 7, 2012 at 22:05
  • @JimmyBreck-McKye: Memory constraints: Could you elaborate that please? Cost of clicking: cheaper than cost of getting lost in navigation, due to too small controls and cluttering the screen.
    – JOG
    Commented Sep 9, 2012 at 7:21
  • Memory is no less constrained on mobile than on desktop; in fact, the reduced viewport size means users may be using more of their working memory on mobile. As for clicking, there are plenty of possible solutions that allow users to move between silos without 'getting lost in navigation'. Commented Sep 9, 2012 at 15:24
  • Probably more of the task, but not more in total, as the task would be smaller. I could sit in a Finder/Explorer folder for hours before I take a look at the address bar or navigation tree to retrace my steps there and go somewhere else. On a mobile, this is less likely.
    – JOG
    Commented Sep 12, 2012 at 18:29

I have seen a few ways of solving this issue:

  1. Instead of breadcrumbs, you show a clickable area that says "< See all Home Care". If user clicks on that, it will go back to "Home Care". In "Home Care" you will display "See all categories", and so on. It won't allow moving directly to Level 3 from Level 7.

  2. You replace the long breadcrumbs with "..." and if user chooses it, it will expand or show a popup. This will allow moving from Level 7 to Level 3.

  3. The breadcrumbs are scrollable on horizontal with gesture, which allows moving to previous levels. Same here will allow moving from Level 7 to 3...

  • 1
    -1, i don't think any of this is needed, as long as the system of levels is clean and clear and easily navigated with a back button.
    – JOG
    Commented Sep 6, 2012 at 9:52
  • @JOG So, essentially just point 1? Commented Sep 12, 2012 at 0:59
  • Oh right, point 1 is a back button.
    – JOG
    Commented Sep 12, 2012 at 8:19

I think your main problem is your startingpoint: a 10-level deep hierarchy is hard to navigate and understand on all platforms, let alone a mobile device. Try to see if instead of using hierarchies, you could think of a different way to make it easy for your users to narrow down the items. Remember that for many items, it won't be easy to exclusively put them in a single category anyway, and the chances of your categorization making sense to all your users can be assumed to be close to zero. In your example above: why is CIF in Kitchen Care if I plan to use it in the bathroom? What would be under Nutrition and what under Food exactly?

Considder offering some form of faceted search instead.

  • 1
    The example I have given is using dummy text... the application will be used by huge departmental stored and the hierarchy has to be that deep. Sorry but that cannot be changed in any circumstances.
    – ajayashish
    Commented Sep 6, 2012 at 15:49
  • any file browser would be a good example of an application which needs to handle lots of depth levels.
    – njzk2
    Commented Jul 10, 2014 at 20:29
  • @njzk2 A file browser is a good example what's wrong with deep hierarchies. They are hard to navigate, and finding back a particular file you made 2 years ago is often a problem. That's why they offer search, because navigating the hierarchy is hell.
    – André
    Commented Jul 11, 2014 at 10:44
  • @André: I know, but the problem here is the file hierarchy, not the browser. and so far, no matter what they say, there is still a need for plain file browsing.
    – njzk2
    Commented Jul 11, 2014 at 12:45
  • @njzk2: actually, the browser itself is a problem as well, especially the tree representation they tend to use. Consider this example: i.sstatic.net/5ieum.png of the tree view in the browser. How does this tell me anything? How is this easy to navigate. It doesn't even tell me where I am! Also note that my point was on the deep hierarchy itself.
    – André
    Commented Jul 11, 2014 at 13:57

You could make the screen swipe-able. If they swipe right (i.e. to go back) they get a preview of the previous category before they commit by releasing the finger (lifting the finger, was typing releasing the mouse before I realised :) ). I'd probably want to animate the selection of a new category with a pseudo swipe left, reinforcing the mnemonic (Note to self, find out why I called that a mnemonic, probably erroneously).

Your Answer

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

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