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

I'm the Creative Lead for Firefox.

 

Firefox New Tab: In-Line Search

Sponsored by

Over the last couple of weeks, we’ve been iterating on the idea & design of what a Firefox new tab could look like. All told, we’ve now gone through 36 different versions of the page, with thousands of particpants helping test and provide daily feedback & new ideas.

In this latest iteration, we’ve continued to refine the concept taking into account all of the feedback we’ve received in comments, blogs, IRC conversations, and hallway talks.

The Latest Edition

The main feature we’re exploring in this iteration is in-line search for the sites you search often.

If one of your main uses of a site is to perform a search (e.g., Technorati, Wikipedia, or Twitter) then the new tab page should help you perform that search more quickly and efficiently. Instead of first navigating to the site and then performing the search, you can search instantly without the need to install a search provider (or even for a site to provide one).

We’ve implemented this feature using Places, the feature introduced in Firefox 3.0 that enables the Awesome Bar. Our heuristics are still a little rough — and they won’t find every site search — so we are looking for feedback. What sites that you search often and appear on your new tab page don’t have in-line search?

We’ve also continued to explore ways of keeping the new tab polite. In an attempt to not break your train of thought, 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), the feedback indicating that hiding the ambient information of the new tab page was a major detractor: We had underestimated the power of gaining information at a glance.

We’ve taken another tack this time at not breaking your train of thought by using default fonts and a Firefox-gray background. Instead of taking the over-the-top cognitive shield approach, we are trying to make the page “fit-in” to ameliorate a visually jarring experience. After a couple days of testing and feedback, it seems to work. What do you think?

We’re now working with the Firefox product team to explore potential inclusion of a feature like this in an upcoming Firefox release, and what that might look like.

Prototype

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.

RT @azaaza Firefox New Tab: In-Line Search | Follow @azaaza on Twitter | All blog posts

View all 42 comments


Can’t you use the search engine plugin (or whatever it’s called) if one is provided by the site? You know, the one that drops down from the top right if you install it.


Unfortunately the addon don’t work in my PC. I use FF 3.1 b3 in Windows XP.
I don’t know if some extension cause the error or if is otherwise.
Greetings



Jason Persampieri

I find the latest incarnation to be the best yet. I really hated the ’shield’ and the inclusion of search boxes is nice (although not something I’d likely ever use).

Here are the things I’d still like to see:
- more ‘context-sensitive’ actions based on clipboard text (but these can’t slow down the page at *all*. they either need to progressively load, or be pre-fetched)
- show the awesomebar here (if it’s hidden in the chrome)
- ability to rename the links
- a way to jump to any of the links via the keyboard (numbering or tab progression could both work)
- a way to add links to the new tab page from the page itself (ie bookmark this to newtab page or something… perhaps just a bookmark folder that gets auto-included on the page?)

Keep it up! This feature is looking incredibly useful!



Jason Persampieri

ooh. I see contextual actions are there already (although the ‘map’ button doesn’t work for me). Cool.



Todd

I was excited to see the search box next to google when I opened the new tab.

I executed a search, which opened in a new tab, but when I went back to the first tab to try and run a new search, I couldn’t get rid of the text in the search field from my last query.

Then, I clicked remove, thinking it would clear the search box and now Google is gone from list.

Perhaps this is all user error?

This is a great feature though, when I saw it, I realized I had been waiting for it.


@Todd: Not user error. Just an edge-case that we hadn’t dealt with yet in the code.



Christopher

I love this, but either remove the “+” button that lets you type the site you want, or make it more accessible, maybe in the center, already selected. Otherwise, it is redundant of the awesomebar, and there is no need to click it


@Christopher, I’m not entirely sure what “+” button you are talking about?



Christopher

next to the frequently visited sites- when you click it, it asks to type the site you want, then when you type a site, it will show one of the websites in you history
I like the Idea, it just seems rather pointless the way it is displayed


@Chris. That’s supposed to be the interface for adding a new site to the list. It is, however, totally broken and unimplemented at the moment :)



koppah

I’d like to see a way to prevent a site from ever appearing there. For instance, my router’s admin page keeps creeping back!



Warren

