August 20, 2008
I’ve been posting lately about how browsing in Firefox could be greatly enhanced with visual navigation. Last month, I posted about Control+Tab, a new Firefox 3.1 feature which is the first step in this direction. Now, let’s take another step by improving Control+Tab to meet the needs of more users.
Design for everyone is hard…
The hardest thing about designing for Firefox is that the solutions have to meet the needs of everyone, and everyone is different. There are generalizations that can be made about how humans tend to behave, but each person works and even thinks differently – even from moment to moment. So, good designs for Firefox should support different ways of working and thinking.
An issue with the current design of Control+Tab is that it supports one way of working but neglects others. For people that often switch between two tabs, this is an excellent quick key-stroke. But for people who switch between three or four or hundreds of tabs, it isn’t very efficient. A better system would adapt as a user’s browsing session changes and allow for multiple modes of use, drawing on the many ways our memory encodes and recalls items.
…let’s go shopping (for existing solutions)!
If you’re on Windows or Gnome/KDE, hit Alt+Tab (Cmd+Tab on Mac). What you should see is a visual preview of your running windows or applications, and likely in most-recently-used order. This display does some important things that the new Control+Tab feature doesn’t. Most importantly, it allows for visual search as well as quick-switching. If your last used item is in your short-term memory, it’s a quick keystroke to flip back to it – just like Control+Tab. However, if you have an idea of what something looks like, just visually scan to the match. If your item is recent, tab over to it – if not select it with your cursor. Another benefit of this system is that it gives you a survey of your whole inventory so you can get a sense of not only what kinds of items are open, but how much content there is. This is a positive solution for operating systems, and I believe it’s a positive solution for Firefox too.
This method even integrates well with operating system seach: Cmd, Alt, and Ctrl are all near each other, so you change between OS-wide and browser-wide preview by a shift of the thumb. It could also be designed to have a visual look identical to the current OS previews.
This new version would also solve some of the general problems with Control+Tab, such as only showing three previews at once and having to wait for distracting animations. Also, by introducing grid-view, the linear view of Control+Tab would no longer compete visually with the linear list of tabs in the shelf chrome.
This is, like the previous Control-Tab, is only a step in the right direction. There will be plenty more to do from here. For instance, application icons are recognizable and therefore don’t need labels – tabs probably do. There are also ways to enable search and content organization from this window eventually – but I’ll blog about that later. For now, I just want to continue the discussion on Control+Tab that’s currently going on in bugs and hopefully reach a consensus on what to build for 3.1.
June 8, 2008
There’s been a lot of recent forum and blog posts on the subject of tabs. Brian Clark’s and Aza Raskin’s posts got me thinking about how tabs are one of the tiny changes that redefined the web browsing experience, but they still have plenty of shortcomings. These shortcomings are primarily in the areas of preview and search, and are exacerbated when people use a superhuman number of tabs at once. The system wasn’t quite designed for this, but if it’s how people work best the system needs to adjust – not the users.
Here’s some problem with the current system:
- No way to preview content in tabs
- Current tab disambiguation with favicon and title often identical for many tabs
- When many tabs are open, most are obscured under excess tab menu. This prevents the user from quickly finding the tab they want and getting a sense of how many tabs they have open (see Aza’s post).
- No way to detect multiple instances of the same tab.
- No way to search open tabs textually or visually.
- No way to tell loading status of tabbed content.
Over the past couple weeks, I’ve been sketching some possible first steps at solutions to these problems.
Prototype 1: Tab preview
The first prototype is for a quick way to preview tabbed content as thumbnails. The user goes to any tab and drags down to see thumbnail previews of the tabs at the top. If the user continues to pull down, he sees thumbnails of previously obscured tabs. If a tab is only partially loaded, this is represented by a semi-transparent loaded bar over the tab.
This addresses the problem of many tabs looking identical by allowing the user to get a quick view of what’s open and what’s loaded.
The user can drag a tab to the left, right, or bottom of the screen to move all of their tab previews.
Sketch 2: Tab Management
These sketches are for a separate “tab management” window, where the user can organize and view tabs visually. They can view open tabs as a grid, a list, or in “scatter,” mode. Scatter mode provides the user with a free-form arrangement of tabs (and possibly history) which they can organize spatially. The user can choose to view their tabs in scatter mode:
- By site. This groups tabs together by what domain they were reached through. If the user has ten articles open from the New York Times, these will be grouped together with the New York Times homepage being largest.
- By topic. This groups tabs together by what searches they were accessed through. If the user has performed a Google search on San Francisco restaurants, all tabs resulting from this search are grouped together.
- By recency & frequency. Using the idea behind the Awesomebar, sites which are visited frequently and recently appear larger in tab view and are thus easier and faster to recognize and click.
- In freeform. The user can resize and move tabs, grouping them in whatever way fits with their working model for a project. They can add labels and fields to help create organizational systems and save their tab configurations for future sessions.
More details and sketches on these prototypes can be found in the wiki. I’d love to hear thoughts and feedback. These are in no way final solutions, but more of a way to move the discussion forward by addressing specific tab concerns. So, please feel free to reply to this post or email at jboriss at mozilla dot com.