August 11th, 2009
Tabs & the Mozilla Design Challenge
An in-depth look at entries from the Mozilla Design Challenge.
Since the last post on how to improve tabs in Firefox, the Mozilla Design Challenge for the summer of 2009 wrapped up, with 128 (!) submitted proposals for how to improve tabs. By any measure, this was a massive success — and left us, the judges, with the daunting task of trying to review over a hundred proposals and give good feedback on them all.
The winners of the design challenge were announced, and it was hard to pull out only a couple of submissions among the 128 proposals.
There were a lot of innovative ideas — and as expected, some of the most solid proposals got lost in the tsunami of exciting, new, shiny things. With this article, we want to highlight some of the interesting ideas, and talk about how they are relevant for the tab sidebar approach we have been looking at earlier. They use similar approaches to the sidebar and location bar experiments we have been discussing earlier, and expand on these with some new and interesting ideas. This of course doesn’t mean that the more revolutionary re-imaginings of tabs in the browser are less interesting, but you can read about and look at those on the main Design Challenge site.
In general, there were a lot of similar ideas overall in the submissions, which should be a good indicator that we’re heading in the right direction with the sidebar tabs. We will show some of the videos that have great ideas that we haven’t seen anywhere else, and that weren’t represented in the previous article.
It also gives us an opportunity to talk about tab grouping, which was hinted at, but not treated in any depth in the previous post.
Martin Polley shows a number of interesting ideas in his proposal, and deservedly won the “Best in Class: Execution” award in the design challenge, in particular because he has a really good demo that shows the potential of what he's proposing. His overall approach should be familiar — tabs on the side as we discussed in the previous installment. Of particular note in his video:
- Shows grouping and how this works in the sidebar (~1:20)
- Martin has a somewhat explicit grouping behavior, in a later video we will see an alternative, more “organic” way of handling this.
- Shows sidebar filter/search (~1:50)
- The list of tabs narrows down as you type. One danger here is of course that people might not be aware of the active filter, and wondering where their tabs went. One way to resolve this is to highlight the search box as well as the parts of the tab name when it’s active.
- Shows notifications (~2:05)
- Being able to show when a page has updated/changed in the list of tabs is very useful, and complements other work that has gone into notification support lately.
- Minimizing the tab area (~2:30)
- Having tabs on the side is great, but we also need a good way to get them out of the way when you don’t want them on the screen. One way of doing this is to only show the favicons, and then show the full title when hovering. The other cool thing about this is that it enables “scrubbing” — sliding the pointer along the edge of the screen to expand the title of one tab at a time. This could potentially be combined with the preview approach that we’ll see in a later video.
- Mentions combining tabs and bookmarks (~3:15)
- There’s a good opportunity to unify tabs and bookmarks as a concept once we have tab grouping. As we have said earlier, “bookmarks are just tabs you haven’t opened yet.”
Don’t be fooled by his soft-spoken presentation — “Alex”1 1Not to be confused with the ⅔ of the Mozilla User Experience team named Alex. presents several hard-hitting ideas in this video, a great example that good ideas win out over flashy presentation any day.
- Grouping of tabs
- Notice that there is no separate “management mode” for groups, you just create them organically by drag/drop. It feels natural, makes sense, and works really well.
- Representation of multiple sites in a collapsed tab
- Showing multiple favicons when a group is collapsed is an interesting idea, and gives you a good option as to what to do with a group that hasn't been assigned a name. It gives you a quick idea as to what kind of pages or apps are contained inside the group if it is collapsed.
This last video presents an idea similar to what we also talked about in our previous post: make the Location Bar capable of matching existing open tabs. Business as usual, until about 3:30, where Brian Will shows an interesting approach: previewing the tabs on-hover. As mentioned in the video, this is probably best done with a blur effect or something similar to make it clear that it’s not a live page until it’s activated.
There are some things that we don’t have a good solution for yet — split-screen views is one of them. Our current approach is to let this be a task that is handled by the operating system windows, but there might be a potentially great solution lurking in the shadows here — since most modern OS window managers are actually shockingly bad at managing windows.
Similar to what was proposed in the Wave Concept — the relevant part is around 06:30 in the video — we have been considering the ability to drag a vertical (or horizontal) divider that lets us split up the screen and have two different pages shown at once. Of course, one of the issues with this is that you get the problem of which half does the URL bar and other controls affect when there are two different areas? Merely duplicating the controls isn’t really that elegant, so another variation of this would be very interesting.
I hope the above videos give you inspiration to help us create more ideas for the next releases of Firefox — even though the actual Design Challenge is over, we’re just getting started on the fun parts.
If you have any ideas around split screens that you want to suggest, tag them with “mozconcept” on YouTube, Vimeo, Flickr or any other service, and we’ll have a look at them. You can also send us suggestions in Mozilla’s usability discussion group, or email me directly at limi@mozilla.com.
I’m going to spend a few weeks in lovely Santorini, Greece — but I’m already looking forward to what you come up with in the meantime.
