Main Tabs & Sub tabs colour codes, best practice?

Question

We are developing a webapplication and some of us has gotten into a small argument of how the main tabs and their corresponding sub tabs should be displayed.

It's mainly a question of weather the main tabs and the sub tabs should have the same colour coding or if they should differ.

Let me present two screen shots displaying the two variants (please click "show image" if they're hard to see):

These images show the two variations of tab colour coding.

• Main tab being blue when inactive and white/grey when active. And sub tabs also having the same colour coding
• Main tab being blue when inactive and white/grey when active. Sub tabs being greyish black when inactive and white/grey when active.

There are drawbacks and gains with both variations. The first have a cleaner look with a more narrow range of colour coding, the second one because of the different colour coding more directly distinguish it from the main tab bar. Then again the pure layout and mapping of the sub tab bar is maybe enough to distinguish it from the main tab bar..?

I would like to hear from you guys your own opinion in this matter and if you have theories or best practices to reference that would be great too!

Answer 1

My opinion on this (for what its worth!) is that it would be better to distinguish the tabs by style rather than by colour. You could have the lower tab as a button bar or maybe something simple like a pipe "|" delimited menu instead.

Its important to distinguish between the two menus, as it at a glance it looks like it could be a version of the dreaded microsoft tabs.

Answer 2

My direct feeling on this is that you shouldn't have two sets of tabs. This make the top of your application confusing and you lose lot of space.

There are lots of other way to optimize space in this context and to offer a more appropriate navigation. For instance, you could go for vertical tabs on the left to avoid the user to move the mouse cursor up when he would like just to stay at the same level of navigation. This will make your header clearer with one obvious navigation.

Answer 3

I see three primary communication objectives here: hierarchy, current position within the hierarchy, and relevance to current task. I don't think it's wise to try to use color alone to communicate all these things at once.

I might explore using contrast in multiple characteristics--like size, position, text treatment or even a different UI element--to differentiate one of the two levels of of the hierarchy in your example. I think the most visual weight should probably be placed on the choices that are most relevant to the workflow of the immediate task.

You should also consider whether, at any given stage of the user's workflow, it is more important to quickly visualize where they are at in the hierarchy, or what other options are available. I suspect that the blue "hot" color of the non-active tabs may be more eye-catching than the light grey of the current tab, so be sure that is where you want to draw the user's eye at that moment.