There are many ways to use search now, but not all of them are integrated into each other.
1. automatic redirection to default search engine when typing on the url bar
2. using bookmark aliases e.g. “wp firefox” for searching wikipedia
3. ubiqiuty scripts
4. search bar

What i’m concerned with is the integration of the first three. I have a lot of bookmarks that i use for search that I was hoping ubiquity could “detect” and install automatically.

If you are going forward with inline search, how are you going to tie everything together so that there won’t be redundant functionality or non-interoperating features?


I like the integration of search into the frequent sites, like Google. I think some iteration of this should be integrated into Firefox 3.5. If you can stabilize the code and make it fully functional in the current state it’s in, I already think it’s a big win.

You’ve done a great job at making it indistinguishable from about:blank – I see no performance hit.

The only thing I can see that needs to be better in the current iteration is better detection of frequent sites. I’ve found that the sites it comes up with are not sites that I truly frequent. Maybe it needs to take more time to gather information, I’m not sure.

-Matt


Also, I like the idea of what you said in one of your videos about what someone typically does next.

I usually hit up Gmail, Twitter, Facebook, Google Reader, and Digg when I fire up the browser.

I used an extension called Speed Dial and another one called Fast Dial. I could place my personal frequent sites in these extensions and I’d have quick access to what I needed.

But the new tab UI could definitely do this, and better if it could predict what I usually do after opening a particular page.

Just a thought!

-Matt


Maybe these are not decisions you should be making. Perhaps you should look at making the new tab page pluggable. Can’t decide what should go on it? Let the add-on writers decide that. It is a perfect place to create really really easy to create a specialized add-on for Firefox. Let the add-on makers create twitter and inbox overview widgets. Allow them to be associated with sites, so that the most common sites you see you suddenly get relevant information from.

Go a step further than that. Create an online directory of these. Show the user these widgets automatically, allowing them to lock in ones they want to keep around, or blacklist ones they don’t like.

Go to twitter often? You’ll see recent tweets on the new tab page. Like that widget? Lock it and enter your twitter info and you can tweet right from there.

I want a notepad I can write notes in quickly on the new tab page, but most people won’t want that. Let us decide for ourselves.

Heck, just make the new tab page a special url like about:newtab and let Userscripts do the rest. You’ve got better things to spend your time on.


I’d like to graciously disagree with @Calvin Spealman on his thoughts about throwing the project to add-on developers. While I think the add-on developer community for Firefox is wonderful I think that a basic new tab screen should be implemented by Mozilla and it should be integrated into Firefox 3.5 if possible.

Calvin makes some great points, but I think Aza and Alex are on the right track here. It’s important to understand that the browser has a certain responsibility to the users to provide a complete experience and a new tab screen that’s blank doesn’t provide the user with any basic features. So if Aza and Alex can get this off the ground, even in it’s current form it’s a “big win” as Aza put it because at least a new tab has something going on.

There are already add-ons that can provide this type of functionality, but I think it’s really important that Mozilla take control and provide users with basic new tab UI functionality like we’re seeing here. Keep up the good work guys.

-matt



Jim Jeffery

On my older machine with admittedly is underpowered to be running Vista HP SP1, 1.4ghz AMD Thunderbird/ 1gig PC133 RAM.

The latest iteration on my system is very slow in opening a new tab with Ctrl+T, average is 2-3 secs while the page populates. Its now as bad as IE8 on my system opening a new tab.

The Google search box on first try acted like the search was not initialized, as when I clicked in the search box I went to the Google Homepage instead. Second attempt at doing a search seemed to work.

Thanks for the hard work –

aka
Littlemutt



Jim Jeffery

Another comment, In the Search box, the magnifying glass should be on the right to match the search boxes everywhere in the application.



Andrea

@Juanito
it almost certainly depends on TabMixPlus.
I’m using your same os and Firefox build, disabling TMP solved the problem.
Now the question is: how long can I survive without TMP?
Not much.
I’ll still give this addon a try, though



Scott Newson

I feel that Calvin Spealman and Matt Wilkinson both have important points concerning the extensibility of this new tab page.

The question of what to include by default and what to leave up to extension developers is a very important one, especially for an application that prides itself on it’s extensibility.

