Visualizing browser tabs in a useful way

The Tab Viz Project

TabViz wins Best in Class: Innovation in Design Challenge

We are pleased to announce that TabViz won the honor of Best in Class: Innovation in the Mozilla Labs Summer 09 Design Challenge. The results, including all the other projects with honors and honorable mentions are available on the design challenge site.

We are amazed and pleased with this result and the publicity that has gone with it. Our prototype now has over 5,000 downloads and our video over 24,000 views! We have many people giving suggestions and reporting bugs.

That said, I do want to apologize for not having a Firefox 3.5 compatible version available earlier. We weren’t anticipating so many people would want to try our extension! The file size was also ridiculously large because I forgot to clean things up. These issues are both resolved now.

The last thing I want to say is to reiterate that our prototype is exactly that – it is a proof of concept and a work in progress and we know there are many issues with it. One user mentioned that it logs your browsing activity more than it should be necessary. This is helpful for us in testing, so that when a tab hierarchy doesn’t turn out how we think it should, we can go back and see what was logged. This info is never sent to us, we only use it when we test on our own machines.

If you want to help make our prototype into an awesome extension found in the add-ons directory, please let us know if you encounter problems by adding them to the issues list on our Google code site. We would also very much welcome any help with the code that people are willing to offer. You can contact us at tab-viz@googlegroups.com if you have any questions or want to get involved.

Thanks, everyone, for showing so much enthusiasm for our project!

July 22, 2009   4 Comments

TabViz Presentation Videos

On Monday we submitted this 5 minute video to the Mozilla Summer Design Challenge:

TabViz from Liz Blankenship on Vimeo.

Our final presentation from class is now also available on Deep Blue. It is a large .mp4 file that contains just over 12 minutes of us talking in more detail about the project. Although the demonstration didn’t go as smoothly as planned, you’ll want to catch this video if you’re highly interested in our project.

That’s all for now!

June 24, 2009   12 Comments

Mozilla Labs Design Challenge: Redesigning Tabs

I’m excited to announce (a bit belatedly) that Mozilla is having a summer design challenge about tabs: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Mozilla Labs Design Challenge

Check out their site for more information if you’d like to try your hand at entering the challenge, or skip right to the submissions page if you want to see the ideas people have been submitting.

I’ve been looking at the videos that have been submitted (there are 40!). One that I particularly liked for its simplicity is FaviTabs. This submission touches on two common themes throughout many of the submissions I viewed: ordering of tabs and grouping. I think having an easy way to change the sort-order of tabs would be great, and in fact, I discovered there’s an extension for that. So many extensions to try, so little time! Maybe extensions should require video demonstrations, too, because I’ve really enjoyed seeing what everyone put together without having to install things to see for myself.

Ahem, anyhow, the other theme I mentioned was grouping. Many of the videos show the creators dragging and dropping tab objects around in some sort of workspace or tab area. I would love this, so long as the effort required by the user is minimal enough. I don’t want to have to specify which group a tab belongs to every time I open a new one, for instance. But several submissions pointed out that you can, by default, place a tab into the group that the parent tab belonged to. I create more brand new tabs than I care to admit, so this wouldn’t be ideal for me personally, but it’s certainly a partial solution.

I also noticed that a number of the submissions completely removed the tab bar or any contextual information about other “tabs” being open from the visible display. My gut instinct is to dislike these ideas because I like having at least some form of visual representation of what’s available to me, but it’s possible that using a keyboard command or clicking on something to open the view of open tabs might become as second-nature to me as my eyes flicking up to the tab bar is now.

At this point, we’ll be creating a video describing our project including a demo to submit it to the challenge as well, so come back soon and we’ll have it posted!

June 14, 2009   No Comments

TabViz final presentation for Info Viz class

We had our final presentation for Information Visualization class on the evening of April 29th. Our prototype is still a little buggy, and as Murphy’s Law would have it, our demo got off to a rough start. A quick browser restart later, we shared a successful demonstration of using our radial layout to aid tab refinding after doing a Google search.

Here are the slides from our presentation:

