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

share|improve this question
1  
Related post: ux.stackexchange.com/questions/16210/… –  JonW Sep 6 '12 at 9:17

4 Answers 4

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

share|improve this answer
2  
+1 for 1 & 2, not for 3 ;) –  Phil Sep 6 '12 at 9:27
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 Sep 6 '12 at 9:52
    
@JOG So, essentially just point 1? –  Joe Masilotti Sep 12 '12 at 0:59
    
Oh right, point 1 is a back button. –  JOG Sep 12 '12 at 8:19

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!

share|improve this answer
    
Please comment why you downvote. We're all here to learn. :) –  JOG Sep 6 '12 at 14:20
    
+1 for shorter usage scenarios on mobile –  koenmetsu Sep 7 '12 at 12:16
    
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. –  Jimmy Breck-McKye Sep 7 '12 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 Sep 9 '12 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'. –  Jimmy Breck-McKye Sep 9 '12 at 15:24

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.

share|improve this answer
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 Sep 6 '12 at 15:49
    
any file browser would be a good example of an application which needs to handle lots of depth levels. –  njzk2 Jul 10 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é Jul 11 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 Jul 11 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.stack.imgur.com/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é Jul 11 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).

share|improve this answer

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.