7

What are the maximum levels of tabs we can have in a web application..? I am working on financial application where i have display project information which will need atleast 3-5 levels of tabs to show information.

The problem what i am facing here is: i have to show types of factories under a project and each factory will have its own subfactories and it own financial information. The problem is coming here when i have show financial information which will have different fundingtypes and each funding type will have sub funding types.

So, it is going 3-5 levels of tabs. My question is can have that many levels of tabs in application interface.? enter image description here

2
  • Could you make that screenshot a little bit bigger? Nov 24, 2011 at 7:37
  • 1
    @Bart Gijssens Updated the image
    – Ravi
    Nov 24, 2011 at 7:47

3 Answers 3

6

I would consider using a faceted navigation over trees or nested tabs in this instance.

The pattern is flexible enough to adapt to lots of different scenarios, but powerful enough to reduce many layers of nesting down to what in the user's mind is a flatter interface and therefore easier to deal with conceptually.

It's also more space efficient and consistent than ever decreasing presentation areas that you will find using nested tabs.

Design Patterns: Faceted Navigation

faceted navigation

...the libraries run collapsible facets down the left. Only the most relevant facets (subject, format, location) are open. Most are closed by default. Each open facet reveals only the top four or five most heavily populated values. This allows for a small facet footprint that frees up plenty of space on the main stage for the results themselves. The number of matching results for each value (shown within parentheses) is a key element of the map, as is the reformulation of search terms and selected values as stacking breadcrumbs, which let users view and modify their current search parameters.

Also see Mike Madaio's slideshare on Better Faceted Navigation: Advanced Design Techniques

3
  • Here i am not showing any search results, just showing a project information and its financials. Can we use faceted navigation for this kind of pupose.? Usually we see faceted on the e-com portals or any product based apps.
    – Ravi
    Nov 24, 2011 at 14:46
  • 1
    Absolutely - I deliberately used the term faceted navigation as opposed to faceted search. Although based on the same concept, the mindset is not that you are searching for a page, but that you are specifying the page to display. Note that the 'lower' facets must adapt their options according to changes in the choice of 'higher' facets - either by defaulting to a first option, the last used option, or no option at all - depending on your desired requirements. Nov 24, 2011 at 15:02
  • Yep got it. Thanks a lot. Will try to share the mockup once i complete
    – Ravi
    Nov 24, 2011 at 16:03
4

My advice is not to use nested tabs.

If you are working with a hierarchy, use something like this: http://cssglobe.com/lab/sitemap_styler/01/#

enter image description here

5
  • 2
    Please add the screenshot to your answer. That way this site can stand on its own two feet in case the link rots. If you like, keep the link for attribution purposes. Nov 24, 2011 at 8:50
  • I used the link for 2 reasons: 1. It's a working example which tells a lot more than just a picture 2. I feel that it's only fair to give credit to the people who invented it. Nov 24, 2011 at 9:19
  • 1
    I fully agree: give credit where credit is due. I didn't just realize it was a "working" example. The screenshot here is still worth a lot and greatly appreciated. Nov 24, 2011 at 10:09
  • The link is dead
    – otinanai
    Apr 21, 2017 at 15:21
  • That's why we have the screenshot. Apr 26, 2017 at 10:35
0

I think you need a tree for this.

3
  • If you look at the picture there's already a tree inside the 4th or 5th nested tab!! I don't think nested trees are a good idea - or even one tree with so many levels. Nov 24, 2011 at 9:07
  • Oh, sorry. I didn't see that picture clearly. It can't not be enlarged that day. :)
    – Rocky
    Nov 25, 2011 at 0:56
  • On the contrary, I think that trees are just the right choice for a smart and usable solution when nested levels are so much. I would not neglect "habituation": since trees are one of the first and widely used interface element in OS's since decades, users are comfortable with them. Using rulers to better highlight the nesting level (which is usually rendered only with indentation) helps more. You could have a usable tree which easily shows the position of the user also at the 8th or 10th level. The same thing would be quite difficult with tabs.
    – yodabar
    Mar 15, 2012 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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