Defaults that exist across all installations of firefox, such as the text curser ending up in the awesomebar whenever a new window/tab is opened, are very important for people who have to work across multiple installations of firefox (library, university, laptop, multiple operating systems and so on) where we can’t optimise everything every time they want to use a new computer.
That being said, there seems to be little reason to not open up the new-tab page for extensions. The extensibility of firefox is one of its strengths.

Firefox does a very good job of providing a consistent base install that is efficient on many computers and which works for most people while allowing some users to customise to their hearts’ content. You can’t get everything right for everyone, but you can aim to provide something that generally works for most people.



Sad

I’m very sorry to say however, this addon doesn’t work for Firefox 3.08


@Sad – About:Tab is an experimental and development extension from Mozilla and it only works on Firefox 3.1 or Shiretoko.

You can get the beta here:

http://www.mozilla.com/en-US/firefox/all-beta.html


Hi Aza,

The new interaction of the new tab is fine but I still have a problem. The cognitive shield is very big and is positioned at the right of the screen, in the middle, the same place where usually is the mouse cursor. The problem is that in many occasions, although I don’t want show the links, the cursor moves over the shield and these are appear with the consequent cognitive distraction.

A posible solution is to make smaller the cognitive shield and put on the bottom right. In this place don’t cause disruption because usually, the mouse cursor is in the top middle and at the right middle of the screen.



Sander

Am I right in noticing a Canon Cat trick here: showing a screenshot of the page (as it was lastly shown) until it’s loaded? Works well here, would be nice to do that with Firefox itself, so that waiting for it to start is less annoying.


I know it’s not related to what you are writing here, you are discussing the new tab functionality, only when reading the 3th + 4th paragraph made me think about something that Opera has but Firefox hasn’t.
The ability to easily search from your address bar, why should they be different? My search bar is wasting useless screen space I don’t want it to use.
I could also simply type ‘g {search query}’ and be done with it. Firefox should recognize this, maybe you could make it work together with ubiquity&the awesome bar?
If you start typing google it appears, if you type a space it detects you want to do something with that website, for Google a search would be relevant. For twitter it might be a twitter message. Simply type ‘t… {message}’. When I do something different that is probably what I want?

Could be this is unrelated, also could be I started a spark in your mind. =) With me writing this down already did…
Also somehow I never felled the urge to tell them about an idea I had, but here I did… Also could be something wrong with that…
Sorry, for my useless rant, if you want to comment please send me a mail, I probably won’t check back on this post. =)



Warren

@Jan Hopmans
You just rephrased what I typed above


Love this addon! One small step for Firefox, one large step for the internet.
Any place for a wishlist?



Ken

Tabbed browsing is my modus operandi, so I’d like to get my $0.02 in while the gettin’s good. This may not be the best place for it since I’m not testing the extension yet, but I haven’t seen any better. Not that I don’t want to test stuff, but testing two experimental things combined with eachother is just asking for trouble….

On me: I’m an electrical and computer engineer. I’m easily distracted, and I find distraction exquisitely irritating. I get strong feelings about the most logical ways for things to work, and I find things that conflict with them to be distracting. I use a MacBook at home, where the right hand is always near the one-button trackpad and the left hand is often off on more important missions. The most efficient interfaces for that are buttons, menus, and gestures, and I find any non-typing task which requires the left hand to interrupt its work and attend the meeting (e.g., modifier key pressing) to be distracting.

On Firefox: I like it (as I did Mozilla and Netscape and Mosaic), in part because it is so tweakable. I rely on about:config to kill text blink, GIF animation, the “Awesome” Bar (a.k.a. “Bar Clippy”), the Get Add-ons Pane (a.k.a. “Add-ons Clippy”), and Internet Keywords (a.k.a. “URL Clippy”). I rely on userchrome.css with about:config to inter the user-hostile “Ashen” theme (a.k.a. “Firelight”, “Slate”) and compact the remains (although I’m still working on using FF2’s Toolbar-small.png to restore buttons that don’t waste space and do use shape and color to communicate information to the user, without resorting to an overkill non-Mozilla download.) I rely on extensions “No-Script” (in blacklist mode) to block Flash animation and its network hoggage (among other things), and “Toolbar Buttons” to add more one-finger trackpad goodness.

