I'm Aza Raskin @azaaza. I make shiny things. I simplify.

I'm the Creative Lead for Firefox.

 

Firefox 3.1 New Tab Specification

Sponsored by

Taking into account all of the feedback from the New Tab concept post, we’ve been working on the behavior for the streamlined New Tab in Firefox 3.1. The esteemed Asaf Romano is leading the development charge.

Adding a new search mechanism was the most contentious issue from the original proposal, so it’s been removed from the specification. The other main pieces of feedback we got were (a) that the page needs to load super fast, and (b) that it shouldn’t be visually distracting. Summing up the requirements into four themes we get:

Polite. The page must be super-fast to load, shouldn’t be distracting, or get in your way.

Quick access. Provide a fast way to open the pages you start navigation tasks with or for reclaiming closed tabs and windows. This is especially useful for heavy mouse users.

Streamline. New tabs are opened to start a new task. If we have a good idea of what that task is (like mapping an address selected on the last tab), we should simply and streamline that task in a polite way.

No configuration. Never force the user to set up or fidget with a feature before they use it.

New Tab Screen

There are three parts to the new tab screen. A quick-access strip along the bottom, a set of contextual actions in the upper left, and a tab and window recovery link in the upper right.

New Tab For FF 3.1

Note that the graphics here schematic — the icons and exact styling isn’t right. We are looking for help here, so feel free to jump in by mocking something up, putting it on Flickr, tagging it “mozconcept”, and blogging about it. Adding a comment here wouldn’t hurt either.

Let’s take the parts one at a time.

Quick-access Strip

It may seem slightly strange the quick-access strip is along the bottom of the window. It’s there in order to be polite and not distract you if you’ve got your mind on opening a new tab and just entering a url. The bottom of the window not in your foveal vision, so if you are looking at the URL bar, you won’t notice the strip. It’s the best of both worlds: the cleanliness of a blank page, and the convenience of speed dial.

The quick-access strip is determined by frecency — the same metric that the Awesome Bar uses — with one twist. Instead of raw frecency over all sites visited, we are only considering those sites that start history “strands”. That is, we are using the most frecent sites that you actually begin browsing from. The versatile Places feature of Firefox 3 makes this possible.

The quick-access strip itself is made up of a thumbnail, title, favicon, and the last couple entries from the page’s RSS feed. It’s the last which is most interesting. Without the user ever having to know what RSS is, they still get the benefits of content syndication. For example, both Gmail and Yahoo! Mail provide RSS feeds, so you’ll automatically get to see your latest emails — without hassle or setup. Pretty good for a zero configuration interface. (Thanks to Ambient News for the inspiration for including RSS).

To enhance uncluttered-look, everything on the page is in grayscale and slightly faded. When the mouse gets near the strip, the colors fade back to being resaturated. These effects are possible by Robert O’Callahan and Vladimir Vukićević’s awesome work on SVG effects for HTML content, which is new in Firefox 3.1.

Contextual Actions

Copy-navigate-paste is a common interaction on the web that we can streamline. These patterns should sound drudgingly familiar: Select some text, open a new tab, and do a Web search/Wikipedia search; Select an address, open a new tab, go to a mapping service, paste it in; Select a single word, open a new tab, go to a dictionary, paste it in, …

These are all things we can turn into a single click with contextual actions on the New Tab page.

New Tab For FF 3.1 Actions

The actions only show up when they are apropos, based on what you selected in the previous tab. If you’ve selected an address and open a new tab, you’ll be presented with a single-click way to map it, etc.

Eventually, these contextual actions can be a modular extension point, or even be integrated from Ubiquity.

Update: A couple comments point out that there needs to be a way to change providers for the contextual actions. I forgot to include that in this write-up, but I’ll be adding it here soon.

Tab/Window Recovery

Clicking on the recover tabs and windows link slides the page over (iPhone style) to a set of thumbnails of recently closed tabs and windows.

New Tab For FF 3.1 Tab Recovery

Why is it on a separate screen? Because recovering an accidentally closed tab doesn’t happen so often that it warrants cluttering the new tab screen. The correct time to surface an affordance for quickly undoing an accidental close of a tab is just after a tab is closed, not on the new tab screen.