Eventually the entire presentation will be available on Michigan’s Deep Blue.

As Jakob said in his recent post, we now have a Google code project. We hope that anyone who is interested will feel free to let us know and get involved. We discussed some of the areas we still need to work on in the presentation. To name a few:

  • Accordion tabs (making the history of a single tab available within a wedge) are only partially implemented
  • Hover effects (showing the entire thumbnail and title when someone hovers over a wedge)
  • Finding a way to capturing screenshots before a tab has been viewed (Tab Preview does this)
  • Appropriate resizing of screenshots (currently screen dimensions are hard coded)

And of course, we will need to test thoroughly.

That’s all for now. Although the class is completed, we all plan to pursue this project further to make a more reliable and useful extension. Look for more updates later this summer!

May 7, 2009   No Comments

TabViz project on Google Code

After succesfully creating a prototype of our tab visualization we have released the code of our prototype as open source on Google Code.  If you want to take a look at the code, test the latest version of the prototype, or maybe even contribute to this little open source project, please go to http://code.google.com/p/tabviz

Besides the repository with our source code you will also find the latest version of the prototype for download, a list of issues and bugs, and a wiki with documenation.

If you are interested in trying out the prototype you should follow the instruction on installing and using the TabViz  development version in the wiki.

Otherwise if  you are also interested in helping out with the project the places to go would probably be the issue list and the list of unanswered technical questions in the wiki.

We would be thrilled to hear your feedback!

May 5, 2009   No Comments

Radial Tabs Implementation Progress

We are making progress on the way of implementing our Radial Tabs visualization as an extension for Firefox and this is a little update about what we have done so far:

Since we have to draw a lot of dynamic round shapes we couldn’t use regular HTML/CSS/XUL for our extension but needed a more flexible way  to draw graphics.  The two possible alternatives were the HTML Canvas element or SVG (Scalable Vector Graphics).  Since SVG allows for richer interaction with the drawn objects we decided to use that.

To actually create the SVG elements we are using the jQuery SVG plugin, which makes creating dynamic SVG a lot easier.

One major challenge that we haven’t fully solved yet is how to integrate the created SVG into the browser’s chrome through and extension.  Therefore we are testing the drawing capabilities with a regular XHTML version for right now.  You can check out the latest version here: http://jkwebs.de/tabviz/svg_test.xhtml

The other big part that is yet unsolved is the collection of the necessary data for the visualization.  We created a dummy XML file with the data that we need, but we are not entirely sure yet how to get at all of the pieces of data.  A great resource that we can hopefuly use as inspriation for this will be Patrick Dubroy’s tlogger extension.

If you have some deeper knowledge about integrating SVG into Firefox extensions, working with Firefox tab internals and similar areas we are always open for tipps and feedback.

April 1, 2009   No Comments

Trade-offs in Radial Tabs visualization

In order to understand how our visualizations make sense to people, we conducted usability testing informally with 4 heavy tab users. It’s informal because in our hi-fi mockup, we didn’t really enable any interaction. When presenting the mockup, we told the test user to imagine that they have been browsing the Internet for a while. Then we asked them to tell us what the visualization mean, what they can tell us about the task that would have led to the visualization. After these two questions, we asked further about how they might interact with it, and how they feel about the visual design.

People’s feedback reflected whether our visual element choices were intuitive or not. We pleasantly found out that Radial Tabshierarchy (see Figure 1) was pretty clear to people and it was the first thing that caught their eyes. However, the way we used opacity to represent whether tabs were actively in use or not was not so intuitive to people, who were confused and couldn’t even make a guess. The same thing happened to the yellow border (see Figure 2) of the wedges, which originally meant tabs that haven’t been visited yet. One user guessed that they were active tabs; another three felt that they were somehow grouped together because of certain same attribute, but that relationship didn’t jump out at them. Also, users could not understand the dark gray bands (see Figure 3). “I don’t know the band means,” said one user. Another user guessed, “those ‘lines’ means frequency that I have been to a particular tab?”

Figure 1, hierarchy

Figure 1, hierarchy

Figure 2, yellow border

Figure 2, yellow border

