In collaboration with IxDA, a network dedicated to the professional practice of Interaction Design and Johnny Holland, an open collective talking, sharing and finding answers about all aspects of interaction design, we once again invited designers, students and design-focused people from all around the world to develop new ideas & mockups for the future of the Web.
For this Design Challenge we focused on finding creative solutions to the question: "Reinventing Tabs in the Browser - How can we create, navigate and manage multiple web sites within the same browser instance?"
Out of the 128 submitted concepts a panel, including Janna DeVylder, Kevin Silver (both for IxDA), Jeroen van Geel, Steve Baty (both for Johnny Holland), Alexander Limi, Aza Raskin (both for Mozilla Labs) and Ecaterina Valica, Amine Zafri & Valentin Laube (for Mozilla), selected four "Best in Class" honors. We also invited the wider community to vote for their personal favorites and bestow the "People's Choice" award.
TabViz is a concept that adds a new visual organization of browser tabs to your browser. In addition to the traditional tabs at the top of the window, TabViz adds an icon to the status bar (lower left corner) that toggles a visualization of tabs when clicked. The visualization shows the hierarchy of opened tabs, i.e. which tab opened which other tabs, in a radial layout.
To develop this design, we interviewed people who use browser tabs and gained initial feedback on our mockups for several different visualizations. You can read more about our design process on our blog. We also have an initial prototype Firefox extension on Google Code.
Liz Blankenship, Jakob Hilden, and Kerry Kao began this project as part of their Information Visualization class at the University of Michigan School of Information in 2009. Liz and Jakob have now graduated, and Kerry will soon also complete her M.S. in Information with a specialization in HCI in 2010. All three have a strong interest in open source, interaction design, and usability.
Collapsible Tab Groups addresses the problem of managing a large number of tabs by sticking with the familiar tab paradigm, but modifying it and extending it as follows:
I talked to people about how they use tabs both before I started work on the mockup and while I was working on it. One thing that came up was the importance of certain tasks that a tab or a group of tabs represent. Two of the ideas that I came up with for handling this situation were sticky tabs (that is, tabs that always remain in view, most likely right at the top) and tab highlighting (whereby you can assign a color to a tab so that it keeps drawing your attention back to it -- but using a different color from the one used for alerting the user that something changed in a tab). By the time I came up with these ideas, it was too late to include them in the mockup :)
My aim was to make tabs easier to manage and to provide additional functionality to handle some common situations, but without changing the basic paradigm that people are used to. Evolution rather than revolution. I hope I have succeeded in this :)
Martin Polley is an interaction designer and technical writer working at Intel in Haifa, Israel. He started getting interested in interaction design about 18 months ago and resolved to transition from technical writing to being an interaction designer full-time. (This is an ongoing effort...) He has been an avid Firefox user since its inception as Phoenix back in the day (and of Mozilla and Netscape before that). He is particularly interested in location-based services and urban informatics (somewhat ironic, as he lives in a small village). He is also the instigator of the Israel UX Book Club. And he is on Twitter, of course.
What we found out from this project is that tabs work for most people. Average users are generally satisfied with the tab metaphor and many don't even use tabs at all. Our design solution needed to be based on the needs and behaviors of those who accumulate an unmanageable amount of tabs—the power user. We started by observing how power users browse, paying close attention to how they modified their current web tools to create a satisfying experience. Of the many things we noticed, and what became a major source of inspiration for our design, was the tendency for users to open multiple browser windows as a way to manage content. This was a method for users to create a concrete distinction between content and allow ambient or background applications to not interfere with the activity in their active window.
We developed a set of criteria based on our research:
Alex Mattice is an Interactive major at the SCAD Atlanta campus. Danielle Kanastab and Darby Thomas are Service and Product Design majors with a minor in Interaction Design and Industrial Design at SCAD.
I wanted to design something that would solve this problem for the short term, by allowing a user to see lots of tabs and eliminate the need for numerous windows to be opened at the same time. I immediately thought of the favicons. I am one of those users mentioned in the question that has 30+ tabs opened at the same time. I was able to cram 30 favitabs in the demo screen shots, and on a larger monitor you could see even more. When it came to drawers, I knew that I didn't want to use folders as the container. Folders hold files, and I thought that people would want to see a tree structure if there were folders involved. The drawers metaphor works, as most people knew exactly what they would do. Sorting, organizing and grouping the favitabs is good way to find tabs when you have a lot of them opened, and I wanted to provide lots of options; by domain, by last visited, alphabetical, time spent, etc.
In a nutshell, favitabs allows you quick access to a lot of tabs at once, while allowing you to find sites with various ways to sort and filter them. With Drawers, you can organize and save groups of tabs quickly and easily.
Grady crossed over to design after being a systems engineer for 3 years. His career led him to work with companies that were web application centric, so that is where he has kept his focus. Grady has designed all sorts of apps in various industries, such as: Electronic Medical Records, Medical Lab Processing, Video Email, Contact Center, and GPS Vehicle Tracking just to name a few. When not designing stuff, Grady spends his time with his wife and 4 kids and plays the guitar. You can read more about Grady and what he is doing on his website.
Parsons The New School For Design (USA)
Savannah College of Art and Design (USA)
Student Organization for Computer-Human Interaction (USA)
The University of Sydney (Australia)
PUC Minas (Brazil)
University of the Region of Joinville (Brazil)
School of Visual Arts (USA)
Faber Ludens (Brazil)
Copyright © 2005-2010 Mozilla. All rights reserved.
