The Firefox UI team recently got together with the Bugzilla UI team to brainstorm future features and user experiences for Bugzilla.

We scoped our brainstorming session to be between trivial fixes and doable-in-a-couple-months features. That is, pragmatic, nearish-term sorta-big thinking. Our brainstorm revolved around four major themes: People, Bugs, Search, and Planning. Of course, during the session most of the themes blended together — real-life is never as orderly as our a priori taxonomies would have them.

Before we delve into our thoughts, what would make Bugzilla better for you? For a beginning contributor? For project management types? For a one-time bug submitter? Most of the Firefox contributors spend most of their day in Bugzilla, so any improvements made are dramatically multiplied.

Many thanks to the folks on both teams who took the time to sit down for the better part of an afternoon. In particular thanks go to Max Kanat-Alexander, Alex Faaborg, Jennifer Boriss, Madhava Enros, Dave Miller, and an especially large thanks for Guy Pyrzak (who took notes and guided the session).

Thoughts on Bugzilla

People

* Bugzilla is fundamentally about issue tracking. But Bugzilla is also scaffolding and structure for the people who report and fix those bugs. Make people first-class citizens in Bugzilla (yes—a social platform…)

* Help users determine “who is this guy”, when looking at bug reports and commenters. Dashboard for people: what bugs they’ve filed, what patches they’ve submitted, what groups they are in, how active they are, etc. See   Github for an example.

(more…)

For a side project, I needed a simple rhyming web service. Pass in a word, and have it spit out that word’s rhymes. A quick scan of the internet showed the impossible — it didn’t exist! 30 minutes of Python hacking later and the problem was rectified.

http://azarask.in/services/rhyme

The service can take two paramaters: q and callback. The former specifies the word to be rhymed with (self-rhymes excluded), and the later wraps the results in a function callback in JSONP-style. Data is returned in JSON format.

Here are two examples to get you started:

http://azarask.in/services/rhyme/?q=world

["curled", "hurled", "swirled", "twirled", "neworld", "transworld", "unfurled"]

http://azarask.in/services/rhyme/?q=world&callback=hello

hello(["curled", "hurled", "swirled", "twirled", "neworld", "transworld", "unfurled"])

The results are ordered by number of syllables and then alphabetically. If you make something cool, let me know! (I’m thinking about uses for the new canvas-based text APIs).

Easter egg: If you don’t specify any arguments then the service returns the rhymes of a very special word.

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.

Mouse-Based Ubiquity

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!

Thoughts

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.

(more…)

Ubiquity 0.2 is on the table for release in the very near term future. We’re talking weeks away. But, what is it? We sat down with Atul Varma, the lead developer of Ubiquity (among other things), to talk about the major changes underway.

What’s up with Ubiquity 0.2?

How To Help

The main way to help is by joining in the process of getting Ubiquity 0.1.3 out the door. Features are frozen but there are still some bugs left to quash. The full list is here.

There’s lots of things you can do to help:

If you don’t know how to code

Get the latest Ubiquity 0.1.3 release candidate to verify some of the bugs and help figure out under what conditions they occur. We could also use some people to just download the release candidate and bang on it, to find any bugs lurking in the shadows; if you find one, please feel free to file a ticket for it.

If you know how to code, feel free to assign a bug to yourself and submit a patch that fixes it. Join us on #ubiquity on irc.mozilla.org if you have any questions or want to discuss solutions with our core developers.

As soon as these are finished, we should be able to get 0.1.3 out the door, which will drastically improve the speed of Ubiquity and make it a lot prettier.

We often only display to the world a final, finished product design. That’s sort of like releasing only the last 10 minutes of a movie: it doesn’t show all of the mis-starts and dead-ends that to make the final ending meaningful. I’d like to explain one of the first sketches we did of the Ubiquity mouse-based interface, and why we didn’t stick with it.

Usage:

