Installing the new Firefox 3 was an easy task. The browser seems to work, on a Mac, better than the previous version. Although that, Firefox still has some usability issues. I don’t want to make a complete review but I would like to highlight the first issue I noticed: using the default skin, the tabs are upside down and not linked to the page they refer.

Tabs should be attached to pages. This is not a new idea, as you can see on the picture tabs has been used in this way for ages. When I have doubts about a new design I tend to look for ideas in the real world…

The Firefox 3 Approach

I think that Mozilla was just trying to copy the Apple Safari look without thinking if the Apple solution was perfect. In my opinion this tab design is not going to be a problem at all for old users. On the other side it could be troublesome for inexperienced ones: They just don’t notice that those are tabs.

Tabs are hanging from the Bookmarks Toolbar:

Changing tabs:

Tabs should be linked to the page, not to the menu. A simple mental model…

Using tabs is sometimes a very good option for a wed design. Visitors use them to navigate the site and to know where they are.

The JCPenney tab rows are 100% fine. They use a different color for the selected tab, but this color is similar to the one used for the unselected tabs. From the usability point of view, I can imagine that this could affect visually impaired and color blinded people.

Giving users a graphical and shaped sign could be much better for everybody. The MySQL website not only uses a different color for the selected tab but also makes a connection to the menu line below, creating a much obvious and nicer visual effect.

A horrible example of tabs design can be found at Yahoo! Shopping. It’s weird to see these kind of things at Yahoo! but it’s true.

Here you can see two tabs highlighted at the same time. If you don’t want to confuse your users please don’t do this.

Clicking on “Holiday Gifts” the tab labels change, “More” disappear. Another usability problem I find is that they use so many words written in capitals everywhere on the site. Without doubt words written in capitals are harder to read. Plus, “SHOP FOR” is highlighted, it just looks horrible.

.

Tabs are use as navigation help for users, they are a resource to orientate them. Tabs are usually easy to integrate to every interface design but not everybody does it right.

PollDaddy, an online surveys and polls creation tool, uses tabs implemented correctly. The active tab seems to be closer to the user, the deactivated ones are shadowed in the back.

On the other hand, IDrive-E, an online backup system, is not using tabs at all. In the example, you can see how difficult is to see in which section of the website you are. OK, they write the title on the top of the page (e.g. Download) but the word is not even marked with a different color, this is a usability problem that might confuse users. Sorry, I don’t like it.

.

Disclaimer: with this kind of article I want to point out usability and interface problems some sites could have. Please do not take this as an attack, take it as a free advice. I would like to make clear that this design problems could happen for many reasons, including lack of time or money.