Are tabbed interfaces confusing?

Question

We are designing a web site and have run into some UI challenges that would be neatly solved with a tabbed interface. Users will interact with different elements of the site (there are some basic view/edit/copy/paste functions available) and having only one object in one tab visible at a time simplifies things quite a bit.

We are, of course, completely comfortable with tabbed interfaces but what about novice users? I've searched the web for guidance and I haven't found anything definitive. Do you have experience presenting a tabbed interface to novice users and did they have trouble with it? Or, have we reached the point where everyone is comfortable with tabs and we can use them without reservation?

Usability is important-- more so for this project than most. If naive users are confused by a tabbed interface it just won't work and we'll have to find another way.

Answer 1

In his excellent book "Don't Make Me Think" (Sensible.com), Steve Krug discusses the benefits of using a tabbed interface:

• They're self evident
• They're hard to miss
• They're slick
• They suggest a physical space

He goes on to describe the keys to successful tabs as demonstrated by Amazon.com:

• They were drawn correctly
• They were color coded
• There was a tab selected when you enter the site.

Obviously, he provides details to each of these bullet items in the book (I won't plagerize him here). The book is definitely worth a look if you want guidelines for creating web sites for novices and experts alike.

Answer 2

Tabs are becoming common place enough that I wouldn't worry about using them, as long as you implement them correctly. Make sure that you make the active tab visually distinct from the other tabs.

Also, try to create the tabs using progressive enhancement so that the content is still there with JavaScript disabled. There are two main ways of doing this:

1. Load every tab but the first using
   AJAX. The tabs themselves should be links to the content that the AJAX
   fetches.
2. Keep all of your information on the page, but hide it using JavaScript. When you cycle through the tabs, they are populated from the hidden parts of the page.

A design resource you might find helpful is the YUI Design Pattern Library and their section on tabs.