Ubiquity In the Firefox: Round 2
We’ve been iterating hard on ideas to bring the power of Ubiquity to Firefox main. The two places it makes sense to surface Ubiquity-like power are (a) in situ with content when we are trying to manipulate, and (b) in the location bar, where we already type to perform navigation tasks. This post focuses on the second use case.
The three design goals, in shorten form, from round 1 were:
(1) Don’t force new work flows.
(2) It must be localizable.
(3) It should feel like Firefox.
We’ve added a new design goal, as a subset of not forcing new work flows: discoverability. The interfaces we design should be self-learnable. In this case, that doesn’t mean ever piece of functionality is immediately obvious, but that over time the system can teach you — step by step — how to use more and more of itself.
Note that all of these mockups are sketches. They don’t imply anything about the final visual style. From an interaction standpoint, they focus on tight feedback loops, as well as putting contextual autocomplete as close to the text being entered as possible.
Mockup 1
The Ubiquity-esque actions appear in the Awesome Bar results, and are subject to the same ranking algorithms as everything else.
The inset image on the right is an alternative way of accessing verbs: instead of having them appear in the awesome bar results, they appear as autocorrect-style text above what you’ve typed. The benefit is that you can always hit tab to quickly get to the action you want (as opposed to using the arrow keys for navigating the awesome bar results). It can also be unified with methods of structured modifiers (see later mockups). The detriment is that it is yet another mechanism and is visually noisy.
Other thoughts: The background of the url bar can change colors to add a visual key that an action is taking place. We can also unify the keyword mechanism, so that if you type “g ” it automatically gets expanded to a “Google” action.
Mockup 2
This is a take on how we can handle modifiers. In this case, we treat them like forms with defaults.
Pros: Modifiers are discoverable and obvious. We can also construct more proscriptively natural language-y sentences.
Cons: There’s more interaction required to use these systems; you can’t just type. You are also more closely bound to a particular modifier order. That is, it’s harder to do “translate from Japanese to English” and “translate to English from Japanese”.
Mockup 3
This design focuses how modifiers could be made visible. You can (1) type one of the options, in which case an autocorrect-style suggestion helps you to get to the correct modifier, or (2) select the appropriate modifier with the keyboard or mouse.
Mockup 4: Putting it all together
Mockup 5
Actions don’t need to take place inside of the awesome bar. After the action has been selected, the rest of entry can happen anywhere. This mockup is just one place for that entry to take place.
Pro: The same interface can be used for Ubiquity proper and actions in the awesome bar. And visually, it is less cramped.
Con: It doesn’t feel as “Firefoxy”.
Conclusion
We’re looking for harsh constructive criticism and more mockups. Bring ‘em!
RT @azaaza Ubiquity In the Firefox: Round 2 | Follow @azaaza on Twitter | All blog posts
Tags: firefox uplift, mozconcept, ubiquity
Sam Hasler
How is pressing Tab discoverable?
ChrisJF
Commands should be inside AwesomeBar results. I use tab to select AwesomeBar results and if Ubiquity was invoked using the Mockup1 inset image method, this would mess with my current workflow.
Mockup2 over Mockup3.
What happens if I type “shop for cake” and then hit enter. With Mockup2 I actually see which site I will be searching on. With Mockup3 all I see is little modifiers that do nothing but look pretty. Besides, I think I would find the slid-y action a little annoying after the wow-factor wears off.
I’d say Mockup1 over Mockup5 simply because what if the user wants to repeat the last command? Let’s say they just emailed Joe this page but forgot to email Ira. How are they supposed to go and edit the command and re-execute it using Mockup5? Mockup5 is just a drop down which would disappear after executing the command. With Mockup1 they can switch tabs (from Gmail) and then edit and re-execute the command in the AwesomeBar.
Hopefully that wasn’t too harsh :P Good job on the mockups MozLabs people!
Glen Lipka
I haven’t installed Ubiquity yet. I think the “separate app” issue just made me procrastinate. These mockups give my heart a flutter. My eyes lit up to say, “Oooh, that would be cool. I can see me doing that”.
The slide-into-place thing feels alot like old-style printing presses, where you slide blocks into place to create a sentence. It can get extremely complicated the longer the sentence is. A possible alternative is to keep using the auto-suggest for the possible “next words”. I definitely feel like the focus is on the left. My cursor and eyeball are WAY on the left. My screen has a high resolution. The TO/FROM would be a million miles away AND I need to use my mouse to click on them? Unless you just type TO and it slides over automatically? Doesn’t seem to scale if there are 5 possible modifiers.
I would definitely suggest skipping the stuff on the right and just using the auto-suggest to find possible next words. It would be cool if they STILL “slid” into place. That way you could go back, like a bread-crumb.
Anyway, this is awesome. I am excited for a Mozilla build that I could try it.
sep332
Is there a reason to prefer right-arrow? Currently the way to get autocomplete in the awesomebar is down-arrow.
gozala
on more mockup
http://rfobic.wordpress.com/2009/02/17/some-mock-up-around-ubiquity/
Zacqary Adam Green
Just a side note on the problem you mentioned with “Translate”. Why can’t the “translate from” language be auto-detected? Google Translate can do this quite nicely, why not build it into the command?
Gordon P. Hemsley
As awesome as the Awesome Bar is, I think I prefer the commands to be used outside of it, à la Mockup 5. Perhaps you could also implement some sort of separate Awesomeness to alleviate ChrisJF’s concerns?
Funimation
Will you be able to piggypack on async awesomebar?
Julien Couvreur
A tangential question: do you plan on changing how the focus gets to the awesome bar?
There are multiple shortcuts (Ctrl-L, Alt-E) available already. Would Ubiquity’s Ctrl-Space become one of them?
Jethro Larson
I’m a fan of Mockup 4. I think it manages to integrate pretty nicely without getting in people’s way too much
Alex
Amazing work and UX! I was just quoting you on Twitter when thinking about mass-compatible CLIs (command line interface) and CLIs supporting discoverability. The latter is really important since no one like to read manuals but has to find out about available commands. Good seeing you adding it as another design goal.
karl dubost
one of the thing I like about Automator is the categorization of actions. We can imagine that little by little there will be huge number of actions and that it will become hard to choose from this long list. It can still stay a long list for those who wish but having categories can help.
The action icon might be better represented with an arrow which shows the linearity (to see how it fits in right to left language.)
Mano
I’ve an idea about Ubiquity’s integration here:
https://labs.mozilla.com/forum/comments.php?DiscussionID=5123&page=1#Item_3
I’d be more than happy to read what you think. Thanks.
Keith Lang
I love the ’sliding modifier block’ idea. Should work beautifully.
Thoughts for when you get down to polishing the interface: Ubiquity always looks very info-dense, and it is. But imo there is a threshold it’s crossing which might put off less-text oriented adopters.
In my opinion:
_Bolding *and* underlining letters actually *adds* noise
_Left align text of input field and suggestions
_Match text, leading as much as possible
_Rounded rectangle which encompasses Ubiquity and field
_Is URL and title required in ubiquity? Could URL be shown on mouseover instead? Some other method to reduce visual density?
Blair McBride
@Funimation: As far as I know, the work done on the async awesomebar is only in making the Places database lookups asynchronous (by moving it out of the main thread). The actual interface for the awesomebar already allows for asynchronous results. (Sorry, that may have gotten a big technical.)
kenny
Not entirely what your article is about, but i think you should go the enzo humanized route with ubiquity and remove it from the browser. I think that ubiquity’s commands would be very useful in other apps to (ie; a word processer, jukebox)
steve
mockup 4 seems the most intuitive, but rather than having all of the keywords displayed on the right all at once waiting to slide in, there should only be the next operator waiting to be slid into place. In the example given in mockup 3 the to would be the only operator sitting on the right until the language is entered. Then a from would show up on the right waiting to be slid into place.
Craig S
Mockup 1: I like the inset to the right where you see the Ubiquity command above the bar, as this allows the function of the awesomebar to stay consistent as well as it keeps down the number of items that show up in the awesome bar in the first place, especially if I’m also using an extension like CyberSearch. However, I wasn’t thinknig of selecting it with tab (though that’d work too), but pressing Up to get to it. It is not really visually noisy, at least in this mockup.
Mockup 2, 3: As was said; too much interaction, too slow, too much work. Autocomplete and an arrow key press or two should always get us where we need to be.
Mockup 4, 5: It’s fine inside the awesomeBar or out as both look good here, but the advantage of keeping it out is that the awesomeBar does not have to get bigger. Outside of the bar you have a lot more flexibility to do what you want, and expand functionality
Evangel Shoutt
Hello
If you need tv shows seventys, watch ol time tv showz tv shows earrky 90s kitchen confdiential tv shows.
More about tv shows that tape in chicago read rmvb house tv shows
If you have any questions ppease contact us.
jadalyn jart
Hello
If you distress wawtch wnime tv shows, reel tv shows decorating shows on hg tv where cani watch tv shows online.
More helter-skelter tv shows house and monk presume from fix on demand tv shows
If you have any questions desire junction us.
Thoub quetz
If you know place where I can download watch tv shyows without firefox, Thanks
Armand Abise
Please contact me if you have in the offing top-ratwd tvshows of alltime, Thanks
Zayıflama Lida Fx15 Ve Biber Hapı Zlfvbh
Not entirely what your article is about, but i think you should go the enzo humanized route with ubiquity and remove it from the browser. I think that ubiquity’s commands would be very useful in other apps to (ie; a word processer, jukebox)