22

We're working on a UI at work and people want to have the number of tabs in a certain area be flexible width so that in certain situations depending on the title length and the number of tabs, the tab row might end up filling 2 or even 3 lines.

I'm wondering if it's ever ok to have multiple rows of tabs; to me it seems like it breaks the tab metaphor and then you have to worry about tabs changing locations.

At the same time, though, I'm not sure of a good alternative other than a list or accordion.

Improve this question
4
  • 4
    Funny, I always prefer to have multiple rows rather than scrolling or cut-off text.
    – user541686
    Dec 29, 2011 at 23:25
  • 1
    1. 'The tab metaphor' is based on the real life tab system. In actual indexing systems, it is not rare to have multiple rows of tabs (Think card-based library index). Only may look odd and unfamiliar in the UI context.
    – Kris
    Dec 30, 2011 at 8:59
  • 1
    2. Who are the 'people'? The users? If the application is designed exclusively for this group of users, then whatever is convenient for them should prevail over global UI recommendations.
    – Kris
    Dec 30, 2011 at 9:00
  • The tab metaphor is broken not by having multiple rows, but in how they have to behave in order to open (moving rows around or having top row tabs selected. I suppose if you consider the tab area your hand paging through a file and the content area your eyes reading what's in the file you could justify that they don't match up visually and can still be ok.
    – Damon
    Dec 30, 2011 at 15:14

5 Answers 5

Reset to default
27

It definetly breaks the tab metaphor.

Yahoo's Design Pattern Library explicitly states they should be single-lined:

Present a single-line row of tabs in a horizontal bar under the site branding and header

And there are some pretty nasty examples in a 1999 information architecture company's page.

Another article on using the tab pattern in web applications discourages its use for various reasons:

Multiple rows of tabs are confusing and intimidating, particularly to new users who find it difficult to locate the desired tab. In addition, screen real estate is compromised, and the repositioning of tabs to the front row causes tremendous confusion and complexity.

That said, we have seen it in MS Office... so it shouldn't be that bad, right. Right?

enter image description here

UPDATE: other approaches are: vertical tabs, grouping tabs by categories, or a previous screen with icons.

enter image description here

enter image description here

Improve this answer
5
  • 16
    +1 "the repositioning of tabs to the front row causes tremendous confusion and complexity."
    – peteorpeter
    Dec 29, 2011 at 22:52
  • I think the multitabs on windows is like hell. Who has thought of this? Turture that guy! If you click an item, the whole layout change and all clarity is loss. I like the approaches the mac-screenshots show. No Im not an absolute mac-freak :p
    – Michael
    Dec 30, 2011 at 23:30
  • Hi, would you mind fixing the second articles link? It seems really interesting and I wanted to give it a look, but seems that the link is not really there.
    – Alpha
    Jan 3, 2012 at 18:26
  • @Alpha link fixed
    – Naoise Golden
    Jan 3, 2012 at 18:32
  • Thanks a lot. There's someone I want to show that to. ;)
    – Alpha
    Jan 3, 2012 at 20:45
18

I had the same problem a year ago, and I went with the following solution:

When the width of the tabs is less then the width of the container, all tabs are visible.

enter image description here

If the tabs are wider than the container, an arrow appears on the corner, giving access to the hidden tabs upon click. The selected tab is always visible.

enter image description here

Improve this answer
4
  • 1
    +1 I like this approach. Though, arrow could be overseen or tab titles not seen quickly. But still it has elegance.
    – FrankL
    Dec 30, 2011 at 9:02
  • 1
    Late to the conversation here, but this is the correct method of doing it. @FrankL I would change that arrow to say "More >". Indicating there is more navigation to be seen. The only problem then becomes how do you solve for the extra navigation tab. Where does it go when the tab becomes active? The only way around the latter issue would be to make the "More >" tab the active tab giving an indication of where you are in the navigation without specifically saying what it is you are in. That is where a page header comes in handy.
    – rohicks
    Aug 22, 2013 at 19:06
  • Did you achieve this UI with css alone or did you have to use javascript? I am asking because I can only think of a JS solution, but that would always adjust the tabs only after load and therefore have other unwanted "site effects" like flickering of unprocessed tabs.
    – Björn
    Jun 9, 2014 at 17:43
  • @Marcel, I used JavaScript to dynamically construct the panel with the hidden tabs. If the parent element (container) uses overflow:hidden, the page should load correctly before the javascript kicks in. The only thing the javascript does is look for hidden elements and be ready to display them when the arrow is clicked.
    – Emil
    Jun 12, 2014 at 21:19
1

You could also scroll the tabs like MS Excel does when there are too many?

Not saying it's the best approach, just an alternative to multiple rows.

Improve this answer
2
  • 1
    Horizontal scrolling of tabs, especially when they have meaning, is even worse because they user doesn't know what the hidden tabs are and how many are hidden.
    – dnbrv
    Dec 29, 2011 at 22:29
  • USers also often don't know how to or that you can horizontally scroll instinctively. Horizontal scrolling is very rare, though Excel does it quite often due to the dimensions of the data.
    – Ben Brocka
    Dec 30, 2011 at 14:18
1

You could consider the option of having multiple rows by adding one additional row that represents the current tab. For example, if the top row has a tab "foo" and you select it, the tab becomes disabled and the bottom row is changed to have the single tab "foo". The original tab does not move, however.

This avoids the problem of having to rearrange the tabs while somewhat preserving the metaphor. Think of it like removing the contents of a physical file folder but leaving the folder where it is.

I've never seen this done, but I think it might be a good compromise if you have sufficient vertical space for one more tab row.

Improve this answer
0

Yes. There are edge cases where such a presentation is acceptable. MS Windows properties dialogues have used it since at least Windows 95. Multi-protocol instant messaging client Digsby goes for it when the width of the chat window doesn't allow for all conversations to fit in 1 line (it then goes into vertical scrolling of tab rows).

That being said, it's not recommended to have more than 1 row of tabs because interface becomes cluttered. Try to re-organize your information first. If no other options are available, follow Microsoft's example of multiple rows by arranging tabs in a logical way and keeping in mind their size. Also, note how each tab title has approximately the same generous padding on the sides: enter image description here

Improve this answer
4
  • 2
    Such a multiline tabbed interface is very confusing since tabs change place when selected.
    – agib
    Dec 30, 2011 at 11:52
  • 6
    Just because Microsoft did it is not a good reason to do it.
    – Bryan Oakley
    Jan 5, 2012 at 13:43
  • 3
    Just because you don't like Microsoft, doesn't mean you should downvote its patterns when they're considered standard in its realm. Besides, I did say that it's better to avoid it when possible.
    – dnbrv
    Jan 5, 2012 at 17:52
  • 3
    @dnbrv: I didn't downvote their pattern, I downvoted your answer. Partly because of the Microsoft thing, but also because you wrote "... because interface becomes cluttered". "Cluttering" is not the problem. Tabs moving around when you select them are the problem, and logically organizing multiple rows won't solve that. You could have given an example from an Apple product and I still would have disagreed with your answer. I don't believe something is acceptable just because it is "standard in its realm". That doesn't make it right, it only means it is a pervasive practice.
    – Bryan Oakley
    Jan 5, 2012 at 20:20

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.