Bookmarklets are clickable actions (technically a link containing some Javascript) that can be added to the bookmarks bar of your browser. They’re a good way of getting control of the web back into users hands, by allowing them to add whatever new functionality they want to the websites they visit.

The main problem with bookmarklets is that they don’t provide a scalable solution for accessing their functionality. You can only have so many buttons on the toolbar before they become an unusable outbreak of pimples that clutter the browser’s interface.

With a new utility function in Ubiquity, it’s now trivial to turn any bookmarklet into a Ubiquity command. Here’s a short video tutorial on how to do it:

Here’s the source code for the command in the video. The bookmarklet comes from here.


CmdUtils.makeBookmarkletCommand({
name: "Embed Flickr Photo",
url: "javascript:(function(){if(window.page_p)window.open('http://www.elsewhere.org/mbedr/?p='+window.page_p.id);%20else%20alert('No%20Flickr%20photo%20found.');})()"
})


If you’ve got any favorite bookmarklets or great bookmarklet-based commands, put ‘em in the comments.

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.

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.

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.

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.

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.

With over two thousand watches of the find-in-page session, and a lively discussion, the experiment into broadcasting our internal face-to-face meetings is a continuing success. It exceeded our expectations for participation and yield of quality dialogue; we’ll be trying to do more of these at Mozilla—not just for Mobile—in the future.

For the third installment of the Firefox Mobile design discussions, it’s bookmark time. Bookmarks have been a fundamental feature in the browser since Mosaic days. Do they have a place in Mobile? Are there better paradigms? How are they displayed? What’s the difference between a tab and a bookmark? Is it only a matter of one being in the device’s memory?

These are some of the questions are asked, and some of questions answered in this thrilling video installment of Firefox Mobile Design Sessions. We are looking forward to hearing your thoughts. PDF of the slides are again unavailable because the whiteboard software ate them. We’ll work to resolve that for future sessions.

At the end of my last post on tabs, I mentioned Madhava’s concept for putting tabs into the Awesome Bar.

It’s a scalable and elegant solution. It has the hallmark of a good interface: it’s almost invisible, with no training required to gain the benefits of the feature. In one fell swoop it solves the twin problem of (1) it being easier to open a new page than it is to find an existing tab (2) the cognitive overload (and Hick’s Law penalty) of being required to think about whether something is already open in a tab, or whether I need to open it in a new tab.

I simply type where I want to go, and Firefox does the right thing.

After getting some insightful comments from Jenny Boris, who has been leading the charge in good thinking about tabs, we think it’s a feature we should try to get into Firefox 3.1. In particular, she asked me to try my hand at some mockups.

Here are three ideas on a theme; my preference is for the last. Although not pictured well, matching tabs should be ranked above plain URLs.

In terms of interaction there is only one complication: What happens if you want to open a new tab to a location that’s already open in another tab?

There are two solutions. The first is to make explicit a behavior that already exists in Firefox; holding down option while selecting a URL from the location bar opens it in a new tab. That’s the type of solution I’ve included in the mockups.

The second solution, proposed by Alex Faaborg, is much more subtle. If the user has opened a new tab, and then entered a URL, they probably mean to start a new navigation task instead of switching. Note that this solution can be used in conjunction with the first. While we both like how unobtrusive this solution, we worry that it might make Firefox feel too “magic”, or unreliable — not knowing why your browser has done something is unsettling.

Luckily, this is an edge-case that won’t happen often and any of the solutions will work well enough to be quickly polished to perfection with user testing.

My hunch is that adding tabs to the awesome bar will drastically simplify the day-to-day hunt-and-peck for tabs with a minimal change to Firefox. It’s a huge win. Another benefit is that it can work seamlessly with Weave in the future—which will be especially useful for calling up information that you were just looking at on your desktop, on your mobile device. What does everyone else think? This feature is still in fledgling mockup stage—although we hope to move it forward quickly. Madhava proposed a couple other sketch ideas for how a tab-awesome bar integration could look. We’d love other sketches if you think there are other directions to explore.

Question: How do people share on the net?

Answer: They use services like Del.icio.us, Facebook, and Twitter. They IM, Email, and RSS. They advertise, search engine optimize, and chain letter. But it all comes down to communicating URLs.

Now, that might seem to be a trivial conclusion. And it is—the URL is the unit of location for the Web. But as we began to think about how to share new functionality for the browser (read Ubiquity commands, as well as the broader spectrum of Firefox add-ons), we realized that the basic URL was again going to be the key to sharing.

Question: How is functionality shared now?

Answer: Via one-time software downloads. New versions of Firefox are downloads (albeit often transparent ones) and add-ons are available as static XPIs. There is something largely last-decade about requiring restarts to add a new feature to your browsing experience. It’s ironic that the entire Web is on a push model, yet the browser—the most fundamental tool of interacting with the Web—is on a pull model.

Functionality is not shared via URLs, but it should be. Security concerns aside (we are starting to think about them), it’s a corner-stone of streamable browser functionality.

Question: What should functionality look like?

Answer: Like the rest of the Web. The closer new browser functionality can be packaged to look like standard HTML and JS, the larger and more diverse a community will create it. XUL and the desktop paradigm for extension development, while powerful, has a high cost of adoption. Right now we have a short tail of browser functionality with thousands of add-ons. There should be millions. We can get to that long tail using a more web-like model for functionality development&tools that are accessible to hobbyists and tinkerers, but that scales to professionals.

Bookmarking Functionality

Given that functionality implementations should look webby (think microformats) and be sharable by sharing URLs, it makes some sense that to add a piece of functionality, you should just be able to bookmark it.

In Ubiquity, you can do just that. We still haven’t defined a Ubiquity microformat, so right now functionality is simply a Javascript file. To nab it’s functionality, you bookmark it and tag it “ubiquity”.

Immediately, your browser has new functionality. Streamable functionality.

Using bookmarking solves a lot of user experience problems for passing around functionality: It doesn’t introduce a yet another new thing to learn, it enables no-action syncing between computers with Weave, and it lets you bookmark RSS feeds for aggregating interested meta-sets of commands. It also makes semantic sense: You bookmark content that you find and like, so you should be able to bookmark functionality you find and like.

The bookmark method works in the current prototype (running it requires pulling it from the HG repository). If you build some commands/verbs and want to share them, it is as simple as just posting a file online. If you do, tell us about them on the wiki.

Last week I traveled to Rome. I gave two talks. One was to a large audience of C-level execs from Fortune 100 companies in a over-the-top hotel; the other was to a small group of Mozilla Italia community members in a charming local pub. The difference was striking. The quality of dialogue and the intensity of passion in the later blew away the former. It was eye opening. I feel privileged to be able to take part in such a community.

All credit goes to Giacomo Magnini for putting together a wonderful event on super-short notice. It’s hard to visualize nearly a quarter billion people using Firefox. However, I gained some perspective by being shown that no matter where I travel, there will be people who not only use Firefox, but are passionately generative in the community. It’s simply breathtaking. It’s fitting, therefore, that Labs—which is chartered to accelerate the open design process—had it’s second Labs night outside the United States. The Mozilla community is a global phenomena.

Head over to Giacomo’s summary of the event, which includes a blurry video of the presentation.

P.S., I’m still in a state of delighted shock that they served me Nutella Pizza. Wow.