9

The mockup below, has a screenshot of a software I stumbled upon last week. It grabbed my attention that it presented information in the following way. It had Many Interface Level tabs, inside those, it had many Major level tabs, that contained many Minor tabs. I want to stop there, because it gets confusing. What I want to know if how to reduce complexity by reducing the number of tabs presented for the user. The system itself is complex, but I'm pretty sure there should be better ways of presenting information.

The information above and the mock-up below might seem insufficient, however, it might give you an idea of the problem.

The application is window based (no browser).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

One quick solution I see, would be eliminating Interface level tabs and creating separate windows for those specific interfaces. But then I wouldn't like to have that many Major and Minor level tabs.


Is there any usability standard that would suggest the wise use of tabs?

3

3 Answers 3

15

The problem with tabs within tabs is mostly visual, not logical. The situation you describe has three navigation levels - that's not that uncommon. If you make the different navigation levels look different from one another, you'll find that the perceived complexity is reduced.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2

Wow that really is a complex situation you have there.

First of all I'm not really clear on whether you mean how many tabs in each set is too many or how many sets are too many, if it is the former then I'd say as long as the user understands the meaning and can easily see the full name of the tab then it should be ok. If it's the latter then ...

I usually try to avoid situations where I have to have a tab inside a tab because it starts to get confusing as to where one tabbed area finishes and another tab begins, which would be made even more confusing if each of your interface tabs also had the same major and minor tabs within them. The user would look at some of the content and constantly have to be referencing back so they don't get lost "OK, this piece of information was within minor tab 3 which relates to major tab 4 on interface 2"

If there is no other way around it you could pull off two levels of tab groups if the design can visually separate them and use things like shading and enough white space to show the hierarchy. As for what to do with the third level would it possible to have a set of radio buttons to select what information to view?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I know it's still not the prettiest solution but I think it is at least a bit better than just having many levels of tabs, hope this helps.

1

Simple is better

Easily understood and accurate mental models are best for users.
A general rule-of-thumb is: If your interface is complex, then the mental model most likely is as well.

Discussion

In this case the tabs seem to introduce a lot of possible confusion. I would guess that either a UX designer didn't create this or they were lazy, because things like this should be abstracted more. But keep in mind that I know nothing about this interface experience and it's intended use/purpose and as with most things "it depends", so maybe this was the best design compromise.

2
  • You lost me on conceptual model... what exactly are you talking about? I mean, you refer to the conceptual model of...
    – edgarator
    Jul 6, 2012 at 5:45
  • 1
    Had brain fart there :) it is actually called "Mental model"(en.wikipedia.org/wiki/Conceptual_model) and is one of the more fundamental concepts within UX. It is the model in someone's mind of how something works. For instance how the UI and system of tabs work and what they represent and what can be done with it. Jul 6, 2012 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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