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

I'm the Creative Lead for Firefox.

 

Firefox New Tab: Visual Update

Sponsored by

All has been quiet on the new tab front for the last couple of weeks. We’ve been up to two things in the process of getting the new tab ready for potential uplift into Firefox. The first is we’ve been working on an overview of how the add-on was designed including performance and security. If you’ve ever wanted to get a guided tour of how something like the new tab is implemented, check it out. The second thing we’ve been working on is finding a visual style that blends in with Firefox.

Inspired by the horizontal styling of the thumbnails in Chris Stone’s answer to the call for participation, we’ve got some new designs that incorporate the learnings from the last 36 revisions while finally making it feel much more Firefox-y. Unfortunately, we haven’t implemented the new style yet so for the time being, it’s see only.

By using a horizontal thumbnail clipped from the top of a page, we are capturing the site’s logo and masthead — the most visually distinctive aspect of a web page. By default only the top two visited sites get a visual treatment (to remove visual clutter), but more can be turned on by clicking the little edit icon. We’ve gone to a two-column format to better use the available space. If you have an extra wide monitor, you may get more columns.

All of the features from before are there, like in-line search and automatic RSS. It’s just all cleaned up.

RT @azaaza Firefox New Tab: Visual Update | Follow @azaaza on Twitter | All blog posts

View all 28 comments


It is great to see that the banners are optional (adds a little too much noise for me) but I really like all the other aspects of the design. The best of the series as far as I am concerned. I definitely see myself using something like this.


That looks really good, except that the big photo headers violate the principles of “politeness” you were talking about earlier – I think if I were making a new tab in a hurry one of those big, colorful headers might catch my eye and disrupt my train of thought.

Otherwise, really good.



Aditya

Why not make the horizontal thumbnails a background for the link/RSS boxes? This would save a lot of real estate while also allowing the “visual treatment” to be more prevalent and unobtrusive. Rele impressed w/ the development of this project tho.


I agree with Pete. How about fading the “banners”?


I hate to say it, but I think that’s a step backwards from the earlier revisions. The banners draw my eye un-necessarily, and only work on sites with a logo top left (admittedly the majority). I definitely preferred the more laid-back earlier iterations, especially the three-column one, which used thumbnails and favicons to good effect.



Jimmy

Is it still planed that highlighted text will end up in the action part of new tabs


Have you tested this on sites with overlarge headers? What would shawnblanc.net look like, a blank square? What about a Flash-only site? The problem with selective clipping is that not all sites are playing by the same rules.



Nox

Some of these problems could probably be solved by calculating the variance in colors for the sector chosen for the banner.


Hi Aza,

more ideas about the tabs:

http://www.flickr.com/photos/ftosete/3492180976/

from Madrid, Spain, greetings



Jacky

Hello there. I have blogged about a feedback to this tab page, includes an image. I hope you have a chance to take a look. http://www.iamjacky.com/?p=1138 Cheerios.



JLinks

Hi Aza,

I like the idea of having a place for commonly used websites, RSS feeds, and site search boxes in a way you are presenting here, but when I open a new tab, it’s always to do something unrelated to them, thus this would still interrupt my work flow. To get to any of these, everything I need is right up in the browser’s chrome already, opening in a new tab with a middle mouse button click.

If the new tab page that your making was instead made into a Home page, that would be much more useful and discoverable to all users. I reeeally like many aspects of Jacky’s design above. The only thing I’m not sure about are the banners.

All I prefer for a new tab page is maybe a Firefox logo in the bottom right corner, at a low alpha color value. Then the empty tab is distinguishable from loading and plain white web sites.



Mardeg

I think the fact that there is 36 revisions is telling you something.
You need to make it infinitely customisable so everyone is happy.
I’m talking *everything* is resizable/draggable/stylable/optional


Take a look at how Eclipse IDE handles the display of dozens or hundreds of tabs. I’ve taken some screenshots for you:

http://img413.imageshack.us/img413/8404/screenshot1qwc.png

http://img413.imageshack.us/img413/5880/screenshot2n.png


Nice! By the way, love what you are doing with Mozilla Jetpack!


wow, i just love these new tabs for Firefox …!



Iain Dalton