Slide animation between new tab screen and tab recovery screen

As an added benefit, this feature means we can remove the dialog box that asks users whether they want to restore a previous session or start anew upon Firefox start-up. That’s a question you normally don’t care about, and that has no easy way to undo a wrong choice. It’s removal, by providing a better mechanism on the new tab page, is a big win.

Contributors

The brainstorming behind this specification was a group effort. Many thanks to Asaf Romano, Alex Faaborg, Jenny Boriss, Mike Beltzner, Madhava Enros, and Vladimir Vukićević. Special thanks to Edward Lee for the AutoDial add-on, and Atul Varma for the Ambient News add-on.

RT @azaaza Firefox 3.1 New Tab Specification | Follow @azaaza on Twitter | All blog posts

View all 42 comments



Chris

Excellent. Why not also provide links from this page to open up history and favourites, so people can get more detail?

I’ve always thought these would be better in tabs
(about:history and about:favorites) rather than a dialog box.



Chris

How about integrating contextual actions with Firefox’s protocol handlers (http://developer.mozilla.org/en/Web-based_protocol_handlers)?
For example, if you have a mailto: handler assigned, the new tab page will offer a contextual action to email someone, etc for map:, tel: cal:.
You’d need to merge the management tools, so adding a new protocol handler would also add your contextual actions.



Corey Burger

When you list actions like Map or Translate, you absolutely must list what provider they are using, ie: google map vs openstreetmap vs yahoo vs etc or google translate vs babelfish.


Microsoft has already created a specification to allow this exact behavior on new tabs (and in other places) called Accelerators (formerly Activities)

It already has a specification (OpenService) that would fit perfectly in this context.

We should consider using the OpenService specification to define what actions would be presented on this page for selected content:

http://msdn.microsoft.com/en-us/library/cc289775(VS.85).aspx



CW

Can you give users the ability to put tabs on the side of the screen?

I know there are add-ons that enable this to some extent, but these add-ons tend to clash. (tab sidebar vs. tmp, for example)



James Heaver

Excellent

That all looks fantastic, particularly the restore session aspect.



Nicolas Kruchten

Great concepts, I’m excited! There’s an extension I really like called Context Search, which allows me to very quickly search in a new tab with the mouse: select text, right click, and there’s a sub-menu that appears with all of my mycroft search engines listed. That means I can select text and look it up right away in gmaps, google images, wikipedia, google, dictionary etc, whatever I choose. That’s some awesome integration.

So I recommend that the ’search’ part of the new tab provide the same pulldown as the search bar in the corner, not just e.g. google and wikipedia. That would enable users to easily choose what search engines appear there, using an already-familier and already-built interface.



Dan

I very often open a new tab and then load the homepage in it. On my desktop I can do this by middle-clicking the home button, but on my laptop I don’t use middle-click (because it’s awkward) so it’s Ctrl+T, Alt+Home or click New Tab, click Home Page. I therefore propose that this new about:blank has a very simple way of getting to the home page.



Kurt (supernova_00)

Should provide a list of recently starred bookmarks. A lot of users can not find these at all and this would probably be the absolute best place to expose these.


It seems like the net tab page would become some sort of dashboard where a user gets quick access to the most probable tasks.

I think the approach is fine, provide we keep one of the most important features of dashboards: customization. What may be good for some users may not be necessary for others.

I would like to have is all the components to be sort of widgets a user can remove and arrange at will:
- the search widget
- popular pages, customize: show feed items on/off
- context search widget/accelerators
- recently closed tabs widget
- and, my personal favorite: a new feed items widget, which works somewhat similar to Atul’s Ambient News except that it filters out already visited feed items and they are not grouped by feed but mixed and ranked by a index that considers which feeds get the most feed items visited, the highest % of items visited, and recency. So for example if I visit 90% of all feed items of a feed it is most likely I would like to visit new ones, on the other hand if a feed has 100 new feed items a day but I only visit two or three of them it should rank lower. Ideally it could even identify which tags I prefer for a certain feed.

The discussion would then move to what should be the default layout of this new tab dashboard: my personal take: search, closed tabs, popular pages and feeds.

I don’t think a list of context search options is the best option for speeding data brokering. Instead, I find IE8’s automatically prompting the Accelerator’s menu on text selections a more intuitive, discoverable, faster way of moving data around. We could do the same either supporting Accelerators (open services) or just bringing the added search plugins a la Context Search (*perhaps* with an option for the user to mark which ones he want to see in the context menu).

I like the idea of empowering the new tab page a lot!



OldMachine

How do you expect this to affect performance? Firefox already has one of the most sluggish UIs, but opening new tabs is fortunately still instantaneous on my computer. Make sure you don’t break this like text zoom was broken in Fx 3 (it was instantaneous in Fx 2, became sluggish in Fx 3).

And (most outrageous!), mozilla.com still claims a 233 MHz Pentium II with 64 MB of RAM to be a minimum requirement for Fx 3 … has anyone actually tried using it on such a slow computer? (You can actually see the menus being drawn when you open them.) Well, a 233 MHz CPU is really old, yes … I don’t expect Fx to run well on such an old computer. But it should provide a decent user experience on at least any machine from the last 6 years, not just the most modern computer. Don’t leave those people behind who cannot afford to buy a new machine every 2-3 years. A decent experience means that at least the UI should react instantaneously.



Philipp

As long as it will be customizeable and about:blank will be renamed I like it :D

What do you think about showing the “special result” of Google (like it’s shown if you search for a calculation or currency conversion) if there is one for the clipboard content?



Simon

IMHO dividing this page in two (recently closed tabs/windows being the second part) robs it quite some of its simplicity. Otherwise I like it.

One question: How keyboard friendly will this page be?


Don’t we want to encourage people highlighting text on a page, right clicking on the highligthed text, and launch those actions from the context menu?


What about a good way to “pin” a page to your empty tab page?


Will FF3.1 get those thumbnails into places, too?


What overlap does ‘Contextual Actions’ have with ‘Ubiquity’?



OldMachine

As some people said, just make sure that we’ll still be able to use a genuinely blank about:blank page without installing any extra extensions … With that you’ll avoid most complaints, and everyone will be happy.


re: Firefox’s protocol handlers

Being able to use those automatically would be great, but maybe if the protocol extenders could additionally have validation built into them too, some sort of regex which showed when the arguement was valid. This would allow only showing the mailto: handler on a blank tab when the clipboard contains a match for \b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}\b


