Design vs Art Blog » Tabs

Safari 4 and a New Tabs Redesign

Alexis Brion — Wed, 25 Feb 2009 16:08:41 +0000

Safari 4 Beta was released on February 24, 2009, with a huge amount of improvements (they really had a lot to fix). I have been following the web browser interfaces for some time but I would specially like to point out the use of tabs.

In June 2008 Firefox 3 was released and with it a step back on design was achieved. Mozilla copied Safari’s interface without even analyzing if that UI design was the best one. (I wrote a full article about Firefox 3 and tabs).

Firefox 3 interface mimicking Safari 3, tabs are not attached to pages, they are "hanging" from bookmarks.

On the other side, Apple recently noticed that the best and logical way to handle tabs is to place them on top of the window, attaching them to pages.

Safari 4

It’s true that most users will need to get used to this change on tabs design but at the end this is the most logical solution. There is a good reason for this…

User comment about Safari 4 and tabs.

Attaching tabs to pages is a very old idea coming from the real (material) world, this is a very successful and simple design that people understand. So why not following user’s mental models?

Picture by Takashi

Firefox 3: Why Tabs Are Upside Down?

Alexis Brion — Tue, 17 Jun 2008 16:11:43 +0000

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…

Picture by Takashi

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…

Tab Rows, Good Example

Alexis Brion — Sat, 29 Dec 2007 14:43:32 +0000

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.

Tabs Bad Design: Yahoo! Shopping

Alexis Brion — Tue, 27 Nov 2007 06:17:09 +0000

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.

Orientate Users Adding Tabs To Your Interface

Alexis Brion — Mon, 19 Nov 2007 06:15:33 +0000

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.