Posts from — March 2009

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 Tabs’ hierarchy (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 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 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.

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.

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.

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):

Version 2, with lengthening:

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!