Can Ubiquity be Used Only with the Mouse?
As an early holiday-season gift, here is a video and working version of an experiment in making Ubiquity usable with only the mouse. It draws heavy inspiration from our work on Firefox Mobile, with sliding, light-weight controls accessible to the side of the page.
There’s a lot of work left to be done, and a number of explicit open questions that we’d love help brainstorming on. More on that after the video.
One thing to keep in mind while you watch the movie is that these moused-based Ubiquity commands are exactly the same as the linguistic versions of the Ubiquity commands. Not even a single code tweak was required to get them running!
The Badge Action: Selecting a block of text causes the Ubiquity action badge to be displayed. As Jethro Larson mentioned in the comments of a previous mouse-based Ubiquity post, the downfall of most select-and-badge interfaces is that they are remarkably distracting. To combat this problem, we made the badge transparent enough to be neither distracting nor annoying (this has the benefit of enabling the text beneath the badge to be easily readable). At the same time, the badge is opaque enough to be noticeable. When you hover the mouse over the badge, it becomes fully opaque.
We played with various methods of making the badge feel less in-you-face: We tried having the badge fade in after a short time, as well as decreasing the opacity the further the mouse went away from the badge. Both ended up being more distracting than the simple roll-over. There was simply more animation cluttering the visual landscape — and that inevitably attracted the eye.
Open question: How to invoke mouse-based Ubiquity without first making a selection? (This is especially needed for commands like Twitter, Weather, etc.)
The Slide: Clicking the badge slides the entire page over, revealing the Ubiquity area. It’s a fast, context-keeping interaction: It’s immediately obvious how to get back. The slide time also gives enough time to make a quick network call, so that the browser feels clairvoyant and super-speedy as you rarely feel like you are waiting. (In the future, it makes sense to prefetch results as soon as a selection is made.)
This gets us to the Open Question: Should the pane be on the left side or right side? Top or bottom? Also: How should we handle scrolling while the pane is open?
The Ubiquity Pane: The layout is entirely in-flux. We’ll need a command form area, a preview area, and command-selection area. Besides that, it’s blue sky thinking. My hunch is that a mix of a grid menu, tabbed toolbar menu, and a search/filter is the right way to go (see picture below). Open Question: How to lay out the Ubiquity pane?
Play With It
You can subscribe to the experimental mouse-based Ubiquity just like every other Ubiquity command. That’s because it is just a Ubiquity feed.
Usage: Use the “setup” command on any page where you’d like to try out the experimental mouse-based Ubiquity. Then just select some text, and click the badge.
Update: As many folks pointed out (in particular David and Amad), I forgot to include the badge image, which meant nothing would happen when text was selected. I’ve fixed the problem — many apologies!