What can I say. It sounds great! You have really thought this through and that is what makes Firefox shine! How every feature is made as easy as possible.


I hope this is optional. Cos I use Blank page to hide what i am working on:)


I’m not sure sure about dropping the crash recovery dialog. For one, we have seen people with obscene amount of tabs, restoring all of them individually sounds painful. Of course you could just add a “restore all” UI to the tab recovery pane.

Additionally though, I find the UE cumbersome. Firefox crashes, you restart, no UI to recover. You open a new tab, then you click on the other pane, and then you can continue your work.

I’d rather leave the dialog in, and have the tab restore for the case where one of your recovered tabs actually crashes instantly.


Re protocol handlers, those are really just that, they handle based on spec of a url, a url in a given format. We could probably detect a url that’d be handled by a protocol handler and adjust the UI for “goto URL” to say “open Gmail for” or something. I’m slightly scared of the composition here and l10n, but that’s probably cool.

A l10n-related question, how are we going to detect the type of selection? URLs and email sound trivial, but I’m not sure how addresses would work, for example.



mark123

Tab related stuff I would like to change in FF 3.1 :-)

1) Loading a page in a tab should never block other tabs or the whole browser.

2) I don’t like the ordering of the “open in new window” and “open in new tab” items in the url context-menu
[when you right-click on a url (link)]. The ordering of these items should be “open in new tab” and then
“open in new window” (actually I’ve never used the context menu’s “open in a new windows” at all)

3) Whenever a new page is opened (in the foreground) in the new tab, the mouse-focus should be set automatically to this new tab.
That way you could immediately start scrolling within this page without having to click on the page to get the mouse-focus.

