Writing for the Tabbed UI

Tabbed UI widgets used to be confined to interface atrocities on the desktop. Since then, designers using CSS reasoned what’s badly done on the desktop can be just as badly done for written content on web sites.

Using tabs for content can always be done in a right way or a wrong way. When you don’t consider something can be done wrong, you practically insure they will be done wrong.

Common. Neat. Wrong.

The User Interface Hall of Shame discusses proper interaction design theory for dialog boxes. Nothing really addresses the current practice of using tabs for written content – much less writing with a tabbed interface in mind.

The results is a triumph of because we can over because we should. Common. Neat. And wrong.

Problems start when the top or leftmost tab is information poor. Users who don’t get the proper informatgion they expect on the first tab correctly reason the other tabs are equally uninformative. Use the first tab for confirmation the user has arrived at the right site first. Then provide a complete overview on that very first page – do not send users on a scavenger hunt just to get a basic overview.

Think facets not fragments

Tabs are not shot gun pellets fired off in the futile hope you’ll hit a user. Any user will do. That’s refusal to do basic research into who is using they site or why.

Instead use one central coordinating idea, then show different facets of that core “theme.” For example your business consultancy can write about balance: What in business is out of balance; Who you are gives you a unique insight into the problem of balance, How you use the balanced scorecard to restore balance.

Even a contact form page can summarize what the client can expect when they respond.

Do not use a tabbed interface to display name, rank, and serial number, like a prisoner under interrogation. People do not want to go on a scavenger hunt to get a complete picture, so don’t fragment your message simply because the cool layout has tabs.


Interface Hall of Shame

  • Tabbed Dialogs -
    The site is practically unknown because UI design on the web simply has no shame.
Off Topic:

Why do you carry all these links in your signature when they only result in: moved or forbidden?

Data center change a little over a month ago causes links with www to 403. Now corrected.

However, forbidding does seem attractive given the state of the web. If only there were a timed 403 until the web catches up to where it should be – perhaps around the twenty-third century.

We might not have starships by then (I’d guess we’d be coming out of a third dark ages period by about then). But at least someone will have figured out pictures and text on the same page can refer to each other.

And then the internet, back to about the same level of tech as we have now, will declare they invented text that refers to the graphic used on the page.

Good :slight_smile:

Haha, I rather liken the web and all that makes it to plumbing. There the development has been in bits and pieces to end up incoherent and in patches. Try to convince a plumber that the valve he has just installed is not the same style as the rest of it: “Sir, it functions great, does it not?” So yes, visuals are treated as unnecessary ornaments only. There is no way to convince the plumber that how it looks and visually functions is of importance.

There is also the tendency to confuse functional graphic with art, it is all sort of tossed together into the same box.

But non of it really upsets me. The technology is very much at the beginning of a long period of evolution and I actually marvel at how well it already functions for such a hodge podge, that includes the bloated tab browsing. Customers will find what they can live with and leave the stuff that is not appealing and only confusing.

And just like in the evolution of nature and its creatures, the weak will fall away to be replaced by the strong. It will take some time, but eventually it will sort itself out.

And just like in the evolution of nature and its creatures, the weak will fall away to be replaced by the strong.

That’s a common misconception based on the interpretation “survival of the fittest” as meaning strongest. Not necessarily an accurate interpretation.

A better way to say it would be survival of the best-fitted (to your ecosystem). Strong in this context might mean a close fit to a ecological niche. But that would differ from common understanding.

To roundabout lead this back on topic, we can say each tab should be a strong fit to a specific user. Information foragers are usually looking for specifics.


Information Foraging theory. Most people are more knowledgeable about the bird feed mix designed for a specific bird they want to attract to their back yard than they are information foraging for humans.

Myths of Evolution (3): Only the Strong Survive

Actually this is what I meant to say: The most fitting or best adapted will win in the end :slight_smile: I agree with you.

Right, but look at the general searcher. Is he all that specific in his search and does he know what to actually ask for?

I sell hand painted silk scarves on the web. The search terms that people use to arrive at my site are mind boggling at times. like:

  • Gift for my wife
  • To go with her eyes
  • What would a secretary like

And so on. But that is what has to be taken into consideration here, the inaptness of the searcher. There are many dim bulbs out there.

There’s one thing I don’t like about tabs at the moment. While search engines may be getting better at reading things like AJAX in order to find content in tabs, browsers don’t seem to be keeping up as far as CTRL+F is concerned.

I might find what I’m looking for in a search engine, but when I use CTRL+F to jump right to where I want to go when the page loads, sometimes the search will tell me it can’t find what I’m looking for.

At this point if the tabs are obvious and I’m thinking clearly, I might jump through the tabs and see if what I’m looking for is under any of them. Otherwise, I just assume the page has changed between the time it was crawled by a search engine and now, which makes be hit the back button to go to other search results.