3

I need to convert data of a structure similar to this:

https://i.stack.imgur.com/9O0DD.jpg

into an interactive, HTML widget.

This widget will allow users to start from the end node (which I'm calling 'shirley' here) and work back to the beginning by choosing any one of the many paths leading to shirley. Each node is a html page.

I've got two ways to do this:

1 - using breadcrumbs in custom tabs as standard tabs don't allow users to click on the individual nodes of the breadcrumb which is how users will be traversing up and down the structure. image 1:

enter image description here

or image 2:

enter image description here

2 - using multiple breadcrumbs in a custom dropdown (same reason as custom tabs) image:

enter image description here

Both approaches are unwieldy and don't scale well with the number of paths leading to shirley, but I'm leaning towards multiple breadcrumbs in a dropdown.

My question is this, have I missed any approach that can do what I want better than multiple breadcrumbs in tabs and multiple breadcrumbs in dropdowns?

Update: While the nodes are HTML pages, they are not related to "site" navigation - the nodes do "history" navigation. Each node is a text snippet, and the nodes chained together form a "history" chain that the user will traverse. Nodes are created dynamically by the user's actions and there'll be about 100 to 150 such node chains(paths) on average per page, with expected peak of 1500. Chain branching is also by user action. Each path is created by the actions of ~multiple~ users with any one user having the ability to traverse the whole path (any and all of them) once it's created. Menus are not feasible.

vjk2005
  • 131
  • 3
  • Is it only the bottom-most nodes that might have multiple paths, or could any node have multiple paths? – Erics Oct 30 '11 at 03:15
  • Any of the nodes can have multiple paths but the user has a choice of paths only on the node (s)he's currently on. – vjk2005 Oct 30 '11 at 10:14

4 Answers4

5

Well, if you need to start from a specific place and you can go in different directions, then you just have navigation, it doesn't have much to do with breadcrumbs.

Normally breadcrumbs imply that the user has reached the current page through a series of nodes that he actually did take. So you can display those nodes, and the fact that there are other possible ways to get there isn't relevant.

Another scenario is when the user has reached the page through a direct link, without going through the preceding pages. In that case you can display a default breadcrumbs path, where you just pick the one that makes the most sense, e.g. main>category>product, even though it can also be reached through search>product or specials>product. If many routes make equal sense, just pick one and be consistent about it :)

But if you're trying to present all the possible routes leading to a page, then it's the same as showing all the routes leading out of a page - meaning you just have standard navigation. For example, you can do it step by step, with a series of one-level menus, or have hierarchical menus.

Vitaly Mijiritsky
  • 31,167
  • 12
  • 84
  • 146
  • While the nodes are HTML pages, they are not related to "site" navigation - the nodes do "history" navigation. Each node is a text snippet, and the nodes chained together form a "history" chain that the user will traverse. Nodes are created dynamically by the user's actions and there'll be about 100 to 150 such node chains(paths) on average per page, with expected peak of 1500. Chain branching is also by user action. Each path is created by the actions of ~multiple~ users with any one user having the ability to traverse the whole path once it's created. Menus are not feasible. – vjk2005 Oct 30 '11 at 10:28
0

How many possible paths would there ever be? How much does this need to scale? Maybe you can draw an illustration of the location, similar to a train route map.

Assaf Lavie
  • 1,886
  • 11
  • 11
  • There's no limit on how many paths there could be, as it's dynamically created by users. There's some confusion with "site" navigation which I did not anticipate - I've since updated my question to clarify the problem a little more. – vjk2005 Oct 30 '11 at 10:33
0

What happens when you go back, and select lets say "node 3" from path 2? Does the path 1 (and its nodes A and B) become irrelevant? Or not? If its only relevant to see both paths before user selects one node, and after that it does not matter i would definitely go with only one breadcrumb bar, and put on the side the other one. You just need to find a way to measure which one is more important.

lets say the object is "brown boots"

first path is "Shoes › Boots › UGG › Classic Short › Brown Boots"

while the second path is "Shoes by color › Brown › Brown Boots"

I would put the first path as the most probable way that people would like to go back, while the second one i would put as tags or something similar on the side.

Damjan Stankovic
  • 318
  • 1
  • 4
  • To answer your question, once a user chooses a path, they stay committed to that path - if the path they chose has further choices at the node they're currently on, the process repeats. – vjk2005 Oct 30 '11 at 10:38
0

"My question is this, have I missed any approach that can do what I want better than multiple breadcrumbs in tabs and multiple breadcrumbs in dropdowns?"

A search engine. Even if your site navigation is fantastic, people frequently want to get to the information they want immediately vs. traversing a series of pages towards a destination. Unless there's a very compelling reason for them to follow a linear path to shirley, give them a way to avoid it. This has the added benefit of providing more useful statistics about what they're trying to find.

Kimberley D
  • 1,025
  • 5
  • 8