3

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

Improve this question
2
  • Could you provide some more description or maybe even some images?
    – Dominik Oslizlo
    Feb 4, 2014 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, 2014 at 10:02

1 Answer 1

Reset to default
5

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.

Improve this answer
3
  • 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, 2014 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, 2014 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, 2014 at 11:54

Your Answer

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

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