In terms of interaction, people made good guesses. Two users felt that by clicking the down-left band, this visualization would go away or appear. Two users felt they can click on the wedge to expand and collapse them for more information or link to that page. Much to our delight, one user said our visualization was previews of some relationships of the current page, which equaled the root tab because it was the same as the background site.

Figure 3, gray bands

Figure 3, gray bands

Figure 4, lengthening version

Figure 4, lengthening version

When we presented the lengthening version of Radial Tabs (see Figure 4) to people, all of our users guessed the length meant the time one spent on that tab, which was exactly what we tried to represent. However, even though it made sense to our users, they liked the non-lengthening Radial Tabs better because it “didn’t take up as much real estate,” and it can show hierarchy more clearly. Talking of screen real estate, one thing we realized during the interview/review process is that one of the biggest strength of the radial layout is that it is a very space-saving and intuitive way of displaying a hierarchy. It beats other options such as a regular tree structures (such as in the Windows Explorer) by lengths.

Some questions were raised up after the interview. We were wondering how big we should make the thumbnail. When it’s too small, it’s not recognizable. When it’s too big, it takes up too much space. People liked the way we cropped the thumbnail and even said, “Yeah, that’s really cool” in our interview. Thumbnail enables people to recognize the tab rather than to recall it; people thus don’t have to work out from memory what certain tab means.

We guessed that the opacity and color border weren’t clear to people was probably because we mixed two representation elements together. Thus people would have to guess the meaning from 4 possibilities:

  1. high opacity with no color border
  2. low opacity with no color border
  3. high opacity with color border
  4. low opacity with color border

To recapitulate, the Radial Tabs is good at showing:

  • hierarchy of tabs
  • browsing path
  • tabs you haven’t visited before
  • tabs that are currently in use
  • history of the pages that were previously opened in a tab
  • overview of tabs that connected to the current one

What it cannot represent:

  • browsing history
  • an overview of ALL of the currently open tabs
  • exact time one opened a tab

Since there are various ways to represent tabs, why we chose to enable these features but not others? Some user would like a time-ordered sequence of tabs better than knowing the hierarchy of tabs because it’s the way they memorize things. For example, one user stated that he would want to know what he did yesterday afternoon, but don’t care how he got there. On the other hand, some users like the idea of the hierarchy of tabs as well as the browsing path better because they would like to track what opened what To them, monitoring and refining their search was  more important.

March 30, 2009   2 Comments

Browsing behaviors revisited

After doing an additional round of user interviews and showing them our most recent prototypes, we felt it was important to revisit the different browsing behaviors that we encountered while working on this problem.  The most important take away is that people use tabs and the browser in general in very different ways and it is impossible to find visualization solutions that would fit each of these different behaviors.

To stay aware of the differences in behavior and to check how the different behavior match up with our existing concepts/sketches, here is a list of the most important behaviors we noticed:

The Never-Closing Browser

One browsing behavior characteristic that we heard from nearly every person we talked is that people have their browser open a lot longer than they used to.  Given that it didn’t crash for any reason, a browser that has been open for several days is not a rarity anymore.

Tabs As “Soft Bookmarks” or Reminders

Another type of user behavior we discovered are people that use tabs as reminders or a sort of lighter version of browser bookmarks.  Let’s say you chanced upon an interesting article or website that you would like to check out, but you don’t have time right this moment.  You would like to keep that URL in some form but it is not important enough for you to save it as a regular bookmark.  So, you leave that website open in a tab in the background and you get back to it when you have some time again.  The problem is that this way you can easily accumulate a lot of tabs, especially when you don’t have a lot of time ;)

Browsing Historians

A number of people expressed interest in having a detailed view of their complete browsing history.  Part of this interest can probably be attributed to simple curiosity, but a visualization like that could also enable users to refind tabs they had open at a specific time in the past or in specific combination with other tabs.

Browser Spaces