4) I like the concept of the speed-dial add-on. Frankly that’s all I need.
The only thing I would like to add is the idea of thematically organised speed-dial pages.
For instance in the morning when I start my work at the university office i would like to speed-dial to a set of
pages that I always use for my studies. But after 2 hours of work I get tired
and I start looking for a car (jep I need one right now:).
Now while I’m looking for new cars I would like to switch to a different set of speed dial pages
(mainly related to car vendors, car forums etc.). After finishing searching a new car, it might start looking
for a new appartment, again i need another speed-dial start page.
Switching around speed-dial pages should be fast and easy.

One could easily extend this concept using bookmarks. While I’m surfing the web using my ‘university’ speed dial page I will certainly bookmark some new interesting pages. These pages should automatically
be related to the ‘university’ speed-dial page. So when I open the ‘university’ speed-dial tab, there might be
a quick access location on this page/tab, where i find all my related bookmarks. Because I don’t need my ‘funny jokes’ bookamrks while I’m looking up physical constants.

kinda automatically bookmark tagging feature.

5) List of some functionality now provided by add-ons that should be builtin:

Plain Text Links (Treat plain text urls as links)
Tab Kit (Tab grouping)
New Tab Button on Tab Right (adds a new tab button like IE7). btw. this one is a UI mmust have
Duplicate Tab (Duplicates a tab including the tab’s history)
Easy DragToGo (Allows you to opn a new tab using drag&drop gestures easier)
Context Search (Expands the context menu’s ‘Search for’ item into a list of search engines)


This is good, but I think we can do better. In particular, why should the user actually have to CLICK “Map 3312 Main Street, Pacifica” to see a map? As you always say, “Don’t force the user to ask for more content: just give it to them”.

Instead, all this extra content should load asynchronously right into the new tab page itself. This way you wouldn’t have to wait if you weren’t interested in the content, and you wouldn’t have to click if you were.

More thoughts and some mockups here: http://www.pleaselistencarefully.com/2008/10/thoughts-on-firefox-31-new-tab-page.html


Great idea!
I really hope this will be implemented!

However – the right side of the contextual actions is void, is it?
For exemple, to answer at Tom Lehman’s proposal, it could show a sirectly a map in the cas of an address – in grayscales first, getting colored when the mouse moves on it.
And of course, not only for maps…


Nice !

I wonder if it would be possible to switch to this kind of view not only when you create a new tab, but also on an existing tab, in order to change its content.


Just a thought… this new tab page, as the new tab switching interface, isn’t something “not essential”? Shouldn’t them come as extensions, packaged and installed with Firefox as the DOM Inspector is? This way those who do not want them (or need a streamlined, faster browser) could completely remove them, instead of just disabling then using (hidden!) preferences?

Definitely, they are not “structural” and no other feature depend on them, so they could come as extensions (also easier to update).


Wow, It’s great I love to see these new changes



Philip

@previous posters:

If you automatically search for maps, definitions, etc., you can accidentally violate the user’s privacy. That’s one more bonus of using maps, dictionaries etc. that are on your computer. But Microsoft’s idea of context menu is what I’ve considered the best solution: If the user rolls over a menu item, show a preview of the action result. For example when the user rolls over the menu item that is for looking up words, then show the definition of the word, extracted from the page.


@Philip:

The goal isn’t to maximize privacy, the goal is to optimize the user experience. What is the cost of the privacy violation in this case? Effectively zero.



Klonos

Perhaps not just propose contextual action based only on the last selected text, but…

… having an actions storage mechanism that stores the last TYPE of text copied matching an action….

example:

… normally, if you copy some email and do something with that copied address outside the browser, then return and copy a text that you need translated or googled/searched, this new text and it’s most-likely action replaces the mail address. What should happen is that the email address is not replaced, but stored for future use until you select another email address. Only then should the first mail address selected be replaced by the new. Even better… have a list of say 3 or 5 recently selected mail addresses. Same goes for addresses to be mapped or events to be added to calendar.

Even better have these ‘types’ or ‘kinds’ of actions act like the awesomebar, but separately only for email addresses in the email-address-actionbar only events in the calendar-actionbar etc..

Don’t know if I made my point clear ?



Jonathan

It would be nice if there was an API available to add-ons for presenting themselves on the new tab page, so that multiple add-ons can cooperate instead of clobbering one another. Things like being able to view my delicious bookmarks and so forth come to mind.


