Integrating Ubiquity into Firefox: UI Mockups


I’ve recently been working with Blair, Mike, Aza, Atul, Jono and others to explore about how we might integrate an interface like Ubiquity into Firefox and bring the power of a language based user interface to a mainstream audience.

Here are some very initial UI explorations, the first of what will likely be many mockups.

You can view more details about the project, including how to contribute and attend the public meetings over on Blair’s blog post announcing the project.

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Other Posts
At CHI 2009 in Boston
Notifications and Flow

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Nice to see that your first suggestion is a mix of the location bar, search bar and Ubiquity keywords. I think that its a very logical starting point: why need a specialized bar for searching when it can be done as part of the awesomebar?

However, I’m not really fond of the discoverability by dropdown. Perhaps something like this is smarter: you type in something and the action buttons appear in a horizontal list at the bottom of the action preview. Clicking on one will then switch the preview to the desired action. Double clicking or pressing enter after that will actually perform the action. I guess that the action ‘button’ is not really a button anymore (who doubleclicks a button?) but the idea is clear, right?

I like the first idea best because it appears to be heading towards the idea of merging the search bar with one all-powerful customisable awesome command bar.

After all, that is what the ‘location’ bar should be – one all-powerful ‘multimedia’ GUI command line to access the www.

One problem will be ensuring that there is clarity around what should take priority. Example: someone makes a command to “google myself”. How does the UI react? A) Send a search query for “myself” to Google? B) Grab the command from a ubiquity setting and search Google for “Joe Citizen”?

just fyi, i am getting a “Reported Attack Site” message when i click the link to blair’s blog post.

I like idea #1 but I think the layout is perhaps inverted. The action/verb is on the left but then you type the URL to the right.

I would expect the verb drop-down would be on the left side, so you choose your action first then type then Go.

Also off of idea #1 I would add a drag handle for things like the map so you could drag-drop it into an email.

Neither ‘ebay’ nor ‘Amazon’ nor ‘Skype’ are actions/commands, they are company names. So the ’skype action’ could be a) phone the contact entered b) chat with th contact entered c) search for a user in the skype directory d) add a user to the contact list…

How does the application decide what to do? How will the user know what happens except he tries out all of them?

Sorry, but very inconsistet as for now.

Most definitely I prefer the first option. It is elegant in that it doesn’t require learning another method and it keeps the browser real estate minimalist. These coincide perfectly with your ideas of flow and content over browser, which I hugely agree with. The best thing about this interface is that normal users could stumble upon helpful commands by just trying to get information in the awesomebar. For example: map “address”, currently brings up a Google page, with ubiquity like functionality it would cut out this middle search, giving users the impression of better functionality without them having to learn anything. It is necessary though, for the Awesome bar to still maintain its original functionality of frecency and bringing up likely web pages. I, and many users I know, have come to rely on this one stop search and find box. TaskFox should improve upon it, but should not interrupt it. Additionally, it would be nice to give the user an opportunity to discover more commands, possibly through the drop down that you have slotted, or by mixing them into the awesome bar results (though a system would have to be devised which would do this with discretion, not listing more than two or three). Above all, in order to have a successful adoption and browser, remember that Taskfox is an extension of the awesomebar, not a new application.

“Idea 1: Command Bar + Action Button” looks almost perfect! It finally gets rid of the redundant search bar, and combines the best of Google Chrome’s search suggestions with Ubiquity’s powerful commands while remaining very easy to learn (and non-power-users can still use the mouse if they prefer).

My only question is how you plan to integrate Awesomebar results (which are very useful). I would suggest that in the case where it is doing a Google search by default (but you haven’t explicitly typed “google”) it should show both Awesomebar results and Google search suggestions. These could be one on top of the other, intermixed, or side by side, but it is important that once the user sees a result they like and clicks it there’s no risk of a better-ranked result having loaded in its place, taking them to the wrong place.

Great stuff, keep it going!

I’d find it really cool, if the map would link to the openstreetmap.org -project to make it more popular.