User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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 any evidence (anecdotal or research-based) that could help to clarify whether I should avoid this practice.
I've provided an example here.
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::
Complex Example. A B2b Application with intense navigation and a lot in it.
Another example, from an application I designed in 1998:
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)”)
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.
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.
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.
It always depends on how they are rendered. Check this out alt text http://www.ubuntu-pics.de/bild/54446/screenshot_017_69kTK2.png. 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.
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.
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?
