I recently was admiring the slick keyboard interface for Dropular, a sort of communal blog for sharing interesting finds on the net. It has that Swiss-minimalism-meets-interaction-design feel, which is enhanced by a modernist legend explaining how to operate the thing (although I wish the legend faded away after I got the hang of it). The interaction is simple: you use the arrow keys to automatically animate to the next/previous item.

I passed the link around, and my friends over at Weardrobe.com thought the interaction would make a good match for their homepage. They wanted to try it out, and since they haven’t seen the light of jQuery yet, I thought it would be fun to rapidly prototype it for them. For the unexpected fun the interaction yields, it doesn’t take much code to make it happen.

I was tempted to break out the pageLoad ability of Ubiquity, but decided instead to do a the project using Greasemonkey as a comparative experience. Half an hour later, the prototype was working and ready for them to play with. To try it out:

(1) Install Greasemonkey (you’ll need to be using Firefox).
(2) Install this Greasmonkey script.

(3) Head over to Weardrobe and use the up/down keys. Try using down-arrow at the very bottom of the page.

It turns out that while Greasemonkey was fairly painless, I wasn’t able to find an easy way to work with jQuery. I’d have gotten that for free with Ubiquity. The end-user installation process is also a bit more humane with Ubiquity.

I don’t know if Weardrobe will add the keyboard navigation aid to their site, but if they decide to, the hard work has already been done — it would be a matter of minutes to integrate the code.

In general, using the browser’s run-time as a prototyping environment enables ridiculously fast rapid prototyping. There are no deployment steps to worry about, changes are reflected instantly, and all changes are dog-foodable from the get-go. Prototyping is also entirely decoupled and parallelizable: that’s especially powerful when you don’t have access to the site for which you are making a live-patch, the backend code is obtuse, or when you multiple have competing ideas for changes you’d like to make. We actually use the same technique for prototyping new behaviors for the the Ubiquity code repository.

The next time you want to try out a new design or feature, break open Greasemonkey or Ubiquity to get a hands-on feel. You’ll be glad that you did. I know that we’ll be using the technique more here at Mozilla Labs.

RT @azaaza Rapid Prototyping with Greasemonkey | Follow @azaaza on Twitter | All blog posts