How to differentiate navigation along the hierarchy from cross references

Question

I noticed a pattern in the links in my web application: They either follow along the hierarchy (e.g. /projects/ -> /projects/5/ -> /projects/5/members/) or are cross references to a different place (e.g. /projects/5/members/ -> /users/7/).

With the hierarchy links there is usually a "back" button that takes users back (one level up in the hierarchy). With cross references there is no such button. During user testing I noticed that this is confusing for many users.

Both kinds of links are styled the same (mostly bootstrap's btn) so far. I was wondering if using different styling for each category would make things clearer. I had no good idea for a specific style though.

My personal behavior with cross references is that I usually open them in tabs so I can close the tab when I am done and get back to the initial page. I usually dislike forcing links to open in a new tab, but maybe this is a good place for that. I am just not sure.

If you have had the same problem at some point, how did you solve it? What did you try and why did you pick your specific solution?

Answer 1

You may be conflating "Back" and "Up" when users are expecting it to work the way they are used to.

The Back button is one of the oldest and most popular buttons in a web browser and users quickly learn that it takes them back to the page they just saw. While that happens to correspond to going up a level if they navigate down a hierarchy, that is only a coincidence. If a user clicks a link to a completely unrelated page deep down a different hierarchy, they still expect the Back button to return them to where they just were. It's an "escape hatch" of sorts.

Your app should allow the user to use the browser Back button in this way as much as possible. If you have to provide your own Back button inside your app it should act the same way, and return users to the previous page in their history.

If navigating Up through a hierarchy is desired use case, consider a different interaction style. Breadcrumbs usually serve this purpose and would allow users to jump directly to the parent container (such as projects/ or users/).

Opening cross reference links in a new tab may be an option to test. A new tab typically has it's own browser history which also breaks the Back button, but the original page is preserved on the original tab so the user still has their escape hatch, albeit in a different form. You could try it out and see how comfortable your users are with tabs. They might be thrilled or completely lost.