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.

I'm designing a complex web application and my colleague believes that using a tab panel is a bad idea. I'm more ambivalent.

Can anyone point to evidence (anecdotal or research-based) that could help clarify whether I should I avoid this practice.

I've provided an example below.

Tab Example

share|improve this question
    
how do you think the visual design will help? –  Pattoin Apr 28 '10 at 10:19

8 Answers 8

Wow, I am going to be the only one to answer this way: It's fine in the right context!

Your example is the wrong context. Steps in a wizard are not tabs. However, it's fine to use tabs within tabs if you follow the rules::

  1. Each level of tabs should visually differentiate themselves so its clear what level of organization you are working on.
  2. Limit number of tabs. Infinite is bad. 5 is the max. (Shown below).
  3. "ON" states should be extremely clear. Use a hot color to make sure its obvious. The user should know where they are at all times without any thinking.
  4. Don't skimp on information architecture. Tabs are a function of organization. Be creative and make sure the organization is intuitive.
  5. Make sure the tabs are really tabs, and not steps. (Your example)

Complex Example. A B2b Application with intense navigation and a lot in it.

enter image description here

Another example, from an application I designed in 1998:

enter image description here

share|improve this answer
    
I agree, with some caveats. See my answer, elsewhere on this page. –  JeromeR Apr 29 '10 at 2:56
    
I'd make tabs actually look like tabs. They're supposed to look like card index card tabs with curving upper edges - so that this triggers the 3D visual effect of the tabbed pages actually being in front of each other. Like this:metoffice.gov.uk/weather –  PhillipW May 23 '11 at 21:27

Nested tabs are in violation of the Windows User Experience Interaction Guidelines for Windows 7 and Windows Vista (see pg182). This includes combining horizontal tabs with vertical tabs in the same window. Chances are they have plenty of evidence for forbidding this. The issue is that users can easily become confused on what page of what tab they're on, and get mixed up on where to click.

The only reason to nest tabs is if you have hierarchically organized information. However, there are plenty of other options for navigating hierarchical information. Breadcrumbs and trees come immediately to mind.

In your example, I'm not sure you really have hierarchical information. Are users going to be jumping back to arbitrary Steps from Sub-Steps? And if so, how often is it going to be to the default/last-visited Sub-Step of that Step? Is there any reason to distinguish between Steps and Sub-steps? Why not just make them all Steps? If you need to provide some conceptual framework, maybe it’s sufficient to do that with static text (e.g., “Design your cyborg (Steps 1-5), Program your cyborg (Steps 6-8), Wreak havoc with your cyborg (Step 9)”)

share|improve this answer

User experience is all about context, so its possible that there may be situations where tabs within tabs might make sense and if properly implemented could provide a good user experience.

However, as a general rule, I think it's something that should be avoided unless you have evidence to show that it is the most appropriate solution for the situation in hand.

With regard to the specific context in which you want to use nested tabs (your example), I think they are completely inappropriate and nonsensical! Tabs enable random access (to the contents of the tabs), but you are trying to implement a (linear) step-based process so even a single set of tabs for the steps would be the wrong (navigation) tool for the job, let alone nesting tabs within tabs!

I suggest that you limit navigation within the step process to forwards and backwards (and an exit/abort) and if your steps really require sub-steps/tasks then list them in sections on the page for their parent step.

share|improve this answer

Yes* with an asterisk. But the first question I would ask is this:

How else can we solve this design problem?

If the alternatives aren't pleasing and simple, then—despite the fact that nested tabs are against the Microsoft Guidelines—I would consider a tabset-on-a-tab solution. Why? Because GUI designers aren't always tasked with solving simple problems—especially outside the domain of the Web, where clients can bring you problems much more complex than "Tell the user X" or "Sell the user X", and where users may have specific needs that prevent you from temporalizing a complex task into wizard-like steps, or from simplifying the user interface by progressively disclosing the occasional controls, or any of the other tricks designers can use.

I think that, with a broad interpretation of tabs, the answer to this question is Yes* with an asterisk. The asterisk follows: Perhaps the tab sets should differ in appearance (which may, in turn, cause you to name them something other than tabs—such as navigation bars, blinds, wizards, and so on). Whatever you do, when your design is complex, check your prototype with users; do they find tabs-on-tabs too complex? If so, re-read the first paragraph, above, and be prepared to iterate.

On a personal note, a complex project I'm working on will soon have a working prototype that includes nested navigation. I'm looking forward to some testing with users, to see how they fare. A month from now, I'll have tested the design with real users and I'll be trying to adapt the design if user testing reveals major problems.

share|improve this answer

It always depends on how they are rendered. Check this out alt text. They're present everywhere, but they likely won't affect the existence of tabs under them.

In your example, the tabs were too close to each other that it seemed that each "mother" tab will contain nothing but another group of tabs. It does look awkward.

Like what Charis said, tab logic can be done without the look of tabs. I don't think there's a study out there that would say that a tab logic shouldn't be used inside a tab logic. Majority of sites do this, including UXExchage. This issue is about how things are visually rendered.

As for this case, you can use arrows that show steps instead of tabs.

share|improve this answer

This should need no research.It is definitely confusing having tabs under tabs, at least in a graphical way. You could use the tab logic but without the look of tabs. What worries me most is that I see the word "Step" which makes me wonder if your initial intention is leading the user to take some configuration/settings steps through tabs. If you do, I would strongly suggest you used a wizard.

share|improve this answer

I used tabs within tabs on a complex intranet application once but we used horizontal tabs for the main navigation and the sub-navigation used vertical tabs - kind of like a file or folder - along with distinct colour-coding and it worked quite well.

Unfortunately I don't have an image to show you but we followed the 'folder' metaphor quite closely because we figured the target users (a government dept) would easily recognise it and the user-testing bore that assumption out.

Hope that helps.

share|improve this answer

I'm with Charis - nested tabs should definitely be avoided and since your mockup suggests that users are working through a linear step by step process, then a wizard or progress bar (e.g. http://developer.yahoo.com/ypatterns/navigation/bar/progress.html) might be more appropriate?

share|improve this answer

Your Answer

 
discard

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