Visualizing browser tabs in a useful way
The Tab Viz Project

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!

12 comments

1 Alexander { 06.24.09 at 2:40 pm }

I gust went around all available solutions on Mozila web site and your concept seems to be the best in terms of UX, design, test (we can have code to tes it) and the main idea – browsing lines.

What is not clear for now is how me as a user would start a new “browsing circle”. By the browsing circle I mean a way from the starting page to the last opened page. Lets take the video and you will quickly get the idea.
In your video, you started from Google, than have some links opened and so on. But what if you open a new tab with a blank page? After that you will go to yahoo and start a new treat of tabs. How this will be shown. The problem is that yahoo start is not logically connected to the first opened google page. In fact, any potential tab could become a root for the new tree.

In tah point, I suggest you to analyze a wCloud or TabMapping projects as they take notice of that situation.

We decided to give our voice for your project. An all above is not for blame, but to help you in your study, as we hope that combining several ideas in one will give us a great result.

Good luck an do not hesitate to look on your competitors.

2 Alexander { 06.24.09 at 2:45 pm }

Sorry for the typing – I have a small screen now and it is hard to read typed text. Pleas feel free to send me a notice and I’ll repost corrected one.

3 liz { 06.24.09 at 2:49 pm }

Hi Alexander,

Thanks for your feedback. We have thought about the very issue that you’re bringing up. In fact, if you look in one of our sketches here: http://tabviz.org/wp-content/uploads/2009/02/fs1_page_3.png we have multiple “tabs” up the side that would account for going between different browsing circles. Unfortunately, this idea has not yet made it into our code because our code is still very buggy. We’re working on getting it to work better but there are only two of us who have never done extension development before.

Thanks for checking us out and offering your feedback, I appreciate it! Let me know if you have any other thoughts. I have only had time to view the first 40 or so submissions myself, and some were definitely using the idea of tab hierarchy and I appreciated that.

Liz

4 Alexander { 06.25.09 at 4:56 am }

Liz.

Talking about approaches, submitters used to solve “tab challenge”, we can divide them into a number of core streams.

1. Copy another approach (apple, google, opera etc.) and make some minor modification to suite tab plot.
2. Use existing tab scheme and make some changes to it.
3. Think about the principles which lays under modern browsing and try to create solution based on the conclusions.
4. Think about how to adopt “tab idea” to different devices and screen resolutions.
5. PR the author.
6. Express their dreams without critical analysis of them.

Lets talk briefly about that ways.
The first two is nosing to talk about, as they do not generate nothing for the challenge.
Approach number 5 is grate, but no for Mozilla.
The fourth approach is wrong in its core – one should use different interface for big screen and for a small one, as on the big you will use pointing device and can handle much more information and on 4” you have to use your fingers or stylus and small preview are too small to recognize.
The last one (6) could provide some grate ideas or ways, but it will take a lot of effort to create a working suitable product. In fact, what was in the first thought a god thing could turn a hell after developing.

Approach under number 3 (modern browsing) is grate and it will lid us to a thing, called “mind map”. Some of the contributors decided to implement it in a straight forward way (like Graph view of browsing history, TabMapping and wCloud), some used other ways (like ecosystem or Favitabs). Your design also is in that category.
The corner approach could be found also in Corner Petals, but is is too complicated to be natively understood and has some lack of usability on a big (say 22”) screens.

I hope this brief could help you understand the situation.
Lets now talk about fs1_page_3.png that you provided me with.
I think that the better way will be to use existing tabs, but in other manner.
The tab as it is today should be transfered in to “tab container”.
The container will hold the first tab, the custom name if a user assigned one and the information about all opened tabs as a history.
User could see the name of the container, click on it and activate it. That brings the sets in the corner and we could see all tabs in the way you designed it. Clicking on another sat will switch the user to it and activate another sat in the corner. Tabs could be easily transfer from sat to sat with drug&drop and than rearranged by moving in or out by the radius.

