Firefox Panorama: Tab Candy Evolved
I am happy to announce that Tab Candy is coming to Firefox 4. Starting today, Tab Candy will be called Firefox Panorama and be available as a feature in Firefox betas. Head to the Firefox 4 feature list, or watch the video below, to learn how to organize your tabs into groups and reclaim your browsing experience from clutter and information overload.
While there are many directions still left to explore (some of which are covered in the Tab Candy announcement video), there is a strong set of design principle that have and will continue to guide development. We’ve already seen activity from extension authors to extend the capabilities of Panorama, which makes now a perfect time to discuss Panorama’s design principles.
History and Spec
It took 7 months to go from sketches to inclusion in Firefox. In a fast moving project, ideas need to be communicated fluidly. Instead of having specs broken into many smaller documents, we used one massive document to house concepts, specifications, and design decisions. Here it is. There’s a lot to explore in here so enjoy and feel free to ask questions in the comments.
If you want to delve deeper into the inspiration, go back to mid-2008. Below is a concept video for Firefox Mobile that shows a number of the key design principles and concepts that informed the creation of Tab Candy. The second video shows the in-progress design for Panorama from early April.
The Principles of Design
Within the concept of “organizing your online tasks” is a lot room for paradigms, metaphors, and features. We used a set of principles guided by cognitive psychology to create a unified interface we feel is humane and efficient.
Harness the power of spatial memory. Spatial memory is what allows you to navigate back to your house from a new resturant, remember how to get to your bed after you turning off the lights, and knowing exactly where something is on your messy desk. Probably stemming from our hunter-gatherer days, spatial memory is universally strong in everyone: we just remember where things are if they don’t move on us. That’s why in Panorama we are careful to never mess with your organization and layout — it is always the same even after you restart the browser.
The lack of consistent spatial layout is one of the main usability issues with interfaces like Apple’s Exposé. Their shifting layout means it confounds our ability to remember where things were. It messes with our heads and forces us to learn and relearn an ever-modifying map. Imagine how hard it would be to navigate if the city you lived in constantly rearranged itself.
Seeing is remembering. In the cognitive science community we talk about two modes of accessing long term memory (anything longer than a couple seconds): there is recognition and recall. Recall requires first conjuring up a memory, then checking that it is the right memory, and finally doing something with it, while recognition doesn’t require that first costly recall step as it is triggered by seeing something. Recognition-based interfaces are generally less taxing and are more preferable than recall-based interfaces.
This implies that an overview of everything is the right approach to letting you group and organize your online life. One click lets you see all of your tabs just the way there were before, letting your brain use recognition rather than recall. Many past proposed tab-grouping designs fail this principal.
Minimize required interactivity. In other words, don’t make me click. This goes hand-in-hand with recognition versus recall. Instead of using stacks or other occlusive group visualizations we invented a new way of grouping, where tabs in a group shrink to accommodate more tabs. This way, tabs stay in the order and rough location you remember whilst always remaining visible.
Remove distractions: out of sight, out of mind. This is the corollary to seeing is remembering. We, as humans, are bad at multitasking. As practitioners of GTD know, the secret to productivity is removing distractions and focusing. Piles let you visually hide the pages by which you don’t want to be visually distracted, which strategically requires recall-based memory. When you are in a group, you only see the tabs related to the task at hand, again allowing you to focus. Strategic hiding is key to a mind free of info-guilt.
Tangible. A good interface is behaviorally onomatopoeic. Web pages are now physical objects which you can interact with, leading to all sorts of new metaphors for using and sharing the web. For instance, you’ll soon be able to share a webpage directly, instead of sharing the text representation of the URL for the web page, by dragging it to a friend; and move a tab to your mobile device simply by dropping it onto a representation of your phone.
Also, nothing shouts “sexy!” like a gently stylized physics engine and visual momentum. Beyond marketing appeal, there is a strong argument that such physicality helps the user build a mental model of the interface, and that interface physics yields consistency. We are wired to track the movement of things and to be able to remember where they’ve gone, as long as they don’t appear and disappear, which doesn’t happen in the real world. Of course, copying every physical metaphors blindly gets you interfaces like the multi-million dollar blunder that was Microsoft Bob, so we need to select our metaphors carefully.
Speed and Joy. All of the above is moot if the interface doesn’t feel snappy. Down to the distinctive bounce-styled animation, we’ve focused on making Panorama be and feel fast. Similarly, in all of our animations and interactions (like how a group runs away if another group is placed on it) we’ve tried to focus on creating a little bit of whimsy.