The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!

Usability Spotter #4: A Usability issue- Google Chrome Tab selection through the mouse

Summary
In the Google Chrome browser, once the default width of open tabs exceeds the width of the tab bar, tab width continually reduces with every further tab opened.

This makes it tougher for the user to select an inactive tab using the mouse without accidentally clicking on the close button instead (which resides within the tab of continually reducing width).

This usability issue that comes into play with an increase in browser tabs can be eliminated through a simple solution.

What’s the issue?

In Google Chrome, the width of the tab begins to continually reduce once the combined default width of tabs exceeds the width of the tab bar.

This basically means that after a certain number of tabs are opened by the user to view web pages, in order to accommodate all the tabs in the tab bar, the width of the tabs begin to reduce. More the tabs opened, lesser the width of the tab.

Default Tab width in Chrome

Default tab width in the Chrome browser

The default width of the tab is around 208 pixels. The close button occupies 12 pixels of width on mouse over (when the mouse is placed above it). Here it occupies approximately 1/17th of the tab width when the tab width.

Reducing Tab width

Tab width reduced when the width of combined tabs exceeds width of the tab bar in Google Chrome
At a resolution of 1280×800, the combined width of the tabs at their default width exceeds the width of the tab bar, the tab width noticeably begins to reduce once more than 6 tabs are open.

The image above shows that the width of the tab has reduced to 176 pixels (from it’s default width of 208 pixels) when 7 tabs are open.

Reduced tab width increases error rate

Close icon width 1/7 th the width of tab width making it easy to mistakenly close the tab instead of selecting it
The above image shows further reduced tab width when 17 tabs are open (at a resolution of 1280 x 800).

With the width of the tab reducing, the chances of the user closing an inactive tab instead of selecting it keep increasing. This is because the width occupied by the close button of the tab stays constant though the width of the tab continues to decrease

The width of the tab is now around 80 pixels wide. The close button now occupies approximately 1/7th of the tab width as compared to 1/17th it did earlier- increasing possibility of error in inactive tab selection through the mouse.

What’s the solution?

A solution within the existing implementation of tabs

Solution to the tab chrome issue- remove the close icon from tabs beyond a minimum width to remove possibility of accidental closure of the tab while trying to select it

A solution as simple as it is effective is- Do not display the close button on inactive tabs beyond a certain width. Rather, display the close button only on the selected tab. This eliminates the very possibility of the user accidentally closing the inactive tab with the mouse instead of selecting it.

An alternate solution- Implementing for scalability and a good user experience

While the above solution addresses the issue effectively, tabs in Google Chrome don’t address scalability very well. A good example of tab implementation that addresses scalability can be seen in Firefox.

A tab at its default tab widht in the Firefox browser

A tab of reduced width in the Firefox browser
When the combined default width of the tabs exceeds the width of the tab bar, the tab width decreases to a certain width.

Tab width at its minimum in the Firefox browser

After that certain minimum width is reached, the tabs don’t become any lesser in width. Instead two arrows appear at both ends of the tab bar that can be used to navigate through the tabs. The other tab navigation option is to use the dropdown located at the right end of the tab bar that appears immediately and stays once at least two tabs are open.

If you put your mouse on the tab bar, you can use the scroll wheel to shuffle through the tabs quickly. A minimum width also makes it easy for the user to read a portion of the web page title in the tab, unlike Chrome, where this facility begins to wane with an increase in number of tabs are opened.

Your Thoughts

What are your thoughts about tabbing in Chrome? How does it compare to tabbing in Firefox, or any other browser for that matter?

  • Hi Cone Trees, was wondering if you are aware of the Delhi NCR IndiBlogger Meet 2009 scheduled for the 4th of April. Would be great if you can make it and blog about the event too.

    Please send in your ideas for the agenda in the comments section.

    RSVP – http://www.indiblogger.in/bloggermeet.php?id=33

    Cheers,
    Anwin
    IndiBlogger.in

  • Andreas T

    I think the close button should remain but at the same time I also think that one should be able to define a minimum tab width and configure when and if one wants to display a tab close button.

    I also think there should be an option for a static “close current” tab button, i.e., one that sits in one place and doesn’t move about. This makes it much easier to rapidly close several tabs in succession without miss-clicking.

    I am also a strong believer that we need a horizontal scrollbar for the tabs as it is MUCH quicker to navigate to specific locations using a bar than some buttons or even the mouse wheel. However, I also think we need buttons and mouse wheel support.

    However, saying this, all these things should be user-configurable as should the placement and focus of new tabs as well as which tab gets the focus after a tab is closed plus what happens when the last tab is closed.

    Also, talking about tab management, I think one should be able to multi-select tabs (perhaps using a check-box), and/or tag tabs, then call an operation on checked tabs or unchecked tabs (or a specific tag). With operation I means things like print selected tabs, close selected tabs, move selected tabs, save media from selected tabs, etc., etc.

    In my opinion Google Chrome has far to go before its tab management becomes usable. This is the main reason why I chose Firefox with Tab Mix Plus, but even this doesn’t full-fill all my requirements of a great tab manager.

    Oh, and another reason I find it difficult to leave Firefox: I can use an extension like BetterCache to control the cache management and stop media from expiring too soon and forcing unnecessary reloads. However, in saying this, Google Chrome extensions appear more polished and some are even better than Firefox equivalents.