Best Practice for Tab Placement on Widget?

Question

Recently I have been working on restyling tabs on a widget. Some problems I have encountered during the restyle is our 960 grid system which with a side navigation included allows me a space of 12 cols to work with.

While researching, top tab placement seemed to be a common pattern used. However if more tabs are added to max out the first row a second row is created which isn't very eye-catching.

top tabs

Side tab placement would allow the widget to display tabs in a single row going downwards. However less content doesn't look good in a large container.

side tabs

What is the best practice for tab placement on a widget? Which would provide for a better user experience?

What is the max number of tabs you have? What is the average? — Charles Wesley, Jan 04 '13 at 19:21
@Charles: I'd say on average it's between 2-5 tabs. For max tabs I don't have a set total but it's something I am looking into. — Courtney Jordan, Jan 04 '13 at 19:38
That's always the hardest part about horizontal navigation interfaces for me -- the number of items and the length of the title can rule in or out a lot of options. — Charles Wesley, Jan 04 '13 at 20:02
@Charles: I concur! The length of words makes it difficult to define a max number. — Courtney Jordan, Jan 04 '13 at 20:08
@Charles: Great Find! A more tab would be an idea but I want to steer away from that mostly because content editors will abuse it. I am starting to think the top tab layout would be the right choice but limit tabs to max out at 5 or 6 (depending on word length) on 1 row. — Courtney Jordan, Jan 07 '13 at 13:18

Andy · Answer 1 · 2013-01-05T00:18:28.927

7

Use a drop-down menu for excessive tabs. enter image description here

edited Jan 05 '13 at 00:18

answered Jan 05 '13 at 00:08

Andy

2,068
2
13
13

Good suggestion. That's what I was getting at with my suggestion #2a, but your diagram makes it much clearer. @CourtneyJordan, if you're looking for an example of an application that does something similar to this, try overfilling the bookmarks toolbar in Chrome. – Graham Herrli Jan 05 '13 at 00:31
but you said "move all tabs to the side," that sounds different. – Andy Jan 05 '13 at 01:37
Suggestion 2b was "move all tabs to the side." Suggestion 2a is the one I said this is a great graphic demonstration of. – Graham Herrli Jan 05 '13 at 02:17
still, my point is your wording is not descriptive enough, "down the side" make someone though about vertically aligning them. – Andy Jan 05 '13 at 02:50
The more tab is a good idea but I didn't want to give content editors this option because they would abuse it. – Courtney Jordan Jan 07 '13 at 13:12

score 4 · Answer 2 · edited Apr 13 '17 at 12:32

There was an earlier question about whether it's ever okay to have multiple rows of tabs. The general consensus was that it breaks the tab metaphor and gets confusing.

Accepting that multi-row tabs won't work, you have a couple of options:

Use the side tabs.
Use tabs across the top when there are only a few of them, but if there are more tabs than fit across the top, either:
- a. add additional tabs in a dropmenu down the side.
- b. move all tabs to the side.

I don't like option 2b because it means moving the navigation, which could be confusing to the user, interfering with the Gestalt principle of consistency. Option 2a might work depending on your layout and on how rare it is to have more tabs than fit across the top. I think it's probably just best always to put the tabs on the side. Never mind that it will look a bit odd when there are only a few tabs; don't compromise usability for aesthetics.

Courtney Jordan · Accepted Answer · 2013-02-27T14:14:39.030

4

Through research regarding tabs, top placement is best as a top tab can appear as a header to the associated content below.

It's also a good rule of thumb to constrain a tab count (usually 5 - 7) that adds a bit of control to user content. If tabs exceed the 5 - 7 limit content editors will continue to create new tabs which can overflow and create clutter. Even adding a more tab could create more user confusion as it can display even more information that creates more clutter.

Users like simplicity and being able to find information quickly!

edited Feb 27 '13 at 14:14

answered Feb 27 '13 at 13:25

Courtney Jordan

1,803
1
15
27

