Firefox/Projects/About:newtab
Jump to navigation
Jump to search
Overview
Drivers: Dan Mills (thunder), Aza Razkin (aza), Edward Lee (Mardak)
Get involved: by hopping onto #labs on irc.mozilla.org or clicking on Discussion and leaving your comments
- Description
- Instead of a blank page, the new tab page should present useful task-centric navigation options based on the user's history.
Goals / Use Cases
- be perceptibly as fast as about:blank to load
- allow user to re-open previously closed tabs
- offer navigation targets that are likely to be of use to the user
- do not break the user's mental "flow" or otherwise interrupt a user task
Non Goals
- act as a content aggregator for "new" material
Download
- Install the latest Firefox 3.1 beta (required)
- Install the latest about:tab extension
History
We've been iterating frequently to find a good balance for the new tab page. Below are an outline of a couple of the major decisions and why we made them.
- No Thumbnails. This is the largest departure from the original mockups and other browsers. After trying a number of different layouts we reached a couple realizations:
- Thumbnails are a high-noise, low-information-density medium. Few people have a strong association between a site and it's zoomed-out view. The association to name and fav-icon is much stronger.
- In small-scale tests, the upper-left corner of a site was much easier to identify a site by than the full site. That's because the upper-left is where the site's logo normally resides.
- Safari's implementation shows a number of the pitfalls. Having looked at a couple folk's screens they often and two or more sites which look almost identical (multiple WordPress logins), sites hidden because of failed logins, and sites indistinguishable because they all approach white.
- The one thing thumbnails give is a visceral feeling. That's lacking in the current design.
- Polite. We've tried a number of ways to make the new tab page polite -- to stay out of your way. In particular, we tried the right side of the screen and the bottom of the screen. Both felt weird, and people remarked on them.
- The most active attempt at being polite was the ill-fated cognitive shield idea. The cognitive shield hid the frequently accessed sites until you moved the mouse. Although the implementation got in the way of the idea (the shield looked clickable, and people got frustrated as it vanished as they tried to use it), it highlighted an interesting point: the ambient news part of the new tab page is actually very useful.
- Grayscale. Originally, we thought that a fully grayscale display (especially of thumbnails) would be beneficial in being polite. The theory seemed to flag in practice: color is a main way of differentiating sites. The current design is mostly grayscale, with favicons in color.
- All of our attempts at adding animation, while sexy, seemed to distract if activation could happen inadvertently.
- Automatic RSS. In almost all versions we've automatically shown RSS feeds from the sites you visit often. It enables a low-cost way of getting ambient-information updates on your sites. This often removes a navigation step of going to a site, finding what's new, and clicking. We originally showed RSS updates in light gray and right justified. Over time, we've made the text darker and left justified it for legibility.
- Search. Search was added only
- Whimsy/Visceral. The only design that had a sense of whimsy or viscerality -- that would cause people to fall in love -- was the cognitive shield animation, which we removed. Adding that whimsy may be as simple as putting in a water-mark logo of Foxkeh or a FF Robot. In the future, we should think about personal usage charts (think simple version of about:me -- did you know you spent 25% of your time on Facebook?, etc) and other forms of whimsy.
- Contextual Actions. We originally tried this as large buttons, but that felt clunky and heavy-weight. In the end, we settled with actionable sentences. That way, it was a bit easier to scan and understand what was going on. Currently the actions are buttons, but it probably makes more sense to make them hyperlinks. The search should queue off the search provider selected in the chrome search-box, or should be settable in page at the location of search. Map currently defaults to Google Maps, but should probably take it's queue from something in the protocol handler?
- In-Page Settings. Instead of forcing people to make changes to the new tab settings in the extensions dialog, we've added a button in context for making the page blank again. Currently, this is a toggle. In a full version, it would bring up an in-page DIV which would have two options. The first would be to have the page be blank or not. The second would be a slider that sets the page-zoom level.
- Undo Close Tab. Most Firefox users don't know that they can undo a tab close. We surface that ability here: if you've just closed a tab, the natural thing to do is open a new one and try to navigate there again. We've oscillated between having that action available in the "You might want to..." section and as a fake infobar. We're still undecided which is better.
- Reordering. From the beginning we had the ability to re-order. Because of this, we don't need a "pin" option. If the user moved something somewhere, that's where they mean it to be.
Unfinished
- The settings icon should not just toggle, but bring up a DIV area with three options. The first is for whether the page should be blank or not. The second is a slider that sets the page-zoom. The third is a slider for determining the max number of frequently viewed sites to show.
- Adding a site is currently incomplete. The flow should be, click add a site, have an auto-suggestion (populated via the awesomebar) box where you type the URL to add, clicking done then adds the new site to page. Escape should cancel out, etc.
- Undo remove. After the user clicks "remove" we need an "undo" functionality a la the one-click undo of Gmail.
- Speed. New tab still loads too slowly. (There are plenty of optimizations opportunities).
Future
- Personas Integration. The new tab page should integrate with personas so that the browser is, in fact, personal on all levels.
- More Contextual Actions.
- Tie in to about:me.
- Contextual Navigation. I'm on X and always go to Y. The new page should make that easy.