When we further discussed details of the fan-shape View of what opened what, we experience tradeoffs among features we wanted to represent. An important decision was then made: discard the representation of tab age indicating by color. Too many colors would dilute each’s importance though visually appealing, thus we decided not to misuse this significant representational element; instead, we chose to use the size to represent the total amount of time spent on tabs, i.e., more time you spent on a tab, the longer that tab would be. We reexamined how we previously represent what opened what and added a new feature in our visualization: history of current open tabs. Here comes our redesign of the fan-shape view:

As can be seen in Figure 1, the color is now used to represent the current state of tabs: yellow shows tabs recently in use; gray indicates tabs not used for a while; dark gray represents a history of previously opened pages within current tabs. The margin is set in between tabs to show new tabs open, whereas those without margin (dark gray ones) represent the history of that tab.
In addition, we considered the chance that people might open tabs out of the blue, meaning pressing Ctrl+Tab or right clicking “open new tab”. One possible way to solve this problem can be seen in Figure 2.

V2 & V3 represents two totally different tab organization of the fan-shape view from the original one. Clicking on any of them will replace the current fan-shape view.
We wish this view wouldn’t bigger than half of the browser window, which will look like Figure 3:

One problem is still in the face of us: how do we show these tabs’ thumbnail/icon? We think of the regular rectangle thumbanil way to represent them, but not satisfied with it. Hope we will come up with better ideas in the future!

After reviewing all of our interview notes, trying some existing extensions of tabs, conducting literature review on tab usage as well as browsing strategy, we came up with this idea: Fan-Shaped View of what tab opened what tab (See Figure 1).

As can be seen, Figure 1 shows hierarchical browsing history of recently open tabs. For example, from the black tab in the lower left corner, two blue tabs were opened; from the lighter blue tab, three green tabs were opened. This view makes it clear in terms of what opened what; however, the facing problem would be people’s browsing behavior, such as lots of tabs were opened at once or a flat hierarchy of open tabs. Another challenge lies behind this view would be the shape of thumbnail/icon, which might become unrecognizable due to metamorphosis.

In addition to what tab opened what tab, there is another phase that can be revealed in Figure 1, i.e., the tab age. Color played an important role in this fan-shaped view, indicating the length of tab opened over time. Besides, according to our interviews, they tended to put the more important ones to the left, thus the color in this view of the same hierarchy would be gradient.

After we came up with this idea, we further considered some details of this view, such as what would happen if a tab has been closed and how it might fit in browser. As shown in Figure 2, if a tab has been closed, tabs of the next hirarchy would fill up its space. Also, this view could be located at the lower left corner of users’ browser window, when hovering on the corner, it would then show up.

A more advanced consideration would be incorporating the visualization of the viewing time, i.e., the length of each tab, as revealed in Figure 3.

These ideas are in its initial stage, waiting for more thorough deliberation to become riper. Hopefully, we would get some recommendations or critiques about whether it is useful or practical enough to implement.

What do you think?

We’ve begun brainstorming on paper about how best to show information about tabs that people would want to interact with, especially if it would help them navigate their existing tabs.

Inspired by a comment from one of our interviewees about wanting to see his history of tab usage, i.e. number of tabs open over time, I started out with sketching a simple bar chart that shows a user’s history of tab usage over a week:

From there, I thought, what about showing more detail, or only the currently open tabs? So I narrowed my focus to thinking about a single day, with a focus upon tabs that are currently open.

My next sketch looked like this:

The main idea behind this is to show the duration of each tab being open by how wide it is and the height of the stack indicates how many tabs, roughly, are open.  If you close a tab, the other tabs stacked on it would drop down.  Colors could indicate the domain or site that a tab is on.  Hovering over a particular bar could show you more information, including a thumbnail.  In the example shown, I have included all tabs over a day, but you could restrict it to only currently open tabs.  You could possibly expand or contract the timeline.

I’ve thought about several ways for accessing a view of the information like this, including having it be on a separate screen (keyboard or some other action would get you thene) or even possibly trying to smoosh it into what is now the area in which you see tabs.  The bars would likely become lines in the latter case, and hovering over it would give the viz in more detail.

This is just one rough idea that came out when I started sketching.  Kerry and Jakob both sketched some really cool ideas over the past few days too, and they’ll be posting those here soon.  Over the next week and a half we’ll be refining these ideas or coming up with new ones to present to our class for feedback.  Any blog readers are welcome to weigh in, too!