I’m a little with dreadnaut on this… but there is a simple fix… how about having three different styles of New Tab action that we as users can choose from in the Options/Tabs menu? The three styles I’m thinking of would look like this:

1. Traditional New Tab blank page… maybe with the option of selecting the color of the page.

2. All-in-one New Tab like the one being proposed here, possibly with customizable “dashboard” options. This would probably be default.

3. “Smart Tab”… which I would see as a an option where the previous Copied string was input into the tab automatically. If the selected string is an email address containing an @ character, then whatever webmail client is in Firefox would be opened in a New Tab, if there is no webmail client selected, then it would just do a search. If the string is obviously a site address, then the Smart Tab would attempt to open it up immediately, no Paste, Go actions required. If the string is neither an email address or a web address, then the Smart Tab would open up whatever search engine is selected in the Search Bar and proceed to do a search.

Maybe this third option could have it’s own separate keystroke and be a totally new function all-together… although it could probably be handled better by a 3rd party plug-in anyway.


A fourth rather simple option would be that the New Tab always opens a selected bookmark… basically combining the Home and New Tab buttons into one simple function… which would actually handle many of the other suggestions without clogging up the UI with even more menus.


I just upgraded Foxit Reader. The new version has a feature: if you open it without a PDF document it shows you two big buttons in the middle of the window (supposedly common actions). As unprepared as I was I had to stare at them for 5 seconds before I realized that I can still use the menu and select the option that I really need. This seems to be a general problem with these solutions – they force you to make a choice, even if your ideal choice isn’t presented at all. I hope the new tab solution will work around this problem somehow (maybe the dimmed-down colors will prevent it from happening).



Alexwebmaster

Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru



Rob

When I open a new tab, I normally intend to type a URI. Sometimes, I use a keyword search, so I might type the keyword and then paste some text, but usually, I don’t paste text to the awesome bar. Consequently, I don’t expect to make use of the dynamic selection-based actions as proposed from a new tab created with Ctrl-T.

After selecting text, the obvious thing to do is use the context menu. If the context menu were smart enough and arranged well enough, it should provide much of what I want directly. However, a large context menu is worse than none as one spends an inordinate amount of time searching for the desired command.

I propose, therefore, that the context menu — at least one not augmented by add-ons — should be succinct and meaningful. The context menu should be customizable to permit users to reorder, add, or eliminate entries on-the-fly. (By that I mean that there can be an editor accessible from, say, the Options dialog that permits adjusting the various context menus, but that editor should be accessible from the context menu itself.) That way, a user can change the context menu the instant the fancy strikes to change it.

One of the options to include in the context menu, then, is the proposed dashboard tab. Thus, if the context menu doesn’t offer, with a relatively small number of pertinent choices, the action desired, the dashboard tab is sure to offer it. In that case, all of the suggested functionality related to the selection has bearing.

Thus, a new tab can reasonably contain the thumbnails and ability to search history, bookmarks, etc. as discussed herein, but ought not to react to the selection. If that dashboard tab is selected from the context menu after selecting text on a page, then the dashboard tab can include selection-specific content. Finally, the suggestion to replace the current tab’s contents with the dashboard tab, rather than requiring a new tab to access it, completes the picture nicely.


One thing that bothers me about this is the frequent references to Mac OS features- Expose, iPhone sliding screens, etc.

I’m sure you won’t do this, but to be clear: Please don’t force that stuff on me. I use Windows, and Mac Stuff just looks broken.


In calling the structure of the chromosome fibres a code-script we mean that the all-penetrating mind, once conceived by Laplace, to which every causal connection lay immediately open, could tell from their structure whether the egg would develop, under suitable conditions, into a black cock or into a speckled hen, into a fly or a maize plant, a rhododendron, a beetle, a mouse or a woman. ,


Мужчины, которые не прощают женщинам их маленьких недостатков, никогда не насладятся их великими достоинствами!


When you list actions like Map or Translate, you absolutely must list what provider they are using, ie: google map vs openstreetmap vs yahoo vs etc or google translate vs babelfish.


Leave a Comment