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!

3 Answers
3

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.

ohhh, I know... I've thought of that myself, and it's not a pretty comparison.. those tab bars are one of the worst examples of terrible user interaction components. So yea, that's a great point. Distinguishing them by style is something I'll look more into, see if I can mock-up a design that could eradicate this problem.
–
AndroidHustleDec 6 '11 at 15:11

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.

I see what you're saying. And we did consider using faceted navigation, which I assume is what you're referring to. However, the table in this view contains a quite large amount of columns where users will gain from being able to have as many columns as possible displayed at the same time for quick analysis. Compromising the width of the view with a tab/menu -bar is therefore not optimal. I definitely see it as a more suitable option in other contexts but in this it just wont do...
–
AndroidHustleDec 6 '11 at 14:50

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.

Thanks for your answer! I see what you're getting at. The subject has been discussed amongst parties and it has been concluded that the differentiator will be by using a different colour code. I would agree that using colour alone to differentiate between items in a hierarchy wouldn't be enough. However there still is a difference in mapping in the sample above. The outer main tab bar is framing its content with the additional inner sub tab bar. This, even though not most effective, will trigger the hierarchical interpretation of the GUI navigation system.
–
AndroidHustleDec 8 '11 at 8:27