Category Archives: Tabs

Safari 4 and a New Tabs Redesign

Posted on by
3

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.

Firefox Tabs Design

 

 

 
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

Tabs on Safari

 

 

 
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?

Posted on by
9

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…

 

Files with tabs

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:

 Firefox 3 Tabs A

 

Changing tabs:

Firefox 3 Tabs Example

 

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

Firefox 3 Tabs Example B

 

Tab Rows, Good Example

Posted on by
1

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.

JCPenney 20071229

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.

MySQL 20071229

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.