16

We have an admin page in our application that has toomanytab-itus (see the second set of tabs are stacking):

enter image description here

I've been tasked with solving this issue. Reorganising/grouping the content to reduce the number of tabs was my first choice but this is looking too expensive to implement. So my cheap and cheerful solution is to simply replace the tabs with buttons:

enter image description here

My boss is concerned this will be an unfamiliar mechanism to users. Does anyone have any examples of where this sort of approach has been used before? or any other solutions to the too many tabs problem?

UPDATE

Thankyou for all the feedback and answers. I have come up with a different solution based on all your useful feedback, which groups areas into fewer, more user-friendly tabs and any sub-options are dealt with with a link bar.

enter image description here

Improve this question
4
  • 2
    See Tab Overflow: What to do when I run out of space for tabs?
    – Rahul
    Aug 5, 2011 at 9:38
  • 2
    Tabs are not the only fruit. See alternatives to the tab control - I think the master-detail answer is relevant here. Essentially what you want is to provide a navigation control?
    – Roger Attrill
    Aug 5, 2011 at 9:43
  • 2
    Something is very odd: Looking at your interface there looks like some pretty strange overlaps: 3 tabs for a search function, 1 tab for a print command, 2 tabs for view controls. Is the system not a search and display results system? What else does the system do? It could be simplified substantially IMHO...
    – colmcq
    Aug 5, 2011 at 12:09
  • one thing: can you add a little 'hide text' ^^ graphic or somesuch for expert users to hide the text above the second set of tabs; there's a lot of valuable real estate wasted up there...
    – colmcq
    Aug 8, 2011 at 12:45

5 Answers 5

Reset to default
4

I think I see how it works now: it controls the displayed attributes of various pages of a system eg "on the advanced search page I want to display these attributes" etc. If that is the case then I would probably advise grouping tabs together: one tab for viewing pages, one page for results pages etc.

i also advise that if you introduce the possibility for many opportunities to control display elements, as is the case here, you're introducing the possibility that lots of pages will follow different display conventions and this is risky...

Improve this answer
3
  • I agree with this, but client requirements dictate the necessity for this much flexibility.
    – benb
    Aug 5, 2011 at 14:07
  • 2
    nevermind. UX is about stating your case and getting as best compromise as possible; it's a rare thing to arrive at a perfect solution because clients are always always always intransigent to some extent.
    – colmcq
    Aug 5, 2011 at 14:08
  • I've gone with grouping in the end (see updated question) but retained the flexibility with a third navigational level (a link bar).
    – benb
    Aug 8, 2011 at 11:10
11

One immediate solution to your problem is to put your tabs on the side. With tab labels stacked vertically, you can keep 20 or more visible without the user resorting to scrolling. It’s easier for a user to scan down a list than across for a target item, so this is good practice whenever you have a lot of items.

Stack of tabs on left side

The tabs-nested-in-tabs is a problem that can lead to confusion, but I suspect that you ameliorate this by having one set horizontal while the other is vertical. Actually, I'd probably change the top set into links (color underlined text, without the tab imagery). It looks like they all load specific content that fills pretty much the whole page. I’m don’t see the tab imagery providing much benefit in that case. Tabs are most helpful to the user when you need to show multiple regions of content within a page or window with other content or action controls.

Improve this answer
1
  • Thanks for your answer. What I left out of the screenshot was a vertical navigation column on the left, which makes the vertical tab bar solution feel a bit uncomfortable.
    – benb
    Aug 8, 2011 at 11:13
6

SEOMoz uses it. If they use it then I think there's enough precedent that you won't totally alienate people, depending of course on your market.

Personally though I think that you're likely trying to present too much information in a situation like this which would be better placed in a popup or hidden using something like jquery on the page.

Best case scenario, short of a major rethink in what you want customers to do, would be to move your tabs vertically. It gives you more vertical space (which is important in the age of laptops) and you can stack as many tabs as you want there without getting ugly overflow problems. You'll also be able to "nest" your tabs in vertical space to create a visual navigation tree easily.

Improve this answer
4
  • 1
    +1 for vertical tabs; seems relatively quick and painless to implement.
    – Zsolt Török
    Aug 5, 2011 at 13:59
  • +1 - Vertical tabs or a drop-down select menu would be appropriate choices, IMO.
    – Virtuosi Media
    Aug 5, 2011 at 21:05
  • I think that what you refer to is an example of how not to do things. I think it looks quite cluttered and complex.
    – Bart Gijssens
    Aug 8, 2011 at 11:05
  • To be 100% honest it would be far from my first choice in design, but I simply dug it up as an example of a company that had implemented it successfully, even if it isn't the optimal method. The best method in my opinion, as I said in my answer, is the nested vertical navigation bar.
    – Ken
    Aug 8, 2011 at 13:12
5

I would not go for the button solution. Buttons suggest an action, instead of a UI switch.

Apart from having many tabs, I believe you have another problem: tabs within tabs. It is something that scares me. For web based applications, I think it is more or less acceptable. But not ideal. I believe there are 2 solutions to solve both problems at once:

  1. Either you use a solution as suggested above, a master-detail solution, where the master is a hierarchy. So both your tab layers would be combined into 1 new master-detail model.
  2. Or (and I prefer this approach) you use a more webdesign oriented navigation model. The first level of tabs remain tabs (or a horizontal list of links), the second level of tabs is replaced by a vertical list of links.

Please, do not try to turn the top tab layer into some sort of drop down menu.

Improve this answer
3

Depth over breadth. If you have too many top level options you should work on reorganizing them into few high level groups with more ability to drill down. Information architecture is an under appreciated art form.

Just a quick glance tells me that "browse" should probably be it's own button and then "panel, list" be options beneath it. Search could probably be done similarly. Fewer high level options also makes it easier for a user to find what they are looking for, providing of course you lay the info out in a "logical" manner.

Improve this answer
1
  • 1
    Agreed this is the best way to tackle it.
    – benb
    Aug 8, 2011 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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