Visualizing browser tabs in a useful way

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!

Taking our idea of an information worker who frequently uses tabs, let’s think about some of the scenarios that might spark tab usage.

Rebecca, Information Worker

Rebecca is looking forward to her visit to Austin, TX for SXSW ‘09.  She wants to find out about some of the best restaurants that would allow her to experience some Southern cuisine while she’s down south. She starts with a quick Google search: “Southern cuisine in Austin.”  From the search results page, she Ctrl-clicks on several of the links that look interesting to her.  Then she clicks on the first tab, Yahoo! local.  She browses around the map to where the conference is and finds a few restaurants worth considering.  Then she switches to the tab she opened from Yelp.com.  From there, she doesn’t want to lose the original Yelp page, so she opens several of the links in the list of restaurants Yelp provided, which takes her to the inidividual pages on the Yelp site for each restaurant.  As she opens them, she skims through and uses her initial impressions to decide whether or not to further consider the restaurant.  She closes the tabs immediately for restaurants that don’t look so good.  She compares the Yelp reviews with the Yahoo! local results and finds some overlap between restaurants. She sends a few of the links to her friends who will also be attending the conference, then proceeds to close all the tabs relating to her restaurant search, knowing that if she needs to revisit the pages, she can find the links in her e-mail archive.

Meanwhile, she’s also working on a bunch of other projects.  Right now, in her browser, she has 37 tabs open.  While a few of them are personal, most are relevant to the work she’s currently doing; tutorials and documentation for the software she’s learning, an e-mail draft to her boss with a status report, and her RSS feed for work-related feeds.  Her Gmail is always on the left because it is the tab she uses most frequently, and it helps to know where to find it.  Similarly, a few other tabs that are important for her work, such as the main website for her workplace.

Photo credits to flickr user joi – http://flickr.com/photos/joi/2624315128/

This is a list of tab characteristics that could potentially be used to visualize open browser tabs in a meaningful way:

These are other projects that we found which visualize certain tab characteristics:

• Ctrl-Tab
  Shows open tabs in a matrix view in most-recently-used order.
• Autodial 3D
  Visualizes tabs in a 3D space.  More frequently visited tabs being in the foreground and less frequently visited ones in the background.
• Chromatabs
  Gives each tab a unique color based on a hash build from its domain. The rationale is that you can easily recognize certain websites/tabs based on their unique color.

There are certainly more extensions out there that visualize tabs in some way, but this give you a short overview over some noteworthy ones.

From 5 of our interviews as well as Patrick Dubroy’s presentation about “how people use tabs”, we discovered some interesting behaviors and browsing strategies of tab usage.

Tab as a reminder – people tend to leave a tab open when they haven’t done with it. Whenever it was resolved, it would be closed.

Physical location matters – where people are at would affect what tabs they open. For example, people at school would open more course-related tabs, whereas people at home would open tabs more for pleasure.

Open several tabs at once – people tend to open many new tabs of interest at once because they can still stay on the same page and open new pages simultaneously until they finish browsing the original page. They then go to check those new pages.

Tabs in order – most of our interviewees have their Gmail tab all the way to the left, indicating that it is their most important or frequent used site. We guess that may in part be attributed to the title bar changes to indicate if they have new email or chat message. Besides, people tend to manage their tabs from left to right, according to importance. They would drag the important ones to the left and let temporary opened or less important tabs to the right.

Task organization of tabs – people tend to open a set of tabs for certain task and move to another set of tabs for another task. In addition, they would put tabs that have to be switched rapidly close to each other.

The seemingly never-closing browser window – people tend to keep their browser window open more than they used to be for they don’t have to reload pages and the browser nowadays is far more stable than before.

These behaviors and browsing strategies of tab usage will help us gain more insight of how people would like tabs to be visualized, thus facilitating us to present tabs visually in a more useful sense.

To begin our research, one of the essential questions we ask ourselves is, “Who would want to visualize their browser tabs?” In this post, I set out to answer that question as best I can.

The most obvious answer would be people who use browser tabs when they use the Internet, and even more so, those people who use a LOT of browser tabs when they are online.  (”Tab overload,” anyone?)

In a recent poll on Cognitive Daily with over 1,300 respondents, nearly all had multiple tabs open, but only 16.7 percent of respondents said they had more than 10 tabs open.  The poll also found a correlation between age and number of tabs open, and the number of internet celebrities you recognize and the number of tabs open (the older respondents were, and the fewer internet celebrities they recognized the fewer tabs they were likely to have open). The amount of time spent online per week also correlated with higher tab usage.

This points to a high amount of tab usage in information workers and other Internet “super-users” and thus, we are considering that to be our primary user group.  We have interviewed several such people.

Some use the tabs for organizational purposes, for instance, some said that it’s nice to have everything in just one window.  Tabs were frequently left open because of unfinished work that needed to be done on the webpage within, or some piece of interesting information being temporarily saved.

Through our interviews, we identified many such behaviors and browsing strategies.  We’ve also identified various information about tabs that we might be able to use for visualizing them in a useful way.  More about these ideas soon!