One strategy to control the problem of too many browser tabs that multiple people are using is to use multiple browser windows organized by tasks.  For example, one window for work-related tabs, one for project A, one for personal tabs, and so on.  However, current browsers do not support this strategy very well, yet (e.g. it is hard to distinguish different browser windows in the start menu).  A concept title “Browser Spaces” which goes into this direction has been presented by Debra Lauterbach at SOCHI’s Browser Design Jam last year.

Opening (Several) New Pages In New Tabs

Another tab related behavior is that some people open many new pages (even from the same website) in new tabs instead of the same as the tab of origin website.  This is also related to Patrick Dubroy’s findings that some people are using the browser’s back button less and less because of opening new pages in new tabs.  A use case where this is very frequent is when opening a handful new tabs from a list of search results (or a list of aggregated news stories).  A big problem with this kind of behavior is that you lose track of the connection between tabs and of which tabs (search results) you haven’t looked at yet.  We are addressing this problem in our fan-shaped Radial Tab visualization.

Overview Over Current Tabs

Some people were not so much interested in a full historic view of their tab usage or a visualization that would help them while interaction with the tabs, but rather a visualization that would allow them to get an overview over the current state of all the open tabs at any time. This would be analogous to the Exposé feature on Mac OS X, which gives you a quick overview of the current open applications. Our ChronoViz concept is aiming in that direction.

Tab Arrangement By Importance

Finally one thing that most of our interviewees were doing in some way (implicitly or explicitly), was to organize their tabs by importance or permanence. Due to this, the most important tabs, which were open the longest and most constantly, ended up on the left side of the tab bar. We think this could be used when interacting with the browser and visualizing browser tabs. The stickiy bar feature in the ChronoViz concept is picking this behavior up and lets the user put the most important tabs into a bar where they would always be accessible at the same location, so the user won’t have to remember where it was.

March 29, 2009   1 Comment

TabViz @ expoSItion!

ExpoSItion Poster

ExpoSItion Poster

We have our project exhibit in expoSItion, which is an event/competition in the form of poster display and oral presentation of our project. When making the poster for expoSItion, we finally named three of our visualization. We called the fan-shaped view Radial Tabs, the bar chart idea barViz. ChronoViz was still called ChronoViz. We were excited to showcase our ideas and prototypes to employers, prospective students, current students, faculty and staff, who gave us valuable feedback when we presented.

Usually, we start with “do you also have many tabs open?” and get answers “yes!” However, we interestingly found that people define “many” differently. Some said yes with only 6-7 tabs open and some with 10-15. So, when they asked back exactly how many tabs did our interviewees open, they were surprised at the number: 30+ tabs.

Another interesting phenomenon when people looked at our poster in expoSItion is that they looked at the section on people’s tab usage behavior, they went through each one and said “yes, I won’t close tabs until I finish reading it; oh yeah, I will certainly do that; yes, yes, yes……” So, it’s pleasant to know that there are more people feeling the same way as our interviewees.

Some viewers were in the shoe of the developer, i.e., they cast doubts on our prototype, especially the Radial Tabs one because they felt it would suffer from technical problems when building it and be time-consuming. One recruiter from Pitney Bowes said, “when you really have indestructible reasons to convince yourselves that this will really be useful, go for it; otherwise, don’t. Or you’ll waste way too much time trying to implement something useless.”

This experience enabled us to talk to more people about our ideas and get feedback not only from super tab users suffering from “too-many-tab” problem, but also from some general public who usually open 5-8 tabs.

March 24, 2009   No Comments

Hi-fi mockup of fan-shaped browser tab visualization

This week we’ve started doing some short interviews with people to get some feedback on our design ideas.  To better enable this process, we created a hi-fi mockup of our pie viz concept.

If you haven’t read about this particular visualization in our blog before, or even if you have, please give us your feedback in the comments.  When you look at it, ask yourself what you think the visualization should do. What do the various visual attributes (size, color, shape) we used mean to you?

Version 1, no lengthening (click for big version with working hover/alt text):hifi-no-lengthening

Version 2, with lengthening:

hifi-lengthened

We look forward to getting user feedback on this and our other ideas in our interviews this week, and hope to get some feedback on the blog, too.  Thanks for reading!

March 12, 2009   10 Comments