Archive for January, 2009

How to write a Ubiquity Command

Friday, January 30th, 2009

Want to know how to write a Ubiquity command, but don’t know how yet? Jono DiCarlo has a wonderful and in-depth tutorial on exactly how to do it. If you know just a little bit of Javascript, this will bring you from knowing nothing at all about Ubiquity development, to being able to create useful commands. The example you’ll learn here is a command that lets you bug your local congress member!

Ubiquity Command Development Tutorial

The Design Review: Chromeless Browsing (ep 2)

Thursday, January 29th, 2009

As part of the Mozilla Lab’s Design Challenge, Alex and I have focused our second episode of the Design Review on chromeless browsing:

What would a browser look like if the Web was all there was? As the Web becomes even more ubiquitous, we’ll never have to leave it. Whether it’s on touch tables, giant wall-sized screens, mobile devices, or just our computers, exploring the interactions for browsing a windowless Web will become ever-more important in the next couple of years.

The Design Review Episode 2: Chromeless Browsing

Question: What are the important requirements for designing a chromeless browser?

Weave and Ubiquity This Week

Tuesday, January 27th, 2009

Jono DiCarlo of Mozilla Labs explains what’s up with Weave this week, and the exciting changes coming in Ubiquity with “Overlord” verbs.

Jono DiCarlo: Ubiquity and Weave

The End of an Icon

Thursday, January 22nd, 2009

Given our open redesign of the Ubiquity logo, I thought it would be apropos reprint a post from the past about an icon that had reached the end of its life.

Finding the right graphic for an icon is hard — and even if you do find a decently descriptive graphic, it might not be descriptive for long.

For the majority of cases, trying to represent an abstract idea like “bibliography” in a 32-by-32 pixel array is futile, even if you do have millions of colors and an alpha channel. Sure, you might choose a book with a magnifying glass as your icon, but that graphic could mean many things: “library”, “help”, “research”, “index”, “vision impaired”, etc. Any interface that uses the icon would still have to add a tooltip to explain what it means. There is a reason why we have words — it’s so that we can specify one thing in particular no matter how complex or abstract the thought.

Why make the user go spelunking for the information they need? Just give it to them.

It came to my attention recently just how fragile the connections are between the iconal representation of a concept and the actual concept. Here is the Microsoft Word icon for “to save”.

Word's icon for save, which is a floppy disk.

It’s a floppy disk. There is only a tenuous connection between saving and a floppy disk even for those of us who know what a floppy is (and at the moment most of us remember them), but floppy disks are on their way to becoming as unknown as Charles Yerkes. Don’t know who I’m talking about? That’s my point.

Ubiquity in Firefox: Round 1

Tuesday, January 20th, 2009

Mozilla Lab’s Ubiquity experiment continues to be a big success, with over two-hundred thousand active users, and millions of downloads. It’s time to start seriously thinking about how to bring Ubiquity-like features to all Firefox users, not just the early adopters.

Design Goals

Before we get into specific designs, let’s start with some overarching design goals to frame potential solutions.

(1) Don’t force new work flows. A large part of perceived software bloat comes from piling on new features without a unified vision — each disjoint, with their own way of doing things, and own way to invoke them. The more we can place time-saving designs in the path of current work flows, the smarter, quicker, and lighter the software feels. Done well, the feature doesn’t even really feel like a feature, just a lending hand: “of course it was supposed to work that way”, says the user.

A corollary, however, is that we can’t block the old work flow by trying to “help”. That would be rude.

(2) It must be localizable. Firefox currently ships in over sixty languages. Porting even the restricted natural-language parser in Ubiquity to all of those 60+ languages is nigh impossible (we’ll be getting some linguist help soon). We’ll need an interface informed by Ubiquity for Firefox, one that’s easier to bring to more languages.

(3) Should feel like Firefox. This is a bit more touchy-feely. The features uplifted from Ubiquity should feel at home in Firefox.


Design 1: Awesome Bar

Basic concepts:
* Ubiquity actions live in the Awesome Bar and are identified in the identity button
* Commands get a frecency score, just like web pages (already a feature in Ubiquity 0.1.5)
* Commands look like chrome, same color and texture
* Self describing text in the field persists when it has the focus, can be adapted to explain what input a command takes.
* After selecting a command and entering additional text, the autocomplete results area can be used for feedback (as opposed to the current two-pane Ubiquity interface)

