Is it ever okay to have multiple rows of tabs?

Question

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.

Funny, I always prefer to have multiple rows rather than scrolling or cut-off text. — user541686, Dec 29 '11 at 23:25

Naoise Golden · Accepted Answer · 2012-01-03T18:32:22.650

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

edited Jan 03 '12 at 18:32

answered Dec 29 '11 at 22:22

Naoise Golden

4,415
24
28

16

+1 "the repositioning of tabs to the front row causes tremendous confusion and complexity." – peteorpeter Dec 29 '11 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 '11 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 03 '12 at 18:26
@Alpha link fixed – Naoise Golden Jan 03 '12 at 18:32
Thanks a lot. There's someone I want to show that to. ;) – Alpha Jan 03 '12 at 20:45

score 18 · Answer 2 · answered Dec 30 '11 at 07:28

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

answered Dec 30 '11 at 07:28

Emil

2,324
1
17
21

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 '11 at 09: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 '13 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 09 '14 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 '14 at 21:19

score 1 · Answer 3 · answered Dec 29 '11 at 22:22

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.

answered Dec 29 '11 at 22:22

CaffGeek

359
1
8

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 '11 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 '11 at 14:18

score 1 · Answer 4 · answered Jan 05 '12 at 13:59

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.

score 0 · Answer 5 · answered Dec 29 '11 at 22:18

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

answered Dec 29 '11 at 22:18

dnbrv

13,227
5
44
75

2

Such a multiline tabbed interface is very confusing since tabs change place when selected. – agib Dec 30 '11 at 11:52
6

Just because Microsoft did it is not a good reason to do it. – Bryan Oakley Jan 05 '12 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 05 '12 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 05 '12 at 20:20

Is it ever okay to have multiple rows of tabs?

5 Answers5

Linked