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.

Soutor

"having only one object in one tab visible at a time simplifies things quite a bit." ... does this simplify things for the users, or the developers? – Clarey

As it turns out, both. With only one object visible there's no ambiguity as to which object is the target of the menu choices. Drag-and-drop between objects is a little more difficult, though, but it seems we can do this by dragging from the visible object to the tab of the target object. – Soutor

Answer 1

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.

Stapleton

Answer 2

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.

Jugglery

+1 As soon as I read this question I was going to write up something about Don't Make Me Think – Jaunita

Answer 3

I think as long as the tabs are visible as such it's understandable by the user. I have seen websites where they present a vertical bar with links that act like tabs but it's not immediately visible to the user and found that very confusing.

Wold

Answer 4

I would have to disagree with those are in favor of tabs. In a design test we did for a fairly high-traffic website (over 1mil uniques at the time), we found that tabs have not been used. Tabs were clearly marked, located to the right of the main content area. Based on that experience I would suggest either finding an alternative or, as staticscan suggested run usability tests to figure out which ones work.

Tripper

How long ago was this? I noticed that both Twitter and Facebook use tabs today. Twitter has vertical tabs and Facebook has them in the profile as a tabbed dialog. Twitter might be questionable (early adopters are not novices) but Facebook is sensitive to the tech-phobe, adult user demographic. – Soutor

David: it was about 2 months ago. I agree that Facebook is sensitive. But I also bet they have done extensive testing to find the optimal solution. If you can do something similar, but all means go for it. But if that's not possible at the moment, I'd suggest to play it safe. – Tripper

Thanks, MK_Dev. We're building a UI prototype now and will run it by our test group. – Soutor

Answer 5

Don't think you can decide a-priori what is usable and what isn't. Do usability testing

"It takes only five users to uncover 80 percent of high-level usability problems" Jakob Nielsen

Google usability testing and start learning. It's not hard.

Wanyen

We're doing usability testing now and learning that it's too difficult to use in its current design. The tabbed interface has the potential to simplify it (as long as tabbed interfaces are not inherently confusing to novice users.) – Soutor

Answer 6

I tend to agree with lothar and ricebowl - people seem pretty familiar with it these days. The most important thing with any GUI element is clarity - the user must innately know what will happen when they press something (they know that clicking an inactive tab will make it active); and in navigation - it must be very clear exactly which tab they are currently on. As lothar said, if it's not immediately visible to the user, it's very confusing. If you address those issues, then it should be fine.

Yoke

Answer 7

Just wanted to note SmashingMagazine has a new article showcasing tabs: Showcase of Tabs

Esquiline

Answer 8

I think people are used to the metaphor (from binders, or card-indexes and so forth) of tabs. Especially those that use the web for any length of time. I think that, if IE's adopted a metaphor, it implies a common familiarity with that metaphor.

So, no, I'd suggest that they're not confusing and suggest that you go for it. Just, maybe, post a welcome/first-time introduction (or a prominent 'help' link to such an intro) to the use of the tabs.

Orpington

Answer 9

I've been a developer for an intranet app that used a tabbed interface, generated with HTML and controlled by JavaScript. This was way before IE7 and Firefox. In fact, it was a bit of a novelty on websites in general, too.

Fortunately, a previous developer had discovered that if you made it look like a dialog box - even down to using a grey background, then people usually understood the metaphor. We also loaded all the content for all the tabs in the initial page-load, and had the Save/Cancel buttons outside the tabbed structure. Because of this, most people immediately understood that they could move between tabs (we used JavaScript to hide and show the DIVs) and a Save would save changes to all of them.

If you want to deviate from such an obvious metaphor, then you need to do some usability studies.

Hepcat

Answer 10

A well implemented Tab interface should not confuse users.

In line with what others have said one of the most ipmortant things to consider with Tabs, or any other navigation interface is for it to be obvious where they currently are in the navigation scheme.

Another important point is not to break the browser! Many AJAX or javascript implemtations break the back button. This is a minor annoyance to some and a major inconvieniece to others. Make sure to consider your target audience here.

Personaly I prefer the oldschool method of not preloading all of the tabs but having each tab as its own page and using a templating methodology to manage the navigation interface, be it tabbled or otherwise. This maintains the browser history and works fine with or without javascipt.

Rend

Answer 11

Tabs, etc are just tools. How we decide to lay them out and use them is what determines their effectiveness.

What I try to keep in mind is:

1) Keep it close. The things we use the most should be on the front or up close to the top as much as possible and bury the rest based on how often they are used/adjusted.

2) Easy enough for Mom to use. All interfaces are confusing if they are not laid out in a clear and logical manner.

3) Organize how it's used, not how you think it makes sense.* I often use tabs to break up steps in a process, or to break up areas such as basic / advanced options. I group them based on similarity or usage depending on what works better

4) Keep them few Either way I try to stay below the 7-10 range tops as the human brain has a hard time jumping beyond 7-10 digits, so I assume the same for pieces of information. Vertical Accordians might be something you want to look into as well.

I have also embedded tabs within tabs before. Works well but only one layer deep most of the time.

Width