How can I show the user where they are in a non-hierarchical page structure?

Question

I am working on an interface for a system which enables users to browse a large model of a business' processes. The many items in this model are arranged in a "net" structure. When viewing a single item (i.e. when viewing a page which lists all attributes of the item), how can I make it clear to the user where this item is in the overall structure?

System structure

The client says it's more accurate to describe the relationship between items as a net than a traditional tree structure (with layers of items nested inside each other). This is because an item in the model can be a 'child' of many disparate categories of items - it can have many parents.

Conflict between menu structure and site structure

Many of the most important items in the system are accessible via a traditional multi-level navigation menu, but the items in this menu (and the structure of those items) are manually defined by administrators to bring only the most crucial items within easy reach. It is not a representation of the structure of the system itself. This is another potential issue, as the two models may conflict, which could confuse the user.

Problems with breadcrumbs

As there is more than one possible path through the net to reach each item, a traditional breadcrumb is not ideal.

It would only show one path through the system, meaning only one direct parent element would be shown. If an item had many parent items, showing only one would not allow the user to locate all related 'sibling' items.

There would also have to be logic in place to decide which of the many possible paths should be shown.

Possible solutions

None of these seem ideal.

1. Show a breadcrumb trail of the path the item is found under in the main menu. If the item isn't in the main menu, simply don't show a breadcrumb.
2. Show a breadcrumb trail of the path the user took to arrive at this item, effectively mirroring the browser's own "back" functionality.
3. Show a list of all direct parent items, enabling users to find their way to all sibling items.

I hope this all made sense! I would greatly appreciate any suggestions for solving the UI problem I have described, or for addressing any more fundamental issues you perceive.

Answer 1

Is there a reason why the site is so Parent / Top heavy with the navigation? If each piece of content is to be part of many different categories (parents), I wouldn't completely dismiss breadcrumbs altogether.

You can consider creating a dynamic breadcrumb which tracks the route that the user did take. Each node in the breadcrumb can also be a dropdown that links to other parallel pages in that level. This way it's an adaptive historical view.

The breadcrumb could display smartly based on the page levels within the site, and not just take the browsing history.

If the user went: ANOTHER PAGE > HOMEPAGE > PAGE 2 > HOMEPAGE > PAGE 4 > PAGE 5

It would set the pages up as separate branched breadcrumb.

If on PAGE 2, the breadcrumb would be: HOMEPAGE > PAGE 2

If on Page 5, the breadcrumb would be: HOMEPAGE > [PAGE4 v] > PAGE 5

Whereby Page 4 is a dropdown with parallel pages.

Having an Anchor like the Homepage will help to orient the user.

Answer 2

Categories + meta tags

It sounds like you're describing a system of high-level categories or a very shallow tree that is subsequently filtered by meta tags. A hybrid of category identification via a breadcrumb and filter tags is worth consideration.

I'm sure this isn't representative of your system, but you get the idea:

Answer 3

I don't think it's a huge problem not to have a breadcrumb, especially if it would be misleading.

As mentioned by others, take some time to figure out the basics use cases in terms of where users would be coming from and where they would want to go next.

You could provide a "recently viewed" list (similar to Amazon or another product-based site) to let users easily backtrack.

In addition, you're probably on the right track with a related-topics "list of parents" idea.

Answer 4

If all items are effectively only ever one "level" deep, then it may be sufficient to provide a way for users to navigate from the item details back to the "top" level. So, a user would either be "zoomed in" one level to view the details of an item, or else they would be "zoomed out" to a place where they could see all items.

If some items can only be accessed from other items (and not from the top-level), then clearly this isn't going to be appropriate. In this case then maybe Option 3 from your original post would be the most useful.

If it were possible to somehow represent the "net" graphically (and interactively, such that users could view and click on an item to navigate to the details of that item) then that might be a good option. However, I suspect this would be much more difficult to implement than simply finding and listing the direct parents of the current item, and therefore it might be prohibitively expensive.

Answer 5

There are many situations where different hierarchies are in conflict on a site. You could think of your site as an directed graph, hopefully not a cyclic one, of parent-child relationships.

If it is not cyclic, then it is a partially ordered set. But still far from being a tree.

A breadcrumb is a directed path through this graph. And the combination of breadcrumbs on your site - in an ideal world - should be like a tree that you get by ignoring some of the parent/child links.

So, it is really all about prioritizing, and knowing which of the parent/child relationships are more important to your site.

But, this said, there are some tricks to increase the amount of information you can put into your breadcrumb.

Composite breadcrumbs from menu + categories

I usually go about it like this:

• The first part of the breadcrumb can be defined by the menu. E.g. the menu trail down to an overview page for items of the type that the user is currently viewing, which is linked somewhere in the menu structure.
  You can use the main menu for this, or you could use another menu, e.g. one that defines the footer sitemap. Obviously, as you mentioned yourself, conflicting menus can be confusing..
• The second part of the breadcrumb can represent different attributes or categories of the item that is currently being viewed.

In fact the elegant way is to go backwards: First determine the immediate parent (which would be a category or attribute page), then look for any parent category, or an overview page that lists all categories, then see if that page is somewhere in the menu, and go further up the menu tree until you arrive at the home page.

Faceted breadcrumbs representing multiple taxonomies

