Tab Overflow: What to do when I run out of space for yearly tabs?

Question

I have page that lists previous recipients of an award, with tabs separating each year's winners.

• Every year there are forty recipients.
• The recipient's name is listed, along with his or her job title and company.
• The same person can be selected in up to three different years.
• Three year winners go into the hall of fame, though that's not represented here.
• Currently, each year's winners are displayed on a separate tab.

The problem is I'm running out of space. After next year, there won't be room to add more tabs. What's another way to organize this data that will work well for up to 20 total years of awards?

Note: Thanks Robert Fraser for the name "Tab Overflow."

Answer 1

How about just showing the last 10 years of awards with the 11th tab to take you to the previous 10 years?

2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older

Most people are only going to be interested in the most recent awards, so having the older awards a second click away shouldn't be a big problem.

Clicking on "Older" would show a page with the following tabs:

Recent | ... | 2000 | 1999

but would otherwise look identical to the current page. You could change the colour scheme just as an extra visual clue, but that would be up to the "powers that be".

Answer 2

You could have a '...' tab and use some JavaScript (yay jQuery) to "scroll" to the right when you click it and reveal the other tabs. Then you could have an arrow on the left so you can go back to the newer tabs. (TY @ChrisF for the inspiration)

Answer 3

For the record, I like @ChrisF's answer, but just for kicks here's how Google Spreadsheets handles it.

Answer 4

I would probably add a bar above the listing and put a dropdown to select the year on the left side of the bar. You would then also have room to add other filtering options via dropdown, that is if any would be useful.

Answer 5

Tabs might not be the right metaphor to use for pagination. If you want to avoid reloading the page to get to years that don't fit in the given space, a scrolling horizontal list may work better.

Check out the products list at the top of Apple's Mac page.

Your list of years is never going to grow ridiculously huge, so you don't need to worry about the typical pagination issues of hiding non-immediate pages, etc:

« ‹ ... 148 149 150 151 152 ... › »

It's probably best to find a way to list all years and occlude the ones that aren't immediately relevant.

Answer 6

If the years are not that many, you can put the 'older' years under a drop down menu at the end.

Answer 7

You can do like Firefox. There is a scroll for hidden tabs. so you can load tabs more than the space you have. Or you can do like Chrome, make tabs smaller by adding more tabs ( this solution won't work for your case, because making tabs smaller, cause labels disappear ). I think having scroll area for tabs is the best solution. in this way user has no limit. You can add a drop down list so user can switch between pages quickly.

Answer 8

Since you do have a bounded set for your tabs (you mentioned "20 years" worth) you could use "vertical tabs" -- sort of like how most blog software has "categories" or "archives" in a sidebar. Then, if necessary, you could put the most important/high traffic items in an easy-to-use format at the top above where your current tabs are.

For example, my website (an out-of-the-box template) has an "Archives" list running down the left side.

http://www.aaronlerch.com/blog/

(Note I'm not trying to pimp my site, it was just what came to mind first because I knew what I was looking for :) )

Answer 9

Like others here, I'd suggest getting away from tabs too.

But if you're stuck with them, you can just cram more tabs into the row and shrink them. (I'm thinking of Chrome's tabs.) When they're too narrow for their labels to fit in, truncate the labels. In your case, you'd want to truncate the beginning of the years:

| ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |

Certainly not optimal, but it might placate the client until they agree to ditch the tabs.

Answer 10

You could also display the tabs that you think are going to be most frequently used (or up til the past 10 years). At the end, have a tab that says "Older" and that displays a list of the remaining older years when clicked, using JavaScript. This approach might not work so well if you eventually have so many older years to display that the list is really long. This also does not take into consideration what you would do for users without JS enabled.

Answer 11

Maybe the tabs aren't the best way to display them. But if you don't want to break the classic navigation, you should put 2 arrows, ones point to the left and the another one to the right.

Answer 12

Next tab, previous tab, next page of tabs, previous page of tabs, buttons are necessary, but not enough.
- Scrolling to a remote tab would be really annoying.

Try using hierarchical tabs - decade tab with year tabs inside.
Also, let user jump directly to the desired tab, by entering the year.

Answer 13

All those tabs also make it a very busy and noisy design. I also think that tabs are better suited to group different sets of data, not variations of the same.

I would suggest something like a drop-down with previous/next buttons on either side. Or a list in a sidebar or something.

Do you expect your users to browse through the years, just out of curiosity, or would they want to review the awards of a particular year? In the latter case, a text field would even be faster.