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.
Quoderat 
Tabs will die but probably evolve first. I don’t think tabs are the problem in this example. Have you done any user testing to find out why users are clicking on the “airport” tab??? Analytics is great to identify problems but doesn’t always explain the cause.
really cool site though. I’ll use it next time I fly.
Not much analysis here, mostly David’s gut response. The tabs should collect distinct *dimensions* of the selected entity’s attributes, or perhaps segregate the attributes of the various child objects that are related to the higher-level data entity being presented, with less “important” dimensions (or child objects) placed at the right end of the tabs list.
//Paul K. Sholar (Twitter @bkwdgreencomet)
Okay, a few things:
1. You use tabs and sidebar navigation as well here on your website. Comments?
2. I’m not understanding what your proposed solution is to tabbed navigation?
Check out http://www.amazon.com for how they’ve answered this question. It’s actually quite innovative.
Pingback: Megginson Technologies: Quoderat » Blog Archive » A farewell to tabs
Thanks to everyone for the comments.
Ed: Thanks for the nice comment about the site! To date, I haven’t done any user testing, because OurAirports has just been a hobby site for when my consulting work is slow (or when I want to procrastinate). I’m thinking of trying to grow it into something a bit bigger, though — if not a business, perhaps a sideline — so I’ve been investing a bit more time recently. As a non-designer (I’m a development/data guy), it’s been a challenge for me — it’s easy enough to learn the technical bits, like fluid CSS layouts, but hard to get my head into usability mode.
Paul: What you describe is fairly close to what is currently in place (least-used tabs are on the right, and each tab covers a different dimension of airport information), but it doesn’t seem to be serving well: I’ve ended up designing a site organized around my developer’s data-oriented perspective, rather than a user’s task-oriented perspective. People don’t visit sites looking for dimensions or other information-organization systems; they visit to accomplish tasks, as Hoekman hammers home in “Designing the Moment” (something I wish I’d read two years earlier).
Nathaniel: I don’t know what the best solution is for web sites in general, but for OurAirports, I’m planning to add a small box beside the map presenting the most probable tasks that a user would like to accomplish on each page, clearly described, with a link to a “More” popup (or something similar) giving the whole list. For an airport, wanting to see arrivals or departures is much more likely than wanting to see more technical information, and putting that all at the same level in tabs makes it harder for people to find the most important stuff.
* * *
In general, I’m coming to think that tabs are probably useful for web apps that are function like desktop apps, where people spend hours working every week (think Google apps or webmail) — people have time to learn those apps well, and will probably find the consistency of the same tabs on every page to be a benefit. For sites like mine, though, where most visitors stay only a few minutes, I think the information overload and confusion of a tabbed interface might outweigh any benefit. *I* find the tabs useful, and I’m sure a few of my power users do as well, but I wondering if that’s true of the majority of my visitors.
David, as I look at your example page, I notice something neither you nor the comments have mentioned so far. I can’t really tell that the other tabs refer to the same airport as the main tab does. In fact, my initial impression was mostly that they don’t. So I wouldn’t tend to click on them to get more info about a specific airport.
Yes, “Nearby Airports” does hint that it is related, but it doesn’t automatically suggest to me that every *other* tab is so related. I realize that it wouldn’t take much experience to realize that they are in fact related, but you are supposing that visitors are mostly unfamiliar with the site (have you been able to work out how many repeat vs new visitors you have been getting?)
Also, the inactive tabs fade into the background enough that I notice it takes me some noticeable effort to decipher them (I suppose it would be a bit easier on an actual page, which would be larger than this screen shot.
Perhaps these factors play a part.
Thanks, Tom — it never occurred to me that people would realize the tabs all referred to information about the airport. My site is arranged hierarchically, with breadcrumbs indicating the level (e.g. World->Continent->Country->Region->Airport) and tabs indicating the different dimensions at the current level, but once again, that’s a developer/data-management mindset, not a user mindset.
Pingback: Michael Gratton (mjog) 's status on Monday, 10-Aug-09 08:58:43 UTC - Identi.ca
I actually use tabs to refresh a tabbed page. Certainly, an airport information page can change by the second, so maybe others do what I do?
Hm, interesting. Our website also uses tabs – maybe something to think about. Anyway, your site seems like a great source of airport information so I’ll keep it in mind for the future. Thanks for this.