In this mockup, the “identity” button, is co-opted to identify the selected action/verb. Visually, this is the clean but there is a problem: How do you get back to the normal URL-going state of the Awesome bar? Presumably you could hit “escape” or “backspace” to go back, or there can be the standard “x” in the URL bar — but is that discoverable enough?

Design 2: Awesome Bar

Help! Your train of thought is sacred.

Friday, January 16th, 2009

You can only really think about one thing at a time. If you’re thinking about paying your taxes, you can’t be thinking about your vacation in Tahiti. Indeed, thinking about that vacation in Tahiti will actively prevent you from thinking about your taxes. That’s why when you want to get something done, you want to get everything out of your head except the task at hand.

So when you’re working and dialog box pops up, asking you an unrelated question — or when you have to fiddle with your software to make it work the way you need it to — it really hurts.
Asking someone to think about their software and their work at the same time is like asking someone to press two ten-feet-apart buttons at the same time.

Quite simply, we need to make sure we never endanger our user’s train of thought. And that means that the interface we’re creating can never derail it. No talking paper clips bothering them from the sidelines, no making them fiddling with windows and tabs to find their work, and no dialog boxes questioning their judgment mid-thought. No distractions. Just them and what they’re doing, mano-a-mano.

Question: What sites on the web have done a great job helping you focus? What apps on the web are constantly derailing your train of thought?

Intensely Personal Browsers and Mozilla Labs’ Personas

Thursday, January 15th, 2009

Suneel Gupta: Interview on Mozilla Personas

Mozilla Labs’ Personas — although still in beta — is an a extension that adds lightweight theming to your browser, allowing dynamic changes to how your Firefox looks. Whether it’s your kids, your favorite band, or beautiful art, all it takes is a single image to make your Firefox yours.

Personas project manager Suneel Gupta sat down to talk about what it means to have the browser’s look-and-feel reflect our personality, passions, and mood. And he’s looking for feedback.

Open question: How else should Firefox enable an intensely personal browsing experience? (Keep in mind intensely personal doesn’t mean lots of settings and preferences to tweak!).

New Ubiquity Logo: Round 2

Monday, January 12th, 2009

There’s been an amazing amount of participation in the design process of the new Ubiquity logo. It’s been inspiring to see the range of ideas and quality of feedback that we’ve seen. Incorporating that feedback, designer Sebastiaan de With has sketched an utterly amazing 25 concept logos. Given the feedback on those ideas, we are now winnowing those original 25 down to three.

Please leave your comments and votes below!


Awesome and cute! How can you go wrong? The power socket is universal for charging (adding electricity), and by having Ubiquibot attach to the globe we have a clear metaphor for using Ubiquity to enhance the web. Even better, it’s easy to replace Ubiquibot with other plug-able objects as we continue working on other projects. This is a keeper — if we don’t use it for Ubiquity we’ll definitely want to for Labs, or future iterations of extension development.

Model Universe

The model solar system is a strong metaphor — ubiquitous but not tired. It ties in the globe/web motif of the Firefox-family of logos, placing the unadorned Firefox globe at the center. It shows that there is an system beyond the browser, ready to be extended and learned about. It’s also a wonderful simple explanation of a complex system — allowing any one to see the solar system in action with the turn of a crank.

Plus it has that steam-punk charm.

Points to watch-for moving forward with this concept: The globe should be identifiable as the Firefox globe, and the entire logo will have to work at small sizes.

Organic Globe

Organic, living, interconnected, growing. All things Ubiquity. I love this concept, as does everyone else. It was the most popular choice. The difficulties in moving forward are making the plants look like they are enhancing and not strangling the planet, and somehow giving an active feeling.

The world-tree version of the logo is colorful and iconic. The relationship between the tree and globe feels, though, a bit adversarial. Plus, we’d have to be super-careful not to make it look like nuclear explosion when small.


Ubiquity 0.2 preview 5: It works!

Sunday, January 11th, 2009

We’ve just released Ubiquity 0.2 preview release 5. What’s awesome is that we think it solves the crashing bugs that many users have been experiencing. If you’ve been having troubles, or you are feeling brave, give it a whirl.

If you already have one of the 0.2pre’s installed, it should
auto-update to this new version. There are lots of other fixes in here, but another important one is that Ubiquity now is a good citizen when it is uninstalled and cleans up after itself.

This preview release is also the first to feature early documentation
for theUtils and CmdUtils namespaces, as explained in Atul’s blog post.

You can see the live documentation here.