On tabbed browsing: I’ve been pretty happy with most of Firefox’s capability and customizability, especially 3.0.x, and I hope subsequent tabbed browsing implementations don’t reduce any of that. I use Preferences, about:config, and userchrome.css, to: open new pages in new tabs, always show the tab bar, open links in new tabs in the background, load new-window tabs in the background, protect existing tabs from being clobbered by folders of bookmarks, clean off “blank” tabs (although the icon is proving stubborn), and as previously mentioned, minimize the font and height of tabs and clean off the Ashen theme.

One FF3 tab improvement I was particularly excited to find was browser.tabs.tabMaxWidth . On FF2 this was internally fixed at 250 pixels, so unless tabMinWidth was also set to 250 (a logically unimodal but unappealing solution), the resulting behavior was arbitrarily trimodal. Now set to my screen width of 1280, the behavior is more linearly bimodal, which I enjoy very much.

The only tabbed browsing enhancement I use is HashColouredTabs+ . I tried a number of tab color extensions including Chromatabs and found HCT+ the least distracting. Perhaps more importantly, I finally learned how to hack it to implement my number-one most wanted function: the Perpetual New Tab. In the Modern Age Of Computing, there is no logical reason anyone should ever have to manually open their own blank tab. That’s what computers are for; they already possess all the necessary information. And yet that’s what Firefox currently makes everyone continually do who doesn’t have a second mouse/trackpad button and who doesn’t want to use up a whole other hand just to hold down a modifier key or who wants to use the Bookmarks Toolbar. To my further astonishment, no extension that did it ever appeared (to my knowledge), and I finally tired of waiting. Now I’ll never again even have to think about opening a new tab. Hey, New Tab Button — don’t let the door hit ya where the dog should’a bit ya. (I can also have them open whatever I want, but for now I’m happy with about:blank….)

A few years ago I tried out every tab enhancement out there I could find, and at the time, settled on Showcase. I tried to get into the habit of using it, but it was was just too much effort for what I got out of it. Distraction, I found, comes from three things: clutter, noise, and surprise.

Clutter is static. For clutter, the user is a state-machine: for any current state the user may be in, there is a set of desired next state possibilities, and that set is limited. Clutter is any possibility outside of that set that the user can detect. For example, if I am looking at the browser and can see the New Tab button but would never desire to press it, then the New Tab button is clutter.

Noise is dynamic. For noise, the user is a difference-detector. Humans evolved to detect prey and threats by the most minute changes in position, orientation, shape, color, brightness, sound, etc. Such changes cause sensory organs to generate signals to the brain which alter its operation. Animal physiology is incredibly good at it. If the signal is undesired, it is noise. For example, the popup ad.

Surprise is a failure of expectation. For surprise, the user is a modeller. The human brain works by modelling reality in an attempt to eliminate surprise, shift the execution of repetitive functions from the concious mind to the nervous system, reduce distraction, increase speed, and maximize efficiency. If the result of an action is nondeterministic, maximum efficiency can either not be achieved or not be sustained. For example, compare user performance with a “Recent Items” list to that of the Apple Menu.

Users form a spectrum. What one user desires to be able to do from a given state is not the same as for another, so what is clutter to one is not to another and is a desired option to a third. The noise that sucks one user’s attention away from their desired goal is undetectable to another and contains desired information to a third. The surprise that thwarts unconcious learning of hand-eye coordination may be intolerable to one user, unnoticeable to another, and fun to a third. So it is not a possibility for an interface designer to select any single level of clutter or noise or surprise and rightfully expect to satisfy any significant portion of the user spectrum. A user interface, regardless of baseline, cannot be good without having sufficient user customizability.

Regarding in-line search (a.k.a. “Search Clippy”), I’d want to turn it off. I don’t need or want my tools maintaining records of what I did in between sessions without my control, much less doing mysterious things with them or distracting me with their unsolicited opinions. But certainly feel free to implement as many versions of Clippy as you like, as long as you also always provide a way to prevent their execution.

