15

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?

DigiKev
  • 1,218
  • 7
  • 17
Ry-
  • 268
  • 1
  • 2
  • 12
  • 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
  • @dnbrv: No, that's all the navigation, and yes, the sub-tabs are necessary in some form or another. – Ry- Jan 18 '12 at 15:50
  • 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. – Brad Orego Jan 18 '12 at 17:25
  • @dinko628: I have a lot of pages (17), so what else can I use? It really needs to be at the top. Anyway, sounds good, I'll give that style a try. – Ry- Jan 18 '12 at 18:06
  • 2
    Smashing Magazine (http://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. – Taj Moore Jan 18 '12 at 18:42
  • "so what else can I use?" = avoid horizontal menus. They have limitations such as this. Other options: mega menus, drop downs, vertical sub-menus, etc. – DA01 Jan 18 '12 at 18:45
  • 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. – Brad Orego Jan 18 '12 at 18:58
  • @tamjo: Unfortunately, I really need the sidebar for something else. – Ry- Jan 18 '12 at 20:25
  • @DA01: Vertical menus are not an option. Mega menus don't really fit. Dropdowns might be a possibility - but I'd like to express both the default and current page. So something similar might work. – Ry- Jan 18 '12 at 20:26
  • @dinko628: All of them will be used about the same amount of time, and they really need to be in sub-categories :) Sorry. – Ry- Jan 18 '12 at 20:27
  • @minitech What're the tabs used for/what're trying to build? Did you consider exactly what the end-user goal is? I'm sure there are alternate ways to achieve what you're trying to display - whether or not they're any better is up to discussion. It's hard for us to help if you don't help us help you ;) – Brad Orego Jan 18 '12 at 20:36
  • @dinko628: One is maps, one is reports, and one is administration. Each one has sub-tabs like maps of , reports on , and administrating *. – Ry- Jan 18 '12 at 20:37
  • 1
    Nested tabs, unfortunately, are usually a symptom of bigger overall IA issues. – DA01 Jan 18 '12 at 21:22
  • @DA01: Not much I can do about it, being a new developer at this particular place :( – Ry- Jan 18 '12 at 21:39

3 Answers3

16

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

Community
  • 1
Naoise Golden
  • 4,415
  • 24
  • 28
12

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

This UI pattern is also used on Github: Github's fancy pants tab navigation

Adriano
  • 359
  • 1
  • 2
  • 12
ScottK
  • 428
  • 2
  • 6
5

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.

Jeff Woodard
  • 151
  • 2