I’ve used tabbed layouts in web sites for a while without thinking much about it. I find them less obtrusive than menus, and have always believed that the idiom was familiar to nearly all users because of desktop applications. Here’s an example of the tabbed interface at OurAirports as of 5 August, 2009:

The “Airport” tab has bold text, and a white background that runs smoothly into the rest of the page, while the other tabs have a light-blue background, blue text, and a line at the bottom separating them from the page — that should make it obvious to everyone that “Airport” represents the current page, while the others represent alternative pages that you can view by clicking on them.
Right?
Err, maybe not. Even though it doesn’t look linky, the active tab is still, by a lucky coincidence, a link, so I was able to track it using the Google Analytics Site Overlay out-link tracker (note that it’s not actually a click tracker, even if it looks like one). I have over 40,000 airport pages like this, so I can’t check every one, but the few dozen I looked at all told the same, sad story…
People don’t get tabbed interfaces
On most airport pages, the majority of user clicks were on the active “Airport” tab. In other words, people go to the page, see the word “Airport” in bold in a prominent position, and click on it. They don’t notice that it’s the active tab — maybe they don’t know that it’s a tab at all. They just figure that it must have more information about the airport they’re looking at.
For example, on the Heathrow Airport page over the past month, Google Analytics tracked 17 outlinks to the same page (via the active “Airport” tab), 5 to airport arrivals, 4 to airport departures, and 0-2 for every other link.
Once they click on what I thought they’d recognize as the active airport tab, the same page just reloads. Blech. I assume that’s when they get sick of the site, and go back to their Google search results to find a better page about the airport.
Tabs encourage information clutter
So the tabbed interface just leads to confusion and frustration from many of the visitors to my web site. But there’s another problem evident from the the outlink stats: tabs encourage a designer to present too many options in too many contexts. The tabs are all visible on every page they cover, but most of the time, they represent information that the users don’t actually need, and there’s no clear visual cue that some of the tabs (e.g. arrivals and departures) are a lot more interesting than others (e.g. the airport page’s change history).
Here, for example, are the last month’s outlink counts for each of the tabs on the Myrtle Beach International Airport page:
| Tab |
# followed |
| Airport |
33 |
| Arrivals |
36 |
| Departures |
12 |
| Pilot info |
0 |
| Visitors |
4 |
| Nearby airports |
7 |
| Nearby members |
1 |
| Changes |
0 |
| Edit |
0 |
For reasons I don’t understand, this was the most-visited airport page on OurAirports last month, with 371 pageviews (300 uniques). It’s a little atypical, in that the active tab is not the most clicked (though it’s still unacceptably high), but otherwise, it shows the picture well. The “Pilot info” tab has existed for only a few days, so we can leave it out, but in general, it’s clear that the main thing accomplished by the tabs is showing a lot of links at the top of every page that no one actually wants to use. I suspect that even the four clicks on the “Visitors” tab were accidental — instead of trying to see what OurAirports members have visited the airport, people were probably just looking for visitor information.
How to redesign?
So if (a) tabs aren’t actually intuitive for most of my visitors, and (b) they fail to distinguish useful/popular information from more esoteric information, then they have to go. It’s going to take me a while to redesign the site, but what I think I’ll do is highlight the 3-5 most useful actions for each type of page in a side bar beside the map, like this:
Show me…
- arrivals or departures
- visitor comments
- pilot information
- nearby airports
- points of interest
- more…
A list like this, as opposed to tabs, provides a clear call to action for a page visitor, providing more detailed options in language that will make sense to them. It highlights useful information they might have missed in a tab (e.g. pilot info) or a section lower on the page (e.g. Visitor comments), and hides stuff they rarely need in a menu that appears only on demand, when they click “More…”.
Farewell, tabs. Even if you weren’t helpful, you were fun to design with CSS and rounded-corner images.