I’d like to give an update on an interface concept we’re exploring for Bespin. We call it “The Pie”.
We’re hoping the Pie solves a couple of problems for us. Let me take a couple of steps back. Currently, Bespin has two screens, a “dashboard” and the editor itself.
We’ve not been happy with this arrangement.
You see, our original concept for the dashboard was that it would have all kinds of neato project statistics, showing information on your productivity, where you are spending most of your time editing, real-time information on others currently working in the same project, etc. You know, a dashboard.
But the “dashboard” in the Bespin 0.1 and 0.2 releases is just a file explorer. And it’s been the only way to open files, so Bespin users have to constantly go back and forth between the dashboard and the editor. Bleah.
Augmenting the Editor
Our first approach to solving this problem was bringing the dashboard into the editor:
While we developed a bunch of ideas for making this into a pretty good experience, we couldn’t get past the uneasy feeling that we were taking the first step towards this kind of an interface:
A typical Eclipse configuration. Note how small a space is left over for code
(the region in color; I made the rest monochrome) and how much of the interface is wasted on clutter.
One of our goals for Bespin is to keep it simple–while still providing advanced features. So the thought of winding up with an interface with so many knobs and dials gives us more than a few shudders. Plus, it’s just fugly.
Don’t get me wrong–I’m sure lots of folks like the traditional IDE clutter-up-your-world-with-panels style, and we want to support that. But we want to be absolutely sure that clutter doesn’t become the default, nor the required way to interact with Bespin in order to utilize most of its helpful features.
The Pie
As we discussed these issues, we started thinking more about a concept I’ve been pondering for a while for mobile devices: a predictive pop-up that groks HTML, CSS, and JavaScript grammars and based on context predicts with high accuracy a reduced set of words you’re likely to want to type next (outside of free-form text entry, of course). For example, given a blank link in JavaScript, we can predict that you’re likely to type one of “var, if, for, while” and so forth. Obviously, there’s lots of challenges involved in getting this right, and it may be unworkable entirely.
We took this basic concept and re-imagined it in a more general-purpose application:
And, as of this morning, we’ve got some of this implemented in Bespin:
I apologize for the dark colors; we’re still tweaking the details
The idea is that you can use the mouse (right-click) or the keyboard (CTRL-K) to bring up the pie, and then select the quadrant (up, down, left, right on the keyboard) you want, and a pop-up menu renders the content. You can also skip directly to the area you want with a direct keyboard short-cut (e.g., CTRL-J for the command-line); selecting it with the mouse just requires a gesture towards the desired icon.
Why a Pie?
We’re intrigued by this concept for a few reasons:
- On small screens (e.g., iPhone), the interface still works well. The pie would appear first, and once you make a selection, it disappears and is replaced by the pop-up. This is an easy adaption to make, and we’re designing the contents of the pop-ups to scale to different sizes easily.
- The pie will pop-up exactly where the mouse right-clicks, minimizing the effort required for the mouse to select items (see this demo from Jono for more detail on that point). For the keyboard, the pie will always appear in the bottom of the screen.
- The number of pie pieces can expand, giving users a top-level short-cut mechanism that is easy to use with the keyboard and mouse
- It’s different, a bit whimsical, and hopefully fun (will take some tweaking to find out for sure)
There’s lots more to discuss about finer details and interactions, but I’ll save those for another post once we start refining things a bit and getting feedback from others. (All of the details now are in flux; e.g., we’re not crazy about the individual icons in the pie yet).
Enter the Gratuitous Animation
But before I go, I wanted to show you a bit of fun we had with the pie. Another of our goals with Bespin is to make it fun, and so of course we can’t just have the pie menu appear. We designed a couple of different animation effects describing how it could come in and go out:
Here’s how it turned out:
You can see a stand-alone, live version of the animation by clicking on the image below (but you’ll need a canvas-compatible browser, such as Firefox 3+, Safari 3+, Chrome, etc.):
We’re pretty impressed by how quickly canvas animations render on Safari 4, Firefox 3, and Firefox 3.5 beta. Even when we run the animation on a huge window, we’re able to alpha-blend every pixel in the window to create a fade out effect on the window contents while rotating the pie into place. Nice job, browser graphics gurus! Thanks for making it so fast.
We did the animation by hijacking Dojo’s animation facility a touch:
var anim = dojo.fadeIn({
// create a fake node because Dojo Animation
// expects to mutate DOM node properties
node: {
style: {}
},
duration: 500,
// use one of Dojo's fancy easing functions
easing: dojo.fx.easing.backOut,
// Dojo supports an onAnimate() callback for each frame
// of the animation and passes in values that it is setting
// on the DOM node. We'll grab "opacity" and use it as a
// general "progress" value.
onAnimate: function(values) {
var progress = values.opacity;
renderPie(progress);
}
});
anim.play();
As with everything we do here in Mozilla Labs, this is experimental–it may be we come crawling back to docking panels as our primary interface metaphor.
What do you think?
