Every time you open a new tab, you are opening it to go somewhere. Sometimes it’s to do a search. Sometimes it’s to type in a new URL. Sometimes it’s to check an address you just selected. The only thing you are guaranteed to not want is a blank page.
From the feedback from the last two rounds of new tab concepts, we know that the page needs to load instantly (even a small wait breaks user experience); that it shouldn’t be visually distracting; and that it should be a launch point into your daily activities. One level higher, the distilled design themes were:
- No configuration. Never force the user to set up or fidget with a feature before they use it.
- Streamlined. New tabs are opened to start a new task or navigation. If we have a good idea of what that task is (like mapping an address selected on the last tab) or where you want to go, we should help you do that quickly and efficiently.
- Polite. The page must be instant load, shouldn’t be distracting, or ever get in your way. Being too “clever” results in annoyance: we should be avoid recapitulating Clippy.
Over the last week we’ve gotten back to this project and have come up with an experimental revised design that we believe is consistent with these principles.
Revised Design
The design consists of two components. The quick-access bar on the right, and the contextual actions on the upper left.
Quick-access Bar
It may seem strange that the quick-access strip is along the right of the window. It’s there in order to be polite. If you’ve got your mind on opening a new tab and just entering a url, it’s outside your foveal vision.
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.
Finally, we include the latest updates for each page automatically. For example, both Gmail and Yahoo! Mail provide RSS feeds, so you’ll automatically get to see your latest emails — without hassle or setup — if you visit your email often. You don’t need to know what RSS is to get its benefits.
The thumbnails are supposed to be in grayscale (by using SVG filters), but we weren’t able to implement that for this iteration.
Contextual Actions
If you are performing a task, the new tab page should make it effortless. Generally, you’ll select some text and open a new tab to search for that text. The new tab provides a big button so that becomes a one-click action (in the future, it will use your default search provider). If you’ve selected an address, the new tab provides a one-click action to map it. If you’ve selected a URL, one-click action will open it. The action system in the future will be extensible, and could be connected with or take inspiration from Ubiquity.
Also, in case you’ve just closed a tab you didn’t mean to, there’s a contextual action on the new tab to recover it.
Try It Out
We’ve put together a prototype of this revised design to see how this feels and to get wider feedback and review.
This is a rough-cut prototype: the page loads too slowly, the visual design isn’t right, and you can’t even tell the browser that you don’t want a particular site to show up on the new-tab screen.
This prototype also only works on the latest version of Firefox as it takes advantage of new platform capabilities. Here are the directions for helping test and review the revised design:
- Step 1. Download and install the latest development build of Firefox 3.1.
- Step 2. Download and install the latest version of the New Tab prototype.
- Step 3. Let us know what you think, including what works, what doesn’t and how we can improve the design by commenting here, joining us in IRC at #labs, or getting involved on the wiki.
Open Questions and Problems
Besides problems we know need to be fixed, there are a number of questions we don’t know how to approach yet:
- We fetch the latest updates, via RSS, for your most visited sites. It’s convenient, but is making network connections okay? There’s precedent with live bookmarks.
- How much reaching out is okay? If you’ve selected an address should we just put a map on the new-tab page? If you’ve selected a single word, should we fetch its definition?
- Is there something besides RSS that’s useful to show related to each page?
- What other layouts should we consider?
Background & Other References
- New Tab Concepts
- Firefox 3.1 New Tab Spec
- about:tab New Tab Page from Mozilla Labs
- Source code for the about:tab prototype on hg.mozilla.org
Dan Mills and Ed Lee worked up this prototype. It is based on discussions on the previous blogs posts and comments, IRC, and around the Mozilla offices. Special thanks for input from Sean Martell, Alex Faaborg, and Mike Beltzner. We’re keen to hear your thoughts and opinions!
– Aza Raskin, on behalf of the New Tab design & prototype team
Tags: announcement
Nitpicky comments. @Francisco is right – text updates should be aligned left for scannability (see Nielsen’s explanation of this: http://www.useit.com/alertbox/navigation-menu-alignment.html). Also, bullet point would be nice to distinguish each item. Question: what will the thumbnail image be? Good idea that it is not the entire page (too small) but what part of the page should be shown to make it most useful as a representation?
I updated today from 0.18 (I think) to 0.21 or whatever this is (I forget), and the wonderful about:tab is now completely broken! You had it right with the smaller thumbnails down the right side with the RSS feeds… this new design with either the text list or the 4 large left-aligned thumbnails is uglier, slower, and … wacker.
My biggest problem though, a MUST FIX NOW problem: Now when I create a new tab, “chrome://abouttab/content/tab.html” sits in the location bar with the cursor at the end of it, messing up whatever I was about to type in the AwesomeBar.
I’m about to uninstall this, you guys can let me know when you get it fixed.
Why would anyone open a new tab to click a button because they didn’t mean to close a tab? That functionality doesn’t make sense to me.
The same applies to reopening a closed window.
Those features are fine, but they shouldn’t be on new tabs.
The right aligned text is a terrible idea. Either left align it along an imaginary vertical line, as previously suggested, or move it to the right of the thumbnails and left align it.
As I read more comments, it seems there are a number of people who like the undo closed tab feature. I’ve had that for a long time with Tab Mix Plus, so I don’t want it on the new tab. As I mentioned before, it also doesn’t make sense to create a new tab to reopen a closed tab. Well, OK, I guess I can see the idea of, “Oops! I didn’t mean to close that tab so let me open a new tab and recover the page I was viewing.”
I like TMP’s context menu approach better: their Closed Tabs List can appear in the normal context menu as well as the tab’s context menu. TMP doesn’t offer that on the Tools menu, but that’s a likely place, too. The idea is that you closed a tab, so you’re thinking in terms of a tab you want to recover, not a page you want to reload in a new tab.
@TokyoJerry
Try Tab Mix Plus: https://addons.mozilla.org/en-US/firefox/addon/1122
It gives you a little down-arrow button on the tab bar that shows all tabs by title.
Fantastic Feature!
Make it standard in 3.5! One thing: the header text “frequently visited sites” is to close to whit to make it easy to read.
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 clipboard contents-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. This concept is better in that situation because it allows arranging the information better.
I propose 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/speed-dial 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. The clipboard contents are a separate matter. Since I imagine myself making much more use of the context menu for a selection than directing the browser from the clipboard’s contents, I suggest that examining the clipboard be a user-directed feature.
I liked the suggestion of allowing the user to replace the current tab’s contents with the dashboard tab, rather than requiring a new tab to access it (from http://www.azarask.in/blog/post/firefox-31-new-tab-spec).
I guess I’m saying that the dashboard tab should be something separate from new tabs. That makes the functionality accessible to those that like blank new tabs or want their home page on new tabs. It also makes it accessible as an overlay or replacement on the current tab without the need to create a new tab and then close the current tab. Then, examining the selection only occurs when invoking the dashboard tab from the selection and examining the clipboard only occurs when directed. (There may be users that want the clipboard considered every time, so there might be an option to enable that.)
Searching should be done from the Awesome Bar. Don’t complicate the situation with additional input boxes.
(The rest of this comment is a copy of my comment on Aza’s blog.)
“Didn’t mean to close that Foo tab? Undo!” -> “Reopen tab ‘Foo’”
I guess that the reopen action should stay because it is more discoverable than the menu item “History” -> “Recently closed tabs”.
I agree with Ami: a very common use case is when you want to open a tab with the same history as an existing tab. It is probably more common than searching for a word in a new tab. IE solves this problem elegantly; I think I would prefer that to the proposed design.
As a compromise, the previous tab’s content can be one of the context items shown in the new tab, and when it is opened it can contain the history of the old tab.
If you have context-sensitive content, it should be according to the text selected before opening the new tab, as well as the text typed in the Awesome Bar. As you type in the Awesome Bar, the results should replace the initial contents of the window. (The downside of this is when you want to see a long list of pages matching your Awesome Bar query but want a small window.) They should appear after some delay to avoid slowing down your typing.
To be honest, I open a new tab (that is, CTRL-T) most often to fast-scroll to the end of my tab list (I’ve worked out a system for the fastest way to scroll through a long list of open tabs: CTRL-T to get to the end, then use the pulldown list on the right to go back to the beginning, and it’s become habit. Sorry. Usability tangent).
Anyway, I really like the new look. Here’s what struck me from the image:
1. This is the major one: no pulldown list in the search field. The engines listed in the upper right *absolutely* need to be there, otherwise you kill much of the gain you expect to get from fast searching. If we, say, copy something a proper noun from a website and want to search Wikipedia or a search engine other than Google, the old way of 1. open new tab 2. paste in upper right 3. hit enter will still be the fastest route. (Not to mention you’ll introduce an annoying inconsistency in having two search fields that work in different ways. From a user’s perspective: “I can search amazon for my text *there*! Why can’t I search amazon for my text *here*? They’re both search!”)
2. Don’t go grayscale on the thumbnails. Color is a quick-identifier for websites (along with favicons, +1 for the person who mentioned that). You’ll know a website faster by looking at its color scheme than reading the text on the left.
3. I love the automatic-copying of text idea. The browser should check if all the text in the clipboard is a valid url template, and if so slap a big “BROWSE TO _____ ” button at the top. (Disclosure: my second-most frequent use for CTRL-T is to open a new new window to browse to a copied URL. That’s got to be such a common and–or at least obvious–task, though; is it just not shown in the screenshot?)
-Is there a way to reinitialize every thing (after edit or move up or move down a link)?
-what about middle clic to open in a new tab?
-what about scrolling for low screen resolution
happy to see this extension updated every day, nice and useful
The new version 0.0.27 have problem with cyrillic texts like this http://img19.imageshack.us/my.php?image=newtab.jpg in previous version all was cool.
There is problem in new versions 0.0.27 & 0.0.28 with cyrillic texts http://img149.imageshack.us/img149/4131/newtab.jpg &
http://img90.imageshack.us/img90/6357/newtab1.jpg
Wow. Almost every single suggestion/criticism I’ve made so far has already been addressed. I’m really impressed, not to say very pleased!
Continuing on my nit-picking, I really miss the URLs appearing on the status bar, particularly for feed links. Also, I see encoding problems on the Google Reader feed. The feed seems to be fully valid UTF-8, yet the New Tab page interprets it as ISO-8859-1. Firefox’s standard feed preview shows it perfectly.
Nice job.
Maybe you will be inspired by http://keyboardr.com/
thanx for your work.
The new tab shows excerpts for some pages from the history (recently
updated pages? Or what?)
Charset handling for these excerpts seems to be broken.
E.g., I have this entry:
9. heise online
edit
done
* Configure feeds!
* Zypries stemmt sich gegen Vertrag zu Kinderporno-Sperren
* Europäischer Vermessungssatellit soll morgen starten
* Ausblick auf OpenOffice 3.1
really nice this feature, still needs a bit improvement, but I really hope it’ll make it in ff 3.5!
Latest version have bug with encodings in feed. Previus version show utf-8 encoded cyrilic feeds normal – latest use wrong encoding.
This doesn’t work properly with the Tab Mix Plus extension. It’s simple to work around the problem by setting new tabs to open to chrome:abouttab/content/text.html in the Tab Mix Plus options.
When I do it this way, though, the address bar isn’t focused when the new tab is opened. I have to wait for the page to load before I can focus the address bar with CTRL-L.
This doesn’t seem like a problem with the Tab Mix Plus extension because that user location is designed to open a normal page and you wouldn’t want the address bar focused.
This doesn’t happen with the “Fast Dial” extension which also shows itself in new tabs, but it does happen with the “Auto Dial” extension.
So, I guess the question is, how is “Fast Dial” different from extensions like “Auto Dial” and “About:Tab”?
Thank you.
–
– Ghodmode
Thanks amau, I have been struggling for a week to get this and Tab Mix Plus working nicely together.
I just installed version 0.0.28, and am not completely convinced.
Firstly, I didn’t see any graphics/page previews, I had to click on the star thingie at the bottom right, which caused page previews to appear on the left side of the window while all screenshots show them on the right side?
Secondly, a question: in the list of frequently visited sites, I see an “edit” thingie when the mouse hovers over the entries; clicking on it displays a checkmark instead of the favicon and the text changes to “done”.
I have no idea what that does/is good for: looks like some tasks/todo list concept but that just doesn’t make sense for a “frequently visited sites” list…
Instead of displaying a search/open button on the new tab, an alternative would be for “new tab” to just initialise the address bar or search field with the content of the clipboard (putting the focus depending on where it put data), so that I can simply hit return after opening a new tab (so I second the suggestion made in another comment).
Reopening the tab I just closed is just as easily done by control-clicking the entry in the history menu. It is seldom used, and the new tab only displays the most recently closed page instead of a list, and only immediately after closing a tab.
By the way, I noticed that this only works when opening a new tab but not for the first tab in a new window? (^N displays a new window with an empty tab).
All things considered, I won’t use this at work for privacy reasons. Might use it at home though.
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. A large context menu is worse than none as one spends an inordinate amount of time searching for the desired command. 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.
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. As for reacting to the clipboard, that should be on demand from a context menu item or the Edit menu rather than automatic on opening a new tab. 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 (View | Dashboard?).
yeah really like this addon, but still needs a bit improvement.
Hope this will make it in FF 3.5!!
could you make the bookmark toolbar show on the about:tab page. similar to what google chrome does.
Let me add another vote for offering a blank New Tab, at least as an option. Adding lots of flashy new features is fun, but sometimes people already know what they want, and aren’t in the mood to wait while a flashy Auto Dial type display generates.
One question – what is purpose of switching to thumbs? Because for me it looks like only for fun…But maybe there is something behind that.
This is a great improvement over displaying just a blank page when a user opens a new tab, but we also really need the option to load the user’s home-page when a new tab is started.
not too bad! now, if only we could get that “open link in a new window” (right click on link with mouse) away or atleast “in a new tab” on top like google chrome.
Luv the new redesign with the circle(0.0.33), how it hides the websites unless you mouse over the page:)
Nice add-on. GJ Mozilla team.
I’d like about:tab to remember the tabs settings (their position and do not show deleted ones)
About the design, I think really pretty the circle presentation. Why not keeping the thumbs into the circle and showing inside the circle more detail about the thumb ?
Sorry to say it out loud. But it is ugly. Horrifying ugly. Just leave it an option (so I can turn it off)
Btw, please take te time to comment on this page without JS (and then try to make sense of th error-msg)…
It used to work (partly) – the version 0.34 shows a blank page for me.
Any idea about how to change that?
What happend with the circle?
I don’t like the enormous list of frequently visited sites. Its too big and not clear enough to quickly identify the site I want to go to
Why not include both options to search for copied text AND reopen closed tabs?
Any plan for adding a search box?
I’m sorry to say that I’m not liking this new design…
Will we be able to switch it off? UI sugar, I say.
/** WHAT I MISS **/
Since some years I really miss a browser, where i can move two ore more tabs side on side within one window !
As I can dock source files within *eclipse* and *visual studio*…
give me a blank new tab. I dont want the world to know what I was browsing in private when I open a new tab (that shows my previos closed pages and searches) in public.
leave out the eyecandy please…
let me disable it at least.
I landed here because Ctrl-T is NOT showing a blank tab in firefox for some reason.
I have a request for your new “New Tab” page.
I like the new one but PLEASE add the following feature:
As a user, I want an integrated ToDo list in my homepage. I want to be able to edit this ToDo list using simple tags or keyword, such as “Trip to Cuba”, ot “Check Bank account”.
This way, every time I open a tab I will get reminded to do one of those tasks!
At the moment, most “New Tab” pages include suggestions for website that you frequently visit. Thus, I find myself opening a new tab to complete a task but instead I wander off and visit one of my favorite websites. Good for fun, but not productive.
I believe that this is something that many users will find useful.
Regards,
Argyrios
often find myself opening a new tab to search for a specific thing or do a specific task, but instead I
sorry. i just want a blank tab. i was happy the way it was. the new way is crap!
Removing the close tab function where only one tab is opened is a mistake. If one has “Show my windows and tabs from last time” set, closing Firefox ensures that the next time you start it you get the last tab loaded even though you may not have wanted to see it again. The right behavior is to allow closing the last tab and the browser separately as it happened in the previous versions. This has the added benefit of closing the last tab to get a fresh tab if you are done with the current content and would like all the flash, etc. to be unloaded.
Closing the browser when trying to close the last tab is equally annoying. It is equivalent to closing the browser with the last tab still showing content. For a discussion of why Firefox should revert to the previous tab behavior see above.
Um, sorry to be old fartish but you say “The only thing you are guaranteed to not want is a blank page.”
Well, this user does want a blank page and doesn’t like having a whole pile of stuff appear that he doesn’t want. Yes, yes, yes, I see why most people think it’s a good idea and it’s a super default, and so on.
But please, I like very quiet software, software that doesn’t do anything unless I ask it to, so can I please have a way of saying that I want a blank page when I ask for a new tab? I’m often opening a blank page then calling up a bookmarked page into it from the Bookmarks menu. There might be better ways of doing that, but that’s the way I like doing it, and I can’t be bothered with remembering zillions of short-cuts and features (you guys might find that age affects you that way one day!).
It’s a nice new tab page, it’s lovely – I just want the option to have something different please!
Oh, I see now that I’m down at the bottom that there’s a pile of us “leave-us-aloner”s!
Software design lesson one – never assume that all your users work the way you think is best!
Software design lesson two – always offer a way to configure the software back to the old version!