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 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.