How do you communicate the location of a user in a tabbed environment when they've navigated to a page that can't be described using an existing tab?

Question

In my web app, there are 4 static tabs that follow you everywhere you go. The active tab is white while the inactive tabs are gray. Nothing ground-breaking there. But from certain tabs, you can navigate to a specific document.

Say there is a paychecks tab. In this tab is a list of all your paychecks. When you click on a button, it brings up a detailed report about that specific paycheck. Are you still in the paychecks tab? Well, sort of. But what about people who want to go back and then view a different report. Clicking on active tabs doesn't make sense.

A back button that appears over the report but outside the navigational menu would work but it's a bit of a kludge and breadcrumbs aren't a good solution when the nesting is only one deep. A modal pop-up would make the most sense but it's a bit too high tech for the target audience and can't feasibly handle the amount of data that would need to be shown.

It may be a minor usability hiccup in the grand scheme of things, but I just can't figure out a rock solid solution.

Answer 1

There are two parts to your question:

1) The easy part is the direct answer: If the user doesn't feel like they have left the Payment tab (or whatever tab is in question), they haven't. There is no need to over-complicate things because "technically" the page is a hierarchical gray area of the site. So... keep it simple, for the user. Have a back link, maybe some breadcrumbs, put a clear headline on the page so they know where they are, keep the original tab highlighted, and you're probably done.

2) This type of problem often indicates a flaw in your information architecture. If you are too far in the development process to try to fix it, then you might have to suck it up and keep going. But, if you're still in the planning stage, you might want to take a step back and ask yourself why you have this floating page in the first place? Are you leading the user into a dead-end? Did you forget an option or choice somewhere in the flow that could eliminate this possibility? Is this task-oriented content in a topic-oriented structure? Could this be a flow when it is currently "just a page"?

I can't answer #2 for you here, but for #1, you shouldn't choose purity over usability and user expectations. Include good navigation and you'll be fine (don't make them click the back button!).

Answer 2

Have a link that says "Back" on your detailed report page.

IMO, you still are on the paychecks tab. Make sure you allow clicking on the active tab though, because in some users minds clicking the tab takes them to a certain page, not to a certain category of pages.

Answer 3

How about implementing a breadcrumb trail?

Paychecks > Check Dated 09.27.12

Answer 4

In that case, I would recommend bringing up additional information inside a modal window. That way the user still has context to where they are at but you can display additional information. Then instead of a back button, the user can simply exit out of the content. Example:

Answer 5

I don't think there will be any confusion if you consider the "Details" view as part of the "Paychecks" tab.

It makes sense to leave the paycheck tab "clicked" but also implement some sort of labeling at the top of each view: "All Paychecks" and "Paycheck Details," for example. Labeling helps users to better understand the various sections of your app. In this particular case, a back button also makes sense.