Here it usually becomes difficult, because you can have different competing taxonomies. A classical example would be product categories vs manufacturers vs materials. There are different ways to handle this:

1. You simply focus on one of the taxonomies, and ignore the others. E.g. one of

   • Bikes » By category » Offroad » Acme Model XYZ
   • Bikes » By manufacturer » Acme » Model XYZ
   • Bikes » By material » Aluminium » Acme Model XYZ

2. Your breadcrumb represents accumulated filters, e.g.

   • Bikes » Offroad » Offroad bikes from Acme » Aluminium offroad bikes from Acme » Acme Model XYZ

   The labels could simply say "Bikes » Offroad » Acme » Aluminium » Model XYZ", but if you'd click "Aluminium", you don't get all aluminium bikes but only those from Acme which are also in the Offroad category.

3. Separate the category links with comma instead of "»". E.g.

   • Bikes » Offroad, Acme, Aluminium » Acme Model XYZ

   This shows that the respective categories are not in a parent-child relationship with each other.

   If you'd click on "Aluminium" here, you'd really get all bikes that are made from Aluminium, independent of whether they are from Acme or in the Offroad category.

"History" breadcrumbs?

I personally don't think that breadcrumbs should depend on where the user has been before. This is the browser's job.
http://www.nngroup.com/articles/breadcrumb-navigation-useful/
See "Hierarchy or History?" I completely agree with Nielsen here, even if this is from 2007.

Sites that don't need a breadcrumb

There are definitely sites where a breadcrumb does not make that much sense. Think of stackexchange, facebook, gmail. Maybe a breadcrumb can make sense in some sub-sections (user settings, help pages..), but not for navigating in a lake of unstructured information.

In this case what you want is

• sidebar boxes with different kinds of "related stuff". Stackexchange does a good job of that.
• a good search.

Answer 6

As I read your question: - You want to show the overall structure. - It's arranged in the net structure.

So it seams you want to show the minimap navigation (like in games).

But, you mention that it is about business processes. Here the view (and navigation) depends on the user role and the matter of processes.

Process manager (and possibly director) might want to see the whole map. Process owner (of particular processes) might want to follow only subset of processes or 1 particular process. They might need minimized version of cross functional process map.

The worker user typically does not care about processes - s/he cares about the people behind the process steps before and after his/her process step.

The user submitting some application goes through several process steps. S/he needs to know where they are and mainly what is left to do. (E.g. think eshop checkout.)

Overall

I would think more about those processes and user roles in order to provide effective UX.

Answer 7

This is an Information Architecture question.

First, your definition.

1. System structure

What you and your client describe, sounds like a graph with connected components to me. As such, it will never be effectively defined by a breadcrumbs that can only describe a vertical hierarchy or a tree relationship.

2. Conflict between menu structure and site structure

This is a tangential issue. The site menu, I suppose, shows not the content structure, but rather a site structure: contact info, about, FAQs etc. The site here is a marketing material with all relevant information and the content is a compound of (as)sorted information, which may be stored under the umbrella of one of the menu items. Site menu does not have to include the content structure. Consider the site menu an ancillary structure VS content structure being the main structure. The system needs both. You will need ancillary one present on the site at all times, and main one being accessible from a certain point, or also being universal, this is up to the site objective.

3. Problems with breadcrumbs

As I mentioned before, breadcrumbs describe vertical hierarchy of a tree, and the content you are working with has horizontal connections, this is why breadcrumbs will not be enough to describe the whole structure and effectively navigate user around.

The solution.

You will most likely have to use a combination of methods listed below to achieve the most effective navigation ways. Don't worry about using many of them, complex structures can never be described by one way of navigation. Think of your user as a person in the airport: having to get to the gate only by walking would be difficult, but a combination of elevators, escalators, fast tracks and walking works much better.

1. You already have the ancillary miscellaneous items covered by the site menu.

2. The vertical hierarchy is covered by the breadcrumbs that depict parent to child relationships of the content items.

3. Categories will help with grouping items together for horizontal split. If you don't have them predefined, ask your client to help you splitting the content into few large groups, 3 to 7. You can also reorganize existing categories if you see they are not effective in content coverage. Categories will be present in the vertical hierarchy/breadcrumbs: Home > Business Processes > Plants/End User Innovation/Data Platforms > Separate article.

Consider articles that are grouped together as related. List of 3-all related articles can be present on the same page with the viewed article, either under it or on the sides.

4. Tags will depict connections between various articles/posts. One tag, for example, "e-textiles" can belong to many articles. Tag list goes under the post, the effective navigation methods are displaying other articles that are marked with this tag and showing a tag-cloud (which is a bit passe but still effective).

5. Keywords are similar to tags but are not the same thing. You can turn certain keywords into links and interconnect articles together right in the text. Keywords are great for SEO. https://www.youtube.com/watch?v=XSqizj4MrUQ

6. Search is one of the essential methods of navigation. It works best with the auto-suggest. If you are savvy, include the categories in your auto-suggest. https://uxmag.com/articles/designing-search-as-you-type-suggestions

7. There are other types of relations in various kinds of content, and other kinds of navigation that work with these relations, that I don't think are relevant for your case, for example, various metadata in data-driven SaaS.

For future reading I recommend the "Information Architecture for World Wide Web" by O'Reilly publishing.

Feel free to ask if something is not clear.