Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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

share|improve this question
    
Can you provide screenshots ? –  Mervin Johnsingh Sep 27 '12 at 13:51
    
+1 have the same problem with OneUI layout from IBM. –  Frantisek Kossuth Sep 27 '12 at 14:13
    
Why do you think a modal window would be too 'high tech'? Provided the host page is still semi-visible and your implementation doesn't break the back button, I don't see an issue with giving this pattern to users who haven't experienced it before. –  Jimmy Breck-McKye Sep 28 '12 at 12:33
    
Modals are terrible for interacting with any decent amount of data and they are bad on mobile. –  MobyD Sep 28 '12 at 12:37
    
@MobyD - it would help if you added those requirements to the original question. Please tell us as much as possible about your use case and constraints. –  Jimmy Breck-McKye Sep 28 '12 at 12:41

5 Answers 5

up vote 6 down vote accepted

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!).

share|improve this answer
1  
I like that you came to two very correct conclusions. I will probably go with a form of descriptive back button that describes where you are and where you're going back to (similar to a breadcrumb trail in theory, but more of just a dynamic descriptive button). As for number 2, well done, you noticed that something was done before it was entirely thought out (in the software industry?! That never happens! ;) ) . That's reality, and it's not going to change. But I can try to patch any confusion the user may face. –  MobyD Sep 28 '12 at 14:06

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.

share|improve this answer

How about implementing a breadcrumb trail?

Paychecks > Check Dated 09.27.12

share|improve this answer
    
It's a consideration that I've had but they would only be applicable in this one situation and I'm just not sold on one deep breadcrumb trails. You don't leave bread crumbs when you go out to your mailbox. –  MobyD Sep 27 '12 at 14:19
    
Going out to grab your mail is not the same as navigating around the web. You have no sense of space when you're navigating the web. You do when you're walking around the real world. Breadcrumbs, even if they're only one level deep, still help the user to gain a better sense of where they are in the site. If I saw the breadcrumb trail that Kyle posted, I'd have no trouble knowing I'm one section below the overarching payments (and I can easily get back via one click). –  Dave Luciano Sep 27 '12 at 23:39
    
While not the same, they are undeniably similar. It's why the metaphor came to be. A TRUE bread-crumb trail is overkill. –  MobyD Sep 28 '12 at 14:01

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:

image

share|improve this answer
1  
It doesn't necessarily need to be modal to the whole app, but could be modal to a single tab. –  MSalters Oct 1 '12 at 11:06

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.