Is there a better solution than breadcrumbs to cascading categories on mobile?

Question

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?

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.

Answer 1

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.

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!

Answer 2

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

Answer 3

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.

Answer 4

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