I don’t like the banner. It doesn’t look clean, and I imagine there will be cases where it won’t work (site has no banner, Fx picks wrong image as banner). Why not use a site thumbnail as in earlier iterations?



Iain Dalton

Just tried the latest iteration. It doesn’t have the banner, or RSS feeds. Why did you remove feeds?

Instead of only looking at the clipboard, why not look at all selected text? If I select text (mouse), then copy it (keyboard), then make a new tab (kbd or mouse), I have to switch between keyboard and mouse. If I select text, then click the new tab button, I avoid the keyboard.

Searching for text and mapping it should be on separate lines. As it is, the “map” button is beyond the reach of my non-maximized window. I suggest something like:

[G | Search] 123 Main St. Anytown, CA 12345
[Map] 123 Main St. Anytown, CA 12345

Where the G part of the Search button is a pulldown menu where you select your search provider (populated by search plugins).



baruch

I think there are two distinct levels regarding tabs (and any other content):
1. How to logically access it. I.e. how to index it.
2. How to physically access it I.e. how to display it.

I don’t like tabs too much. Normally I have tens of them open, some are less used, some have dynamic content that I want to periodically revisit, some I don;t want to lose and when I lose them (too many bookmarks anyways), I don;t care much until I need them again a few months further.

With the flood of content, tabs don’t seem to me the right way to access it neither logically, since they have absolutely no logic associated to them, nor physically, because, well, I don’t really know to define that yet and don;t want to think about further.
Following the example of “micro-blogging”, one may refer to tabs as “micro-web”/”micro net”, or “micro-search”, reflecting the status of one’s content interests. If that’s true, then why not handle it as such?
(I wonder – do I have 140 open tabs?)

I believe the solution should handle both levels. To handle the logical associated to it as well as the visual access.

Perhaps I can refer to what I want from tabs as a simple change. Make them “tags” instead.

For example, this “micro-web” may refer to the keywords and tags, or even the whole text, inside the pages and/or the link names. Another way to “logicisize” them is to allow the user to add keywords, tags or even links between them. Then access this user-entered meta-data. Another way is to create logical trains according to the “threads” of which tag opened which tag (and back-tracing of course). Timestamps of when the link was opened may also be helpful. There are probably many other logic criteria/rules that may be applied to content, tags included. So support them all, let the user decide.

On the visual side, there are also several alternatives. For example the old nested file system/folders/threads representation. Another is a color/icon map of the logical criteria/categories (such as red for all tags marked under “human interface”). Another may be some graphical display such as perhaps bubbles or graph-bars etc. Yet another may be “desk roller” kind of display, or several of them, indexing the tags according to the various logics associated to them. All such graphical designs may enjoy graphical attributes to rely information, such as bubble size or color “strength” to reflect number of links under that category, color hue to reflect association between different categories. Best is to support all – like “skins”.
Separating the logics from the physical has another advantage that developing “logic engines” on one hand, with standard APIs to all of them, and developing “physical skins” on the other, can be done independently and continuously by the community at large, each one working on what he likes more.

These are my of-the-sleeve thoughts. I apologize if I repeated prior thoughts here or elsewhere which I have neglected to read. I’m not a follower of open source development etc.

Thanks for reading,
Baruch



SteveP

Sorry if this is inappropriate, but I’m trying to get Firefox to allow me to open RSS feeds from a dropdown list (from the sites in my bookmarks bar) – ideally by right-clicking and opening in a new tab.

Currently, the functionality requires that I be on a blank (or unused) page, then select the RSS feed item I want to read. Ideally, I could run through the dropdown list, selecting several stories to read in sequence that would already then be open.

Hope that makes sense.


Any chance we’ll get to install a new version anytime soon?



Tyler

This project is looking a bit… stalled.



Frank J.

any news on this?


You are the utmost extravaganza!


Is it still planed that highlighted text will end up in the action part of new tabs


Any chance we’ll get to install a new version anytime soon?


This project is looking a bit… stalled. [شات كتابي][شات صوتي][كوت الكويت]


It is great to see that the banners are optional (adds a little too much noise for me) but I really like all the other aspects of the design. The best of the series as far as I am concerned. I definitely see myself using something like this.


Leave a Comment