Regarding the Cognitive Shield: your chosen name reminds me of “Reality Distortion Field” and “Slomin’s Shield”, and sounds like it blocks one from using one’s own brain…. But you described it as a “personal watermark”, so why not call it that? Or Cognitive Signet, Cognitive Crest, Cognitive Banner, Cognitive Medallion, Cognitive Coat-of-Arms, Cognitive Amulet, Cognitive Talisman, Cognitive Totem, Cognitive Periapt, etc.? Something with less “impeding” power and more “facilitating” power. One thing I can say is that the dynamic recent-items aspect would, like every other recent-items list, cause interference with my nervous system, so that like every other recent-items list, I’d probably ultimately turn it off. But I am very intrigued by all the other aspects of the GUI, and if its content could be made deterministic and controllable (e.g., Bookmarks Menu) then I could potentially dig it. Hmmm…that’s an idea…creating a local HTML file with Bookmarks Menu-like content and displaying it with the Perpetual New Tab function….

Ok, maybe that was $0.03.



Tiggr

Hi Aza..long-time listener; first-time poster (btw; i consider your father’s work “the Humane Interface” one of the Bibles of my daily career – great to see you carry the baton!)

The more i read the firefox “new tabs” discussion the more one thought springs to mind…

“I’m reading this using chrome not firefox strangely (mozilla fanboi here) and …well…i love chrome’s new tab page..but only after many months of use.”

It gets my “most visited” pages right. (tick)
It allows me to search my history (tick)
better yet- it shows “recently closed” and “recently bookmarked” lists…(tick) (tick)
I can search without changing modes by typing in the url-bar (awesome bar) (tick)
I can just type the url of the porn sites i know by heart in ;o) (TICK) *ToungeInCheek*

so, my thought is to make like microsoft and steal ;) …bring the chrome new-tab into ff as-is …add awesomebar…include ubuiquity (and mouse-based ubiquity) and the great sliding metaphor from fennec for tab-lists/settings etc and…..Um..No…wait a minute…i think i just really want the chrome new-tab mechanism + Fennec as my main browser :D..that should do it!

My AUS2c (about 0.00…something in USD ;))



Tiggr

…OOOOOH… I almost forgot..

where is V8 for firefox ? ..must HAVE (tracemonkey)…FF is still too slow WRT Javascript execution [methinks this is more to do with "a process per tab" metaphor in Chrome than JS performance since i experience JS performance in chrome as linear regardless of number of tabs open as opposed to Firefox's near-logarithmic (BIG-O(n)) behaviour] ..the core of the problem; in firefox, the Javascript-Heavy sites i have open LAG with multiple tabs; Chrome=no lag…But no cool extensions (like ubiquity) either :S !!!]

So …add one JS engine/Threading Model upgrade to my list of must-have and i’ll have ur babies :D

Cheers
Tiggr.


What if the new tab page’s background was a slight match to the overall brightness of the tab you just left? That is, have the new tab page’s background dim/brighten according to the overall brightness of the tab the user was just viewing, to prevent sort of a jarring transition.

E.x. if I open this screen from a dark page, I don’t want my eyes to get burned out by the jarring contrast of a almost-white-but-just-barely-grey background.



ajax

your plug in doesn’t works on firefox3.03. i just want to see results and do my searchs in new tab, not in same tab.


موقع منتديات عرب نار اكبر موقع سكس عربي



Richard

one thing that I would really like, though I’m not sure this is the place, is to have new tabs created directly beside the one you are in. I also like chromes layout with the tabs above navigation controls.


Viere nNice


عرب جنس : اكبر اضخم موقع سكس عربي عرب جنس افلام سكس صور سكس قصص سكس مجانا
عرب جنس اكبر موقع سكس عربي يشمل افلام سكس و صور سكس و قصص سكس نكت سكس


افلام كافيه اغاني عربية افلام عربية افلام اجنبية مسلسلات عربية مسلسلات اجنبية مسلسلات تركية افلام انيمي افلام كرتون صور الفنانين فيديو كليب
aflam arabi aflam ajnabi aflam cartoon http://www.aflamcafe.com mosalsalat arabi mosalsalat ajnabi video clip
aghany araby mp3 arabic songs free download


Another comment, In the Search box, the magnifying glass should be on the right to match the search boxes everywhere in the application.


I executed a search, which opened in a new tab, but when I went back to the first tab to try and run a new search, I couldn’t get rid of the text in the search field from my last query.


very good..


nice post. thanks. :)


Leave a Comment