Chromatabs followup

I’ve received quite a few useful comments from last week’s posting of Chromatabs, and I thought it might be nice to summarize some of it. Personally, I’m satisfied — though not thrilled — with the extension. The idea has merit, but the implementation exposed some issues… Which is exactly what it was supposed to do, as a labs.mozilla.org prototype! Here’s some of the common comments:


What’s this thing do?

This was a little surprising to hear at first, but it makes sense. Even though we’re just coloring tabs, unless you already know what’s going on it probably seems like the tabs are being randomly colored. This would be a significant issue if this was a default feature that shipped with Firefox. [As an extension, probably not so much.]

It’s hard to determine which tab is active.

I think this originates with the default theme itself, in that it can be hard to find the active tab even when they’re not colored. However, colorizing the tabs clearly makes things worse. You have to pick out somewhat-subtle brightness differences between different colors, and the myriad of colors is visually distracting.

I had been thinking that simply changing the tab’s luminance would be enough to make it look active, but I don’t think that’s enough. Some other cue needs to be provided. Maybe add a border, or design a stronger 3D look? The difference in luminance could be increased, but then tabs would seem to change color when they become active.

The colors of site X and site Y are too similar.

The extension generates hundreds of different colors, but the reality is that anything more than, say, a couple dozen is going to be too subtle. You can usually see the difference with close inspection, but at a glance the hues can look the same.

Is there a good solution to this? I’m not sure, but trying to give millions of web sites unique and differentiable colors doesn’t seem like the way to do it… A tweak that might help is to only color a tab when a site is open in at least one other tab. But I think this would probably end up being confusing to some users, and it still doesn’t address the problem of two sites having nearly identical colors. [Well, it might help a little in that you wouldn't see the problem as often -- on average -- until you open 2 tabs for each site.]

Future directions…

Instead, for future work, a cleaner problem to tackle might be to give groups of tabs (eg, those showing same site) a unique color. The color wouldn’t be persistent, so the same group might get a different color the next time you open them. The point is that you could always pick a unique new color up until you have a few dozen tabs open. And even then, you could still distinguish groups spatially (“the red group on the left is Yahoo tabs, and the red group waaaaaaaaay on the right is Google tabs”).

I think this is actually closer to the original problem I wanted to solve, which was having a bunch of Bugzilla and LXR tabs open… I want to tell the difference between the two, but don’t really care what the exact color is.

This would also be an opportunity to use a color palette that’s more esthetically pleasing than random colors.

Other suggestions for Chromatabs included making it work with Tab Mix Plus, choosing the color from the favicon, and coloring the menu entries for bookmarks, history, and the tab list. Using Munsell palettes also seems like a great idea.
Other extensions

We mentioned the first two of these in the original labs.mozilla.org post, and readers brought the last two to our attention:

About Justin Dolske

Mostly harmless.
This entry was posted in Mozilla Labs, PlanetMozilla. Bookmark the permalink.

9 Responses to Chromatabs followup

  1. Håkan says:

    One way to solve the “Difficult to see which tab is active”-problem might be to give it some kind of shadow maybe?

  2. Ian says:

    How about colouring the tabs only if there is no favicon? (and providing different favicons for the Mozilla sites which needs to be done anyway)

  3. greggles says:

    Thanks for pointing out all of these great tabs.

    It’s funny to me that the blog of a usability guy has gray on white for the text of the body. Could you make the content the nice dark blue and the titles and such the gray? It would be much easier to read :)

  4. It really is hard to tell which tab is active. Also, I thought Chromatabs was supposed to take the most prominent color from a web page and use that for the tab color. Digg would be blue or yellow, for example. The color assignments seem random.

  5. Justin says:

    Håkan: Yeah, a drop shadow would help… Although I don’t know if it would be enough, since the shadow would only show up on one side of the tab. You’d probably want to add space around the tab too, which might be hard with the current code (although that idea has been suggested as part of tab-grouping, so it might need to be supported anyway)… So, who wants to Photoshop up a UI mockup? ;-)

    greggles: Yeah, the current WordPress theme is just one of the less-sucky ones available on this install. This is still basically a new server, and refining the themes is still something we need to do.

  6. Santiago Roza says:

    I really like the idea, but I don’t think it will have much use until the colors are visually related to the site, as suggested in previous posts (Slashdot = green, Mozilla = red, etc).

    The color combinations could be derived from many methods:
    – the site’s HTML / CSS / whatever.
    – the site’s banner logo and/or favicon (analyzing this could be tricky I guess).
    – a hardcoded list included in the extension, with contributions from users (which would be the most accurate way IMHO).

    Another suggestions for improving the extension could be:
    – add support for more than one color, like PageStyle2Tab, which would be great for sites like BBC News (reddish / blue), Amazon (orange / blue) or ESPN (red / grey):
    https://addons.mozilla.org/firefox/1523/previews/
    – add support for Aging-Tabs-like behaviour, for marking differences between tabs from the same site:
    https://addons.mozilla.org/firefox/3542/previews/
    – add support for “colored icons”, not just colored tabs, for a more subtle approach, like HashColouredTabs:
    https://addons.mozilla.org/firefox/437/previews/

    BTW, I don’t think you’ll find many solutions to the “tabs look too similar” problem… there’s a limited palette which we can differentiate easily, and you won’t be able to change that.

    But you could improve things significantly, by adding the two-color support and Aging-Tabs-like support suggested earlier, and maybe an optional feature for moving tabs apart from each other, when they have a similar color (like you said: all Google tabs to the right, all Yahoo tabs to the left, etc).

    In order to mark which tab is active, wouldn’t it be enough to just make its title bold?

  7. Sam Hayes says:

    Very odd. I love this extension…it makes my tabs exceedingly more readable than they were before. But I had to quit using it. I started having trouble with page scrolling. I spin my mouse wheel, there is a two second pause, and then the page scrolls. So I started disabling/uninstalling extensions. I never would have guessed it, but the culprit was Chromatabs! Once I removed Chromatabs, no more scrolling problems. Hmmmm?

  8. Christopher Galpin says:

    HashColouredTabs (and now HashColouredTabs+) has always been a favorite extension of mine, but I wasn’t completely satisfied that my tabs were well enough differentiated. And then I found ChromaTabs, which is very excellent – thank you!

    The comment in your previous entry about Tab Mix Plus compatibility does indeed work, and is mentioned here: http://tmp.garyr.net/forum/viewtopic.php?t=4223
    It’s a rather elementary change that actually breaks ChromaTabs from working stand-alone if used exactly as given.

    My only problem with CT now is that too many site colors do indeed look the same. Munsell palettes, also, certainly sounds worthy of implementation, and in any sort of code dealing with perceptual separation by color. I bookmarked it. :)

    Now if only this “Tab Sidebar 2″ that’s in the works (http://www.oxymoronical.com/web/firefox/TabSidebar) would be finished… and if the colorization applied there too… hmm. Well to avoid getting overly complicated: It would be excellent to bring more organization to Firefox tabs. These different colors in ChromaTabs help me see the similar sites easier, but it doesn’t do anything like automatically keep them side-by-side.

    It would be very useful to be able to sort tabs by domain name. With the release of this Tab Sidebar 2 in combination with HashColouredTabs (which I would *hope* would apply to the sidebar) I could at least do some quick and easy dragging and dropping to get things better organized… and I’ll dream of a “Sort By”… ;)

    Just some input and a thank you.

Comments are closed.