Mozilla Labs

Today we are featuring a Firefox extension that Justin Dolske just whipped up called Chromatabs. It colorizes each browser tab to provide a strong visual indication of which site is loaded. Here’s a screen shot of it in action:

Let’s first take at the fundamental principle of why colors are useful. In the image below, try to do these two things:

1) Find all the red letters

2) Find all the K’s

You likely found the first task an order of magnitude easier than the second task [1]. This is because of difference in the way our visual system processes color compared to the way that it processes shapes. You can view all of the red letters with a single glance, or even spot them with your peripheral vision. Finding all of the K’s requires a close visual scan.

What does this have to do with tabbed browsing? Well, tabs use the same two visual variables (color and shape) to differentiate themselves from each other. Favicons provide a small amount of color, and the title text of the page consists of a series of shapes. Unfortunately some sites don’t have a favicon, or the favicon they do have isn’t sufficiently unique. Without favicons, you have to do a visual scan to find the correct tab — you can’t spot it with your peripheral vision.

This problem has attracted some interest from the community already. Many of you may be familiar with the popular Firefox extension Colorful Tabs. Its solution is to simply assign each new tab a color from a fixed list, in sequence. First example, the first tab will be blue, the second is yellow and the third green. The tab remains that color until it is closed. Each time you browse the web, you’ll have to remember what a particular color means at the moment:

Chromatabs’ approach to coloring tabs is different. Instead of assigning an essentially-random color to a tab when it is opened, a color is derived from the site currently loaded in the tab. For instance, this means that blog.mozilla.com will always be red, and engadget.com will always be purple:

So, how does it do that? Well… It takes the hostname from the URL, converts it to a number via a simple hash function, and then uses the number as a hue in HSL colorspace to obtain a final color. Justin has a blog entry discussing this and other technical details of Chromatabs’ operation in greater detail.

By keeping each site’s tab color consistent, the user can build up a mental model of what colors are associated with their favorite sites.

Future Work

Chromatabs was built as an experiment to test a concept. There are a number of directions someone could take this prototype to improve it and try new ideas. Here’s a few possibilities that might be interesting:

• It might be more intuitive if Chromatabs analyzed each page to determine the most prominent color on the page, and then used that color for the tab. You would then see Slashdot tabs in their distinctive green, Fark tabs in purple, and Zombo.com tabs in, uhhh… oooooo….
• Unfortunately not everyone likes rainbows and unicorns. In the process of converting a domain name into a RGB value, perhaps Chromatabs should also base the color on an aesthetically pleasing color pallet. Does anyone know a good algorithm to create beautiful color pallets?
• A similar problem area is coloring groups of tabs. Here the focus would be on coloring groups of tabs in a unique color, which could be ephemeral and not based on the site’s address.
• Give the user greater control over their browsing experience by allowing them to customize the color for a site. This might have some anti-phishing benefits as well (for example, expecting your bank’s web site to have the bright green color you assigned to it).

The Chromatabs extension is open source, so it’s a good starting point for anyone wanting to try out their own variation.

Discussion Topics

• What if instead of just providing a favicon.ico, Web designers were able to design the surface of the tab?
• What other ways could the browser provide a richer and more dynamic tabbed interface? For instance, Aging Tabs is really creative, bringing temporal information into the mix.

[1] From an HCI lecture (PDF) by professor Rob Miller

Apologies for the radio silence on this blog - we’ve been busy getting Firefox 2 out the door. Now that that’s done, we’ll be introducing some new additions to Mozilla Labs.

First, I’d like to introduce a new member of the virtual Mozilla Labs team, Alex Faaborg. He joined Mozilla about a month ago as a User Experience Designer and has been contributing to the interface design and direction of Firefox 3. Alex comes to Mozilla from the MIT Media Lab and has a ton of great ideas that you will see in the months to come. He will be contributing to this blog and you can follow his latest thoughts on his blog about user experience design at Mozilla.

Second, we’ll be starting a new feature on the Mozilla Labs blog with guest authors. These are Mozilla community members, academic researchers, developers from industry and others who have designed or developed new ideas around web technologies and Firefox. Some authors will have wacky ideas, others on target. Our goal is to stimulate discussion, highlight different concepts that are driving innovation on the Web forward, and in some cases showcase tech that you can try out or experiment with.

So stay tuned.