Step one: Make a selection. The Ubiquity action button appears.
Step two: Clicking the action button opens a context menu with suggested actions.
Step three: Hovering over an action shows its preview.
Step four: Clicking executes the action.
Step five: If the action you want isn’t available, click for more actions.

Critique:

Step one: I like this part. One of the largest problems with the current workflow of Ubiquity is that it requires you to remember to change it. That requires you to break your existing habits — I still sometimes catch myself doing a keyword search instead of using Ubiquity, despite the later being faster. By having a visual affordance that appears at the exact moment you need it (when you make a selection), the speed and convenience of Ubiquity is injected smoothly into your existing workflow. No need to stop and think.

(more…)

Much can be said about Ken Kovash. He is the new Friday. He is the new Barack Obama. He is your new bicycle.

Dan Mills, Lead Engineer of Mozilla Labs’ Weave sat down with me for a brief chat. In it he talks about what Weave is, what it’s good for, how it ties in with Firefox Mobile, when it will be in users hands, and what you can do to help.

Dan Mills on Mozilla Weave

It happens. You get handed the credit card receipt at the end of the night, your date waiting across from you, and have to shuffle through the multiple copies of the receipt to find the one your need to sign. Yellow is merchant, white is customer? White is merchant, yellow is customer? What’s the third one doing there anyway? You hurriedly sign one, sweating over tip and total, only to find the waiter tapping your shoulder asking for you to sign the other one.

Okay, it’s not normally that bad. Unless your date is tapping-her-foot impatient. But I know that I’ve signed the wrong one on a couple occasions, and I have to think about which one to sign on most occasions. In fact, when I’m paying at the counter, the clerk will almost always point out which copy I have to sign as I hesitate.

Is there a way to make this better — making it so simple that I don’t have to think, and that clerks don’t need to help their customers sign the right thing? Bigger typography and better explanations? Nobody reads those anyway. How can we fix it?

I restaurant I went to today had a great little hack that made it totally obvious. It took me a bit to realize that I hadn’t even hesitated during the signing process. Their solution was simple: just wrapping my copies of the reciept — the things I didn’t need to sign — around my credit card. The receipt I needed to sign had the right affordances: next to the pen, laid out flat, begging to be signed. The receipts I didn’t need to sign also had the right affordances: they were wrapped around an object destined to go back in my wallet.

It’s an excellent interface, and a great example of physical mistake proofing and poka-yoke. When I think back, there are other restaurants that do this too. I never noticed because it “just worked”. It was invisible — just like a great interface should be.

What examples of this kind of everyday, physical interface improvements have other people noticed?

As we near the release of Ubiquity 0.1.3, it’s time to start thinking about refreshing its visual identity. Abimanyu Raja’s new skin support makes it possible for artists and designers to drastically change the way Ubiquity is presented to the user. All it requires is some CSS: No programming required! The extra cool thing is that once you’ve made a skin, you can publish it on your website and others can subscribe to it with a single click — just like they can subscribe to any other Ubiquity command.

Yatrik Solanaki created a great Ubiquity skin called “Simpliquity”. It looks great, and we are considering adopting it as the default skin. It follows, however, the same interaction model that the original Ubiquity interface did. There are some problems with that model as a number of folks have pointed out.

The two major ones are: (1) The visual layout is confusing, and (2) There’s no clean way of using the keyboard to access the preview area. Here’s a new layout that tries to address some of these issues that I whipped up yesterday:

It tries to solve both problems using a left-right visual hierarchy. The up and down arrow keys can skip you between suggestions, and a right arrow key can put the focus into the preview area. This means that the various search commands’ results can be used without ever touching the mouse. The exact colors and layout aren’t exactly right, but the great thing is that it’s just a quick CSS tweak to change things around.

And that gets me to the thing I’m most excited about. All of this was done without ever breaking into the Ubiquity code. That, to me, is amazing. And a testament to the power of open-Web technologies.

(more…)

The word cloud of my blog checklist:

Interfaces. Check.
Ubiquity. Check.
Firefox. Check.
Users. Check.
Mobile. Check.
Supple. What the…?