What is good in that?
The same “tab” panel – nothing new for the user and nothing more to consume screen space. Show/hide button will do the gob.
The grate corner functionality is there an in any time user could switch to a commonly used way of tabbing.
I’ll try to create a presentation to show this idea.

P.S. Sorry, but I can help nothing with coding, as I am not a code-man. If I new about it in lets say may, than I could provide my developers, but now they are gone as my project went to the other stage.

Best regards, Alexander

5 liz { 06.25.09 at 5:21 am }

I think that is very insightful about the different approaches that people took to come up with their solutions for browser tabs. (Though I am not sure what is meant by author PR.) I also like your idea for replacing normal tabs with tab containers of a sort that hold a radial tab grouping. I am not quite sure how dragging and dropping from one group to another would work and I think it might not be all that intuitive. One of the key things we wanted to do with our idea was 1) don’t make the user have to do anything extra to generate the visualization in a way that makes sense and 2) don’t interfere with the current way that people use tabs. I think that if we stuck with 2 for a while and had a more refined and popular plugin for the browser, we would perhaps be able to progress to what you have talked about, with being able to have just a tab for each grouping. Or perhaps if each tab also became a drop-down of the grouping, but then I feel like that might overshadow the usage of the tree approach. We wanted to keep it simple and introduce people to the tree-hierarchy idea for now.

Glad again to have interesting feedback from you. :-)

6 George Slavov { 07.15.09 at 11:42 am }

I just saw your presentation and am very excited about trying your extension out. I’m downloading it right now and I noticed it was taking a while. Then I noticed that it is 25 MB! Just out of curiosity, how in the world is it that big?

7 Lukas { 07.16.09 at 5:18 am }

Hello, I like Your project a lot … looking forward to use this tab feature, when in stable release … that one from google code did not work for me … log file is logging, but no tabs are showing up after clicking icon in status bar :(

8 liz { 07.16.09 at 8:50 am }

George – I probably forgot to clear out the thumbnails when I made the latest build.

Both George and Lukas – It’s still a very rough prototype so the code is not in great shape and I apologize. I believe our “Best in Class” award will help us to have some additional help on the coding – Jakob and I had never tried this before so we just did the best we could.

Thanks both for trying it out!

9 pickinmachine { 07.17.09 at 6:24 pm }

Very cool. This would be especially useful for admin related functions of web apps. I always have a zillion tabs open as a blog admin for our Movable Type blogs at work, this would easily let me see the “drill down” between tabs and functions.

Nice work! I’ll have to give it a shot next week.

10 a suggestion { 07.20.09 at 10:02 am }

I like the the idea but it is not always clear what tab it is, I would suggest to increase the size of the segment so more of the page is visible when the mouse is over it but not zoom in.

Best regards,
just a user

11 Jim Cook { 07.21.09 at 9:03 am }

Great interface, however I have found 3 glitches so far.

If you open a link from outside Firefox say from a link from IRC that link shows up with a new base window and not added to the radial menu.

Changing the root tab can have some odd consequences, such as the page preview disappearing.

Lastly, it seems that you have to navigate to that tab prior to the page preview working.

All in all though, I have found that this has already increased my productivity. Brilliant idea and I wish you the best of luck.

12 liz { 07.21.09 at 9:13 am }

Hi Jim,

A link from IRC would be starting a new “tree” or hierarchy, thus it is in a separate visualization. We do need a better way to switch between visualizations. If we could think of a good way to visualize “externally” opened tabs, or link them to currently open tabs, too, that would be great, but I don’t have any ideas yet because it seems that it may or may not be related to the tab that happened to be open at the time.

We know that the prototype is rather buggy at the moment; it’s mostly a proof of concept. As you discovered, the page previews do not show up unless you have switched away from a tab and back to it. (It snaps the screenshot on the “TabSelect” event, if I recall correctly.)

Thanks for the interest in our project. :-)

Leave a Comment