This is another idea that we are are working on beside the fan-shaped visualization.  The basic rationale behind this visualization is to give the user a useful overview of the currently open tabs once she has opened to many of them to keep track of.  Ideally the user would want see different tabs differentiated by relevance or grouped in meanigful clusters.  While further brainstorming on this we concluded that one of the most useful criterias would be by chronological proximity.  Tabs that have been opened within a certain timeframe are quite likely to belong together. Based on these considerations, we came up with the following sketch.

The x-axis of the screen represents the time for which the browser has been open. The scrollbar can be used to only highlight a certain timeframe and to move that frame back and forward over time.  The time axis would also expand at those times where the most tabs are placed, so that there will be sufficient space to place them.  Finally, some shading in the background would indicate night and day time, to provide some additional chronological orientation.

The y-axis represents relevancy of the tabs.  Relevancy will not be strictly defined by a single metric, but rather be a combination of multiple metrics that might indicate such significance of the tab.  These would include:  time since the tab has been viewed, frequency of viewing that tab, time spent on the tab, popularity of the open website, and possibly more.  The assumption is that less relevant tabs (e.g. a search result that you just briefly looked at) would sink to the bottom of the tab, while the more relevant ones (the ones that you probably want to find) would stay at the top.

Additional visualization features include:

• a sticky area at the top left of the screen, with tabs that are constantly kept open and often revisited
• highlighting of tabs that haven’t been looked at yet
• grouping of tabs through colored borders. for tabs that have an opening relationship or that have the same domain (e.g. “*.umich.edu”)
• connectors between tabs that have an opening relationship

From the sketch above we went on to create a little more high-fi version of this visualization.  Not all the visualization features from above are included in this version yet, but it should give a relatively accurate idea of how this could look like on the computer later.

Trade-offs

We think this type of visualization provides a pretty good way to give a useful overview of the currently open tabs, but it also has a couple of downsides:

• it is a pretty heavy type of visualization that would require you to almost completely leave your current browsing context
• especially with many tabs and a long timeframe (which unfortunately is on of the main targeted contexts) it could become a little busy
• it doesn’t provide a very complete browsing history, since it only displays currently open tabs and websites

Concerning the last issue about a more complete browsing history that would show exactly which website you head open in which tab for how long and which website you were viewing at any time, we considered an additional view to our visualization.  As indicated in the bottom left corner, the user could switch between the depicted overview mode and another view that would give you a complete browsing history using time bars (see our previous idea) within the same frame.

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!