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 Responsive Web App. It provides summary across different verticals. To view details of a vertical user can drill down. So far the drill down goes till level 5. The Navigation for drill down within a vertical is a variation of a Breadcrumb.

Now, the need is to make changes so that the web app works fine on Mobile devices as well.

I found something similar on StackExchange Is there a better solution than breadcrumbs to cascading categories on mobile?

But I need something more.. Also, how should I proceed with the change?

[Edit 1 - Added Image]

enter image description here

[Edit 2 - Added Possible Solution] Breadcrumb menu does seem a rational option. Possible Solution

share|improve this question
    
Could you provide some more description or maybe even some images? –  Dominik Oslizlo Feb 4 at 9:02
    
Found another related SE QnA ux.stackexchange.com/questions/16210/…;. The point " A responsive website, or a desktop site rendered in a separate mobile 'template'" in the answer by JonW seems closer to home. –  Sumi Feb 4 at 10:02

1 Answer 1

up vote 3 down vote accepted

What you need to do is hiding the breadcrumbs while still having them accessible on mobile. There are three patterns I think you might be interested in:

  1. Displaying only the previous level. Here's a responsive example: http://codepen.io/bradfrost/full/dKulf

  2. Displaying breadcrumbs as a dropdown. A responsive example again: http://codepen.io/bradfrost/full/DCgax

  3. Letting them fall down - the least elegant way, but may be handy in some project-specific situations. And example again: http://codepen.io/bradfrost/full/IcoLu

(Resize your browser window to see how the examples work.)

You can combine the first two with always displaying the very first level (to let your users access the top level more easily), e.g.:

  • [Top level] [Dropdown]
  • [Top level] ... [Previous level]

This is because I think that users will most often want to go bact to top and one level up - but this may be project specific as well.

share|improve this answer
    
Thanks Dominik. Interestingly, I too had looked up codepen.io/bradfrost/full/DCgax but didn't realize that I had to resize to see the magic happen. –  Sumi Feb 4 at 11:22
    
Dominik, based on what you shared and how I think it might work in context to the application, I updated the question with a image. What are your takes on that? –  Sumi Feb 4 at 11:28
    
I would just put an icon/text on the left side of the dropdown button, plus I would reverse the order of the levels, so that the higher levels are on top. You could then indent the lower levels, so that it is obvious for the user that there is a hierarchy between them. Plus, I would rename the button to [Go up], not [Back] because "back" is used rather for navigating through history. –  Dominik Oslizlo Feb 4 at 11:54

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.