Biz & IT —

Mozilla design challenge showcases new browser tab concepts

Mozilla Labs has announced the winners of its Summer Design Challenge, a …

A screenshot of the TabViz Firefox extension
A screenshot of the TabViz Firefox extension

Earlier this year, Mozilla's design gurus began exploring the possibility of improving on the principle of tabbed browsing. They launched a discussion about various ways to transcend the limitations imposed by the current tab system.

To encourage broader community participation in this discussion, Mozilla Labs launched a competition and called for designers to submit mockups and concept art that depicted new ideas and interfaces for tabbed browsing. The results of the Summer Design Challenge were announced this week and Mozilla has published the best entries.

The winning designs are listed by category—including the most innovative, the best executed, the best user interaction model, and easiest to ship. These were selected by a panel comprised of representatives of Mozilla, the IxDA interaction design community, and the Johnny Holland collective. There was also a separate "People's Choice" category where the winner was elected by the community through a voting process.

A design called TabViz took the top spot in the category for most innovative entry. It was created by a team of three students from the University of Michigan School of Information. After conducting user studies to determine how people use tabs, they decided to tackle the problem of tab overload by implementing a radial tab navigation control system. They have published a prototype implementation which is available for download from the group's Google Code webpage.

The current implementation is designed to complement the existing tab system rather than replace it. It adds a small icon to the left-hand side of the browser status bar that can be used to invoke the radial view. As the user spawns new tabs, the radial view adds labeled thumbnails for the contents of those tabs in a semi-circle next to the thumbnail of the parent tab. It provides a very clear overview of the user's browsing pattern and the relationships among various tabs. It will also segment individual slices of the radial display to provide easy access to the forward and backward history of the associated tab.

Despite being an early prototype, their implementation is surprisingly good. It exhibited several bugs and lagged in certain contexts, but it is mostly in working condition. With additional refinement, I could imagine using it on a regular basis. It has practical real-world value to end users and provides a very effective visualization of tabbed browsing activity.

I also really liked the FaviTabs concept, which took the top spot in the category for most producible prototype. The mockup introduced a hugely impressive timeline view that would significantly improve the usability of interacting with browser history.

The other winning entries also offer some interesting concepts, including built-in search mechanisms, nameable tab groups, vertical sidebar views, contextual ordering, and better bookmark handling. You can see videos of the winners at the Mozilla Labs website. They also have an index page that provides easy access to the videos of all 128 entries. Some of them, like this Mario parody interface, are quite funny.

The design challenge has clearly generated a lot of good ideas, some which could be adopted in future versions of the Firefox Web browser. In addition to shedding light on new tabbed browsing concepts, the contest also demonstrated the power and efficacy of crowdsourcing user interface design.

Channel Ars Technica