Posts from — February 2009

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.

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!

As we go through the process of researching and creating a visualization, we come across a number of interesting links to help us.  I’ll try to post a collection of the most useful or interesting ones every now and then.

Concept series ideas

Our friend Debra Lauterbach explained a bit about her use of tabs and her ideal solution in her concept series submission – Browsing Spaces

Liyan Chang posted a video including several concepts involving tabs and browsing history

Existing tab extensions

Jakob already mentioned 3 of our favorites, but there are bunches of existing extensions that enhance tabs on Mozilla’s add-ons site.

I’ve installed Tab Mix Plus, and although I haven’t explored all the functionality, there are two features I’ve enjoyed.  One is having unread tabs differentiated with the text written in red italics.  Also, until a tab is fully loaded, a progress bar displays within the tab.

Study of tab usage

Patrick Dubroy’s talk at Mozilla about his research into how people use tabs has spawned a lot of interesting conversation and reflection about how people use tabs.

Technologies

Since we’re hoping to go the whole 9 yards with this, we’re going to be learning how to develop a Firefox extension.

That’s all for now!