I also want to mention side tabs aren't all that bad either. Side tabs can be used for tabbed navigation as seen on http://www.apple.com/iwork/tutorials/#keynote but you'll want to keep side tabs to a count of 3-5 tabs as it'll cause users to scroll for it exceeds the page width and appear over-whelming if there is content underneath a side tab widget. As a designer i'm all for conserving space and allowing enough breathing room (white space) to allow users to have an enjoyable experience while browsing my sites. – Courtney Jordan Feb 27 '13 at 13:32

score 0 · Answer 4 · answered Jan 06 '13 at 02:36

It seems like there is a better way to deal with excessive tabs on the first option:

Firefox-style horizontal scrolling for additional tabs.
Windows Classic-style tabs, which match the width on top and bottom. (I'm not a fan of this).
Dropdown menu per Andy's answer.

score 0 · Answer 5 · answered Jan 06 '13 at 03:07

Google Chrome for iPad has an innovative way of dealing with "too many" tabs that's works well but is not for every application. Beyond a comfortable number of tabs, which seems to be 4 on an iPad in portrait orientation, new tabs stack up on top of old tabs. They are fanned in such a way that they're all visible (the text on the tab isn't always visible but the edge is visible). Taking advantage of the touch UI, you can touch a behind tab to bring it to top, and actually slide them around with your finger.

Hard to describe, it's best to try it yourself to understand it. And not easy to implement. Like I said, not for all applications, but a very good solution for touch UIs and small screens.

score 0 · Answer 6 · answered Feb 27 '13 at 15:03

I'm not sure what kind of real estate you have to work with, but I am a big fan of the menu system that Mashable recently implemented. They use both the a horizontal and vertical running menu, which might be useful if you can break up your content by some form of a category.

Sample of Mashable Menu

Maybe something less space heavy like what tabbed browsing does when you have large number of pinned tabs and unpinned tabs open. If the menu can be sorted into primary (pinned) and secondary (unpinned) tabs. The secondary tabs can then collapse and users can scroll through or expand these collapsed tabs.

Sample of Firefox Tabs

You may want to consider your content when deciding how to display a menu with a significant number of options. For me, navigation is what keeps me coming back - how easily I can navigate your site/application successfully.

Things I try to consider when developing navigation: - How technology/software experienced are my users? - What menu options will users need most frequently? - How easily can my users get lost? - Can menu options be combined to make the navigation less cumbersome?

score 0 · Answer 7 · answered Dec 18 '13 at 03:38

If you've got too many tabs it may be time to start thinking about using a different organization scheme.

Unlike some of the other suggestions, I don't think dropdown menus are the answer, especially on the web. Some of the major drawbacks include:

They hide information; Can you tell me which menu in Word inserts a footnote without hunting?
They've fallen out of favour as they're difficult to represent in mobile displays where there's less room and no hover state.
They need fallbacks in case the submenu can't be displayed for some reason, leading to confusing behaviour where clicking the top level item acts more like a tradition navbar.

Generally, most sites I've seen that have so many navigation items that they can't fit them all into their navbar are being overzealous with their organization. Simply grouping related content into a single page with headings, instead of separate pages, can make the number of pages far more manageable.

Not only that, but users aren't afraid to scroll. They're already on the page so they'll happily wheel or swipe their way down the page at their leisure. Buttons, on the other hand, are subconsciously seen as decisions and users are wary of decisions, especially when presented with a lot of them at once. Each click represents the possibility that they'll be taken away from where they are to somewhere unfamiliar and not be able to get back (browser metaphors aside).

Even if they can overcome their analysis paralysis with so many tabs, do you really think they'll be happy reading to the bottom of one (relatively) short page, only to have to scroll back to the top to get to the next page? Sure, you can try using the "scroll to top" button approach, but again, that's a click that users may interpret as an unknown navigation.

My recommendation would be to reorganize the content within the tabs, rather than trying to build a better mousetrap. Sometimes the best user experiences have nothing to do with user interfaces.

Best Practice for Tab Placement on Widget?

7 Answers7

Linked