33

I'm currently thinking about adding a quite comprehensive section to a website: the section I'm talking about starts at level 3 of the overall website and itself has another four structural levels. Massive!

I cannot use or touch the horizontal nav of the website which is used for the first two levels of the website. I was looking for an alternative to left-hand navigation which still offers high flexibility for the user.

So, my idea was to use a sort of breadcrumb navigation - through each item in the breadcrumb would be a drop-down menu. Each selection in a drop list would populate the next dropdown with the subpages of the selected page. As well a selection would open the corresponding page.

So, the user could use the drop-downs to move forward and backward - but as well to switch categories or sub-items.

enter image description here

Improve this question
7
  • 4
    The Windows explorer (and other file manager tools) does this to navigate the current file path. (Eg: home.comcast.net/~jz78817/stuff/explorer.png). Perhaps Microsoft has some UX study on the issue?
    – Jørn E. Angeltveit
    Apr 3, 2012 at 15:50
  • 1
    interesting idea, it's sort of like Faceted Navigation but you can alter your structure in a more powerful way
    – Ben Brocka
    Apr 3, 2012 at 15:50
  • 3
    You have to balance the usability/power ratio. At first glance this is @#$! confusing, but if you're building a power app for a limited and/or highly engaged user base, it could work.
    – yitznewton
    Apr 3, 2012 at 18:24
  • Ugh, dropdowns (specifically the select boxes you've shown) are not a usability improvement. Adding poor visibility, focus control issues, and ~2 extra clicks per item is not helpful.
    – zzzzBov
    Apr 3, 2012 at 20:02
  • zzzzBov: I doubt that's how the final design should look like; I'd see it as a quick way of illustrating the concept.
    – Joey
    Apr 5, 2012 at 6:48

7 Answers 7

Reset to default
30

Microsoft does this in Windows Explorer! I noticed this on my Windows 7 work computer just a few weeks ago, and I can't stress enough just how handy it is (in certain situations)

The key here is that they made it exceedingly functional but it also stays out of the way until the user discovers it.

Improve this answer
5
  • thanks Karen and Joern for this example! To be honest I realized the Windows Explorer offers this but never really used it. Guess the alternative navigation options in the Explorer are just to various to really make use of all of them.
    – John Sample
    Apr 3, 2012 at 15:55
  • 8
    +1 "stays out of the way until the user discovers it". Graphic design of the controls is critical here.
    – peteorpeter
    Apr 3, 2012 at 19:09
  • +1, although note that Microsoft provides direct access (and more screen real estate) to the hierarchical folder tree on the left. Perhaps there is a reason for this.
    – Steven Noto
    Apr 3, 2012 at 20:12
  • 2
    A good implementation of this style would be the "pill" style dropdowns from the Twitter Bootstrap project: twitter.github.com/bootstrap/javascript.html#dropdowns
    – David Boike
    Apr 4, 2012 at 19:18
  • Oh gosh yes! Those are beautiful!
    – Karen
    Apr 4, 2012 at 19:19
7

I have seen two websites, using sort of this breadcrumb pattern. And for me it feels quite effective. Aparently, if you have a huge structure like the Guardian has.

One is exactely the behaviour as windows explorer has - lonely planet and guardian uses a different approach, which I like for its clean design. The latter has its submenu items (or listbox items) plain at right end of breadcrumbs.

enter image description here

Image source ui-patterns.com. Lonely Planet in action. You actually see your choosen item right of its listbox ie. you can choose cities at menu "Denmark". Taking Copenhagen lets it show on right. This feels quite intuitive and I think breadcrumbs showing categories of the site.

.

.

enter image description here

Image source ui-patterns.com. See Guardian here. The pattern guardian uses is different. They show "cross links" or "related subjects" right of the breadcrumbs on third level breadcrumb. So, News (first) and World News (second) are "fixed" categories. Where as "Obama administration" will be replaced if you chose "Economy". That means you will never have a deeper structure than 3 breadcrumbs. For me it wasn't obvious at first glance, but after using it a little it seems okay. However I like its visual appeal.

Improve this answer
0
6

I would avoid using direct drop-down boxes as you have in the example, because it will prevent users from understanding its purpose as a breadcrumb trail. Instead, follow Microsoft's example with their file navigation; highlight on hover to indicate clickability (perhaps changing the > symbol on hover to a v symbol to indicate a drop-down).

By displaying a standard breadcrumb visually you do not confuse anyone. By providing hover affordance, you encourage clicking which will lead to self-discovery of the navigation feature. At least, this is the theory; this is what Microsoft did in Explorer. It should be obvious that the effectiveness of this method is spotty considering the users in this question alone who did not realize the new interaction method available in Explorer. I am of the opinion that it will be more effective on a website, which typically has fewer on-hover effects and complexity than Windows Explorer. The effect on your navigation will probably be more unique and pronounced, and thus more discoverable.

Improve this answer
4

Jetbrains IntelliJ IDEA also does that (it is called Navigation bar) and I find it extremely useful:

intellij http://www.jetbrains.com/img/webhelp/navigationBar.png

After discovering it I rarely go back to ordinary tree project structure view.

Improve this answer
2

I agree with what you are trying to achieve with this. But the primary objective of navigation is to take visitors around the site. Breadcrumbs are used to clearly display to where visitors are and how deep they are in the site.

I think you have mixed both together and lost the meaning of what breadcrumbs are used for. This design to me looks more like a search filter, something you will need to click to say 'Go' or 'Search'.

If I wanted to know where I am on this site, I would never expect those drop down to clearly indicate where I am, but rather a tool to search the site.

I would still propose traditional breadcrumbs for clarity.

Improve this answer
5
  • 1
    Breadcrumbs are often used for navigation as well as information: frequently each level is a link to that level's homepage. I think this is good: it reassures your user both with the knowledge of where they are, and the ability to find related and parent pages.
    – Steven Noto
    Apr 3, 2012 at 20:11
  • 1
    Faceted navigation and breadcrumbs have quite a few similarities, indeed. However, adding "a traditional breadcrumb for clarity" will only confuse users because they'll see two very similar controls.
    – dnbrv
    Apr 3, 2012 at 21:20
  • I suspect @Steven Wu's reaction was influenced by how clunky it would be to use actual HTML dropdowns as portrayed by the OP.
    – peteorpeter
    Apr 4, 2012 at 4:09
  • @peteorpeter that's precisely why I mentioned the "Stays out of the way" part in my own answer. HTML dropdowns are way too huge to be out of the way for users who don't need/care about the feature.
    – Karen
    Apr 4, 2012 at 13:25
  • @Karen, totally agreed. The OP threw me off by using those in the mockup! I wanted to say "No, you're insane!" until I realized it's perfectly reasonable when they look right.
    – peteorpeter
    Apr 4, 2012 at 13:54
2

A really great example (and beautifully implemented too) is Xcode4 from Apple:

enter image description here

The nice additional feature here is that the menu items themselves have submenus so in fact you can navigate the whole (massive) tree with a single click and some hovering.

An additional feature is that when the user starts typing whilst in the menu the items are filtered to that search query making navigating even quicker:

enter image description here

Improve this answer
1

Thanks for all your helpful answers, opinions and examples. My intention in first place is to get a useful und flexible navigation. Rather than implementing a function loaded breadcrumb. So, my headline might have been a bit misleading.

In the meantime I did a (very) little A/B testing and compared the drop lists with a common left hand nav. It seems, that at least the two test persons quickly understood the functionality of the lists and liked to use it.

I'm sure, the design finally will play a big role. The illustration above definitely was meant to support my explanation - not a draft of the final implementation. My click dummy already used non-system drop downs. In the end I'll certainly go for some well designed droplists or will play around with something like lonely planet does.

Improve this answer

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.