Best practices for Tabs

Question

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

Could you make that screenshot a little bit bigger? – Bart Gijssens Nov 24 '11 at 07:37 — Bart Gijssens, Nov 24 '11 at 07:37
@Bart Gijssens Updated the image – Ravi Nov 24 '11 at 07:47 — Ravi, Nov 24 '11 at 07:47

score 6 · Accepted Answer · edited Nov 11 '22 at 12:07

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

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

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 '11 at 14:46
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. — Roger Attrill, Nov 24 '11 at 15:02
Yep got it. Thanks a lot. Will try to share the mockup once i complete — Ravi, Nov 24 '11 at 16:03

Bart Gijssens · Answer 2 · 2011-11-24T09:18:19.437

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

edited Nov 24 '11 at 09:18

answered Nov 24 '11 at 07:40

Bart Gijssens

17,607
4
49
62

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. – Marjan Venema Nov 24 '11 at 08: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.
– Bart Gijssens Nov 24 '11 at 09: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. – Marjan Venema Nov 24 '11 at 10:09
The link is dead – otinanai Apr 21 '17 at 15:21
That's why we have the screenshot. – Bart Gijssens Apr 26 '17 at 10:35

score 0 · Answer 3 · answered Nov 24 '11 at 07:26

0

I think you need a tree for this.

answered Nov 24 '11 at 07:26

Rocky

111

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. – Roger Attrill Nov 24 '11 at 09:07
Oh, sorry. I didn't see that picture clearly. It can't not be enlarged that day. :) – Rocky Nov 25 '11 at 00: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 '12 at 12:12

Best practices for Tabs

3 Answers3

Linked