navigation - Elegant, simple and obvious sub-tabs?

I have a simple navigation setup that requires tabs and sub-tabs. I have the main tabs ready:

But I don't know how to make the sub-tabs fit in and still be user-friendly. What's a good way to handle this?

Answer

Simple:

First off, you may find this question about best practices for tabs interesting where faceted navigation is proposed as an alternative for nested tabs. As the comments point out, it can be a more deeply rooted problem of Information Architecture and addressing it could prevent you from creating nested tabs altogether.

Also, this question about multiple tabs explores the tab metaphor and proposes some other alternatives.

That said, sites with a high amount of information are normally structured in a strict hierarchy pattern, which in UI translates in using multi-level menus, navigation tabs, or breadcrumbs.

Examples of sites with great amount of information that use multi-level tabs are news sites.

Notice how these navigation menus don't really use the tab metaphor although they work as such.

Obvious:

We were recently working with multi-level tabs and the designer went through some design ideas to find which one worked better.

We found that users didn't notice the ones with less contrast, and had difficulties finding sub-sections. Also you can see the use of "pills" as an alternative to tabs to avoid a metaphor of tabs within tabs (nested tabs).

We ended up using the last alternative, for the following reasons:

• High contrast: easy to spot on an information-heavy site.



• Affordance: explicitly using UI tabs gives the right message: they are intended for navigation. The other examples don't have the affordance of a tab and could be confused with regular links or advertisment.


• Integration: by using the father's selected color as the background for the nested tabs, it clearly conveys sub-tabs are navigation within the selected menu option.

Elegant:

Elegance is rather subjective. My opinion is that elegance goes hand-in-hand with simplicity and attention to detail. As a bonus, a Smashing Magazine recopilation of elegant sites (I love this blog).