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?
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
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.
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.
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:
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).
I like the this multi-level tabbed interface although I'm not sure it meets your needs:
Originally found here: Designmodo Futurico UI Pro
This UI pattern is also used on Github:
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.