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 have a simple navigation setup that requires tabs and sub-tabs. I have the main tabs ready:

Main tabs

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?

share|improve this question
    
Do you have another layer of navigation (i.e. main site nav) above it? Are the sub-tabs absolutely necessary? –  dnbrv Jan 18 '12 at 15:49
1  
I refuse to believe sub-tabs are ever necessary. They're pretty evil ;P. Generally speaking though, the best approaches I've seen are where the subtabs don't really look like tabs, but more like links. Think of it like your Bookmarks Bar in Chrome or Firefox. Yahoo & ESPN's Fantasy Sports are good examples of this. –  borego Jan 18 '12 at 17:25
2  
Smashing Magazine (smashingmagazine.com) does an elegant job of handling multiple levels of navigation. If you open them in a large browser window and start narrowing the window, you will see (through responsive design) a number of design solutions. –  tajmo Jan 18 '12 at 18:42
1  
@minitech I can't really answer that question without knowing more about the site; what's the purpose of these tabs? It might be worthwhile to take some time to think about what your users are trying to accomplish, and use that to better inform your organizational structure. At the very least, you could list out the top, say, 6-8 most common, then create a drop-down menu at the end for "More" or "Other" options. –  borego Jan 18 '12 at 18:58
1  
Nested tabs, unfortunately, are usually a symptom of bigger overall IA issues. –  DA01 Jan 18 '12 at 21:22
show 9 more comments

3 Answers 3

up vote 9 down vote accepted

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.

enter image description here

enter image description here

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.

enter image description here enter image description here enter image description here enter image description here

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

share|improve this answer
    
Hm... I do like that last option. –  minitech Jan 20 '12 at 20:39
1  
Great comprehensive response. –  Ben Brocka Jan 20 '12 at 22:52
add comment

I like the this multi-level tabbed interface although I'm not sure it meets your needs: tabbed interface

Originally found here: Designmodo Futurico UI Pro

share|improve this answer
1  
The separation between vertical and horizontal tabs makes the different quite clear, I like it. –  Ben Brocka Jan 20 '12 at 22:57
add comment

http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ makes some good points. When it comes to horizontal sub menus, I definitely agree, they are much less usable. An application I'm currently working on has one in it, and I curse every time I use it.

At least with a vertical dropdown, the hover tunnel is much bigger and doesn't require the same level of accuracy in your mouse movements/clicks.

share|improve this answer
add comment

Your Answer

 
discard

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

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