User Centered

For the pedants...

There is a lot of discussion going around about the revamped, version 2.0 Firefox UI. One thing I noted repeatedly on Asa’s request for feedback was FF users discussing the way active/inactive tabs are shown. The words “washed out” was used more than once in regards to the inactive tabs, here's one quote:

Originally posted by Nick Fagerlund:

Backgrounded tabs are incredibly washed out, and I can't read the text. And yet, it's STILL hard to tell which one is foregrounded, because the black text and saturated icon are the only visible differences. (Black outline? Shadow? It needs something.)

I've always wondered as Nick does, should the default skins have more contrast amongst the tabs? Obviously, the UI needs to visually indicate which tab is active, but there never seems to be much discussion on how that’s done, or to what extent it needs to be differentiated. I believe there’s room for improvement (...and so do many skin designers).


Here’s the existing default Firefox tab setup. It’s got the yellow underline with would draw your eye to it, but I don’t think it’s too much better. Although, at least you can easily read the inactive tabs (a complaint against the new default theme)


Opera on the other hand has easy to read tabs, and the contrast is a little better. Visually, we're trading the "orange stripe" for a darker tab color, a similar approach to how FF2 differentiates. But I’ve also found it confusing because it changes to font/text color on inactive tabs to blue if the tab hasn’t been viewed (since refreshed). Visually, it adds some weight to the tab and, even though it’s inactive, tends to make it stand out a bit more on equal footing with the active tab. Huh? make no sense? ...in the screenshot above, the tab on the left is active, the middle tab is inactive, and the tab on the right is inactive, but has been refreshed in the background... meaning the user hasn't seen the "fresh" version of this page. You can tell this by the different color font used (blue).

Well, the good thing about all this, Firefox or Opera, is that you can change things you don’t like if you have the time, skill and energy. With that in mind, I edited my own skin a while back to increase the contrast (download it -it's the standard skin except the tabs) I use a lot of tabs- always have at least 7-10 tabs open regularly- this skin lets my eye easily select the active tab even in the peripheral of my field of vision. I even throw in some of that "Firefox orange stripe" in the active tab as it makes a nice contrasting color for the blue.

There are of course, many skins that do this already. But well.. I'm a simple man, with simple needs. I like the default skin just fine

[moderator note] I'm not sure if this screenshot of my tabs shows problems with Eddie's skin, or Opera's handling of font sizes, but it is an example of the difficulty we encounter when we design customizable software, but then fail to think through all the possible ways a user will be able to customize. (Two settings that apply: Toolbar font-Tahoma 16pt, Toolbar style-"Images and text below")