IE8 Tab Grouping

Hi, my name is Helen Drislane, I am a program manager on the IE team responsible for some of the user interface including tabs and I‘m going to discuss the new Tab Grouping feature (tab color!) with you. We had a lot of fun putting this feature together, so I am going to explain a little bit about the process involved in designing it and then describe the things you can do with it.

EVOLUTION OF THE DESIGN AND ALGORITHM

After shipping Internet Explorer 7, the IE team collected data from user reviews, from IE Feedback on MS Connect, and from other Microsoft product teams. We formed a list of top user requests which included the new Reopen Closed Tab feature, the new tab Crash Recovery feature, work to ensure that a bad tab would not hang the other tabs, the new Duplicate Tab feature, and many others. That list also included the following two observations:

[*]Today, a tab that is opened from another tab is always put at the end of the tab row. Since it is related to the first tab, it is odd that one has to go searching all the way at the end of the tabs to find it.[*]When a tab is closed, the next tab given focus is always the one to the right (it has no relation to the tab just closed). Users found this to be odd.

Based on this feedback, we decided to rework the tab open algorithm so a link opened in a new tab, open a new tab adjacent to the original tab and not at the end of the tab row. Here’s a picture to explain where the link on the page opens in IE7 and where it opens with IE8:

The result is the following:

Based on the above feedback, we similarly reworked the tab close algorithm so that tab selection is not always placed to the right when a tab is closed, but it is placed on a tab related to the recently closed tab, to get the following behavior:

In addition to listening to different IE Feedback channels, we worked with user researchers here at Microsoft to hold Usability Studies in which users came in, browsed the web, and explained why and how they were accomplishing their browsing tasks.

During these usability studies, we found a few interesting trends:

[*]Users queue up a set of tabs. In other words, users will search for something and open up a handful of the search results to read later. This trend also happens with online news sites users queue up a set of articles they’d like to read later.[*]Users use one window to handle multiple tasks (i.e. I have 4 tabs open on work-related sites, 3 tabs for news articles I want to read later, and 3 tabs for restaurants I’d like to take my mother to when she visits)[*]After switching from another application, users frequently spend a lot of time looking for a specific tab

In the trends described above, the related tabs (whether they are search results or news articles opened from the same website) would ideally not only be placed adjacent to one another but would also have some visual indication of being grouped together so that different tasks could be more easily identifiable. This is when colors came in to play.

The idea behind tab grouping is that tabs originating from the same source are grouped together. The image below shows MSNBC with two articles from it opened in green, and a Windows Live search on Seattle restaurants with two search results from it opened in blue:

Now with visual indicators on my tabs, I can quickly identify the groups of tabs that are related to different tasks. So if I am switching back to Internet Explorer after using another application, I will quickly identify the blue-colored tabs as information related to the hunt for a good restaurant.

Another important aspect of designing this feature was deciding upon the visual indicators for groups. A common question we get is “How do color blind users use tab grouping?†We made sure to include these users in our design. The difference between the colors below is great enough that many color blind users can differentiate between the different groups:

In addition, for users who have a screen reader running, we include names of the tab groups (i.e. Tab Group 1, Tab Group 2) on each of the tabs after the title. The picture below shows the two tab groups and the tooltip on the fourth tab containing the tab group information:

Now that you know a little bit about the design of tab groups, I will explain how tab groups are created and what you can do with them.

HOW IS A TAB GROUP CREATED?

If, for example, you're viewing a newspaper website, and would like to queue up some articles to read, there are a few ways in which you can open these articles (links to articles) in new tabs and keep them grouped:

[*]Right-click on a link and select the “Open in New Tab†option[*]Ctrl-click on a link[*]Middle-click on a link (The middle-click can be done by either by pressing the mouse scroll-wheel, or if your mouse does not have a middle button/scroll-wheel, simply right and left-click at the same time)

In addition, if you right-click on a specific tab and select the “Open a New Tab†option, a new tab will open up and will be grouped with the aforementioned source tab.

If you do any of the above in IE8, the original tab and all tabs opened up from it will be grouped.

WHAT CAN I DO WITH TAB GROUPS?

If you accidentally close a tab within a group, using the new “Reopen Closed Tab†option in the menu will not only restore that recently closed tab, but will also restore that tab into the right group.

Also, when you have completed a task, tab grouping now makes it easier to close everything related to that task by allowing a one click “Close this Tab Group†option in the tab context menu.

If you would rather have a tab not be associated with the other tabs in the group, you can easily “Ungroup This Tabâ€.

All of these options are available in the context menu that appears if you right-click on a tab:

In addition to the right-click context menu options, users can drag and drop tabs. Although the main appeal of this feature is that it works seamlessly in the background (there is no work on the user’s side to get this enhanced tab functionality), there are a couple of us who like to over-organize. For the over-organizers out there, dragging tabs into an existing group will make them part of that group. In addition, you can ungroup a tab by dragging it between two un-grouped tabs.

FREQUENTLY ASKED QUESTIONS

Why does the tab stay in the group if I navigate to another page on that tab?

If you are using a specific tab to navigate, the algorithm assumes that your new destination is somehow related to the group. If you don’t want the new navigation to be part of the group, you can either ungroup the tab, or open a new tab to navigate.

Why does duplicating a tab not group the two identical tabs together?

The new duplicate tab feature (found in the right click context menu for tabs) allows you to take the same tab down a completely different path. So although the tabs are identical, the idea is that the user wants to take them in two different directions.

Why are my home pages not grouped together?

Similar to the response above for duplicating a tab, the home pages usually consist of your mail client, your online newspaper, etc. They are not usually related (except that you’d like them all to open when you start the browser).

How can I turn Tab Grouping off?

From the “Tools†button in the Command Bar select “Internet Optionsâ€. Select the “Settings†button under Tabs. Uncheck the “Enable Tab Groups†setting.

I hope the content above not only provides a bit of background into the evolution of this feature but also is informative in explaining what you can do with tab grouping.

Thank you for trying out the Beta and I look forward to hearing your feedback!

Helen Drislane

Program Manager

More...