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:
(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:
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?
Ben Galbraith 
Looks great looking forward to try that
im in love!
I looks cool, refreshing to see new stuff… for interfaces.
However in my opinion… it feels like it disables a big area usable for content, never the less quite enjoyable for non space critical pages.
Great idea. The first time I heard about this kind of menus a few years ago I didn’t really like them, but when I used them on some things I loved them. It’s the kind of thing you need to try to know how it feels useful.
One great example I remember (and I think some of the guys from it are on this Mozilla Labs team now, so the idea probably even comes from there) is Songza. I love how you click on a song result and have the possible actions right there.
As a web developer, I’m a strong vim user, and I love to be able to execute actions by executing commands and not having to pick up the mouse or move my hands to the touchpad. I really wouldn’t mind having this kind of visual aid available.
Keep up the great work and please consider this idea as a valid option. Even if users find it weird at first, I think they’ll grow to love it.
Great Idea and really well executed, though maybe an option to set the pie to fade in/out (like command+tab in osx) instead of the animation, as having the pie continuously zooming in and out might get a bit much.
You are wrong about Eclipse’s “small” code-window. Just clicking on the tab-button of the code-editor maximizes the editor and let’s dissappear the other views. Why do you think that your solution is better or more intuitive then Eclipse’s approach? Just clicking on a tab-button isn’t hard.
I like the idea, in fact, I always got the feeling that interfaces developed for games can have something to tech to the professional coders, and you can find circular menus on many RPG games that work well and handy.
About the Eclipse example, since Eclipse is highly configurable, you eventually end up with something useful and less cluttered, but you always have the feeling that the IDE do little to help you. Eclipse 3.4 was a huge step forward (nice minimized groups, windows popups and closes automatically when needed), but I think that the real challenge here is to get something that can understand what you are doing and adapt the interface to show what you need.
@Tiago Rodrigues: We’re definitely focused on keyboard friendliness. I hate having to use the mouse.
@Aaron Moodle: Definitely. The “candy” will all be optional.
@Wolfie: Sorry, I didn’t intend to imply that you couldn’t maximize the code window. My point was that, by default, Eclipse’s UI is complex, cluttered, and intimidating.
We’re interested in making sure Bespin is powerful but doesn’t have a complex, cluttered, and intimidating default user experience.
@druellen: That’s the tricky part–getting the editor to correctly guess your intent. As the industry explores “smart” interfaces, I hope we come up with better answers than the iPhone’s spelling auto-correct, which gets it right often, but also gets it wrong often, creating an unpleasant experience overall.
We’re anxiously exploring ways where we can reliably guess intent with only a small, small amount of false positive guesses, or scenarios where the cost of a false positive is negligible (as in, doesn’t create any extra work for the user whatsoever).
Thanks everyone for the great feedback!
Ben,
It looks really nice. It reminds me of Maya, the 3D program from Autodesk. They have a nice feature whereby you hit the space bar, and this floating “HotBox’ shows up, and you can either click on one of them or just gesture in a particular direction to get what you want. Here’s a sample of a simple hotbox of theirs: http://www.benwatt.net/maya/maya8screen.jpg
Also, Pie Menu: http://en.wikipedia.org/wiki/Pie_menu
Here’s something I did around 1991 or so.
Tab Window Demo: (16919514 bytes)
Demo of the Pie Menu Tab Window Manager for The NeWS Toolkit 2.0. Developed and demonstrated by Don Hopkins.
http://www.donhopkins.com/home/movies/TabWindowDemo.mov
And a demo of the pie menus in The Sims:
The Sims Pie Menus: (49471706 bytes)
Demo of the pie menus in The Sims, as well as the Edith editing tool and visual programming environment used to dynamically generate the menus and control behaviors. The Sims and Edith developed at Maxis by Will Wright, Jamie Doornbos, Eric Bowman, Jim Mackraz and Don Hopkins. Pie menus, character animation system, architectural editing tools and visual programming tools developed and demonstrated by Don Hopkins.
http://www.donhopkins.com/home/movies/TheSimsPieMenus.mov
Lots more videos of pie menus and stuff:
http://www.donhopkins.com/home/movies
More pie menu stuff at http://www.piemenu.com and more up to date stuff on the wikipedia pie menu page.
http://en.wikipedia.org/wiki/Pie_menu
I’d write more, but it’s Saturday night in Amsterdam! More later.
-Don
Looks great! Although I am too a vim guy which would use the mouse very rarely for editing tasks.
Is it actually planned to release bespin as an “offline” editor as well, which can just be used locally without any dependency on mozilla.org?
@maxauthority: Yep, we’re planning on an off-line version too.
You know, not to point out the wasted time, but this is similar to the pop up menu’s around characters in a couple of D&D (Dungeon’s and Dragons) computer games over the last several years. I think they continued it to an extreme with the constantly expanding circles but the basic Idea of a circular pop-up context menu is there – though in that case it is designed to avoid obscuring the gaming screen with menues rather than as an option to switch screens.
Might want to spend some money and spend a few hours with one of the games to see how their solution might inform yours.
I usually don’t like popups. What I like about Eclipse is that it displays information that I currently need, statically in one place. What I dislike is that you need a lot of different views to span the whole range of interesting information. Bespin could have a solution that has the pros of Eclipse without its cons: something shell-like where you bring up what you are currently interested in. Instead of text, as with traditional shells, it would contain a scrolled stream of widgets, text, and graphical information.
I think that would scale well: if you have no screen real estate, you turn the shell into a popup. If you have a little more screen real estate, you keep the shell as a static side-bar. If you have lots, you can clone the shell several times.
Obviously, to make the shell work, one would have to come up with new ideas to quickly visualize things such as “the files I am currently interested in” or “what method invokes another method in a class that inherits from class X”. Doing this generically is not easy.
Looks great!
I’m gonna try that
I got too distracted with puck_off 😉
Hi… it’s awesome! is the menu js code open source? can i found the code somewere?
Hi Ben, I have dont same pie menu from canvas 🙂 with using mouse hold and mouse right click and key board shortcut appear. It’s like when you click A B C, different pies will be appear 🙂
Viran
I rarely leave remarks, but I browsed a few remarks here The
Bespin Pie | Ben Galbraith’s Blog. I actually do have a few
questions for you if you do not mind. Could it be only me or
do a few of the comments appear like they are coming
from brain dead folks? 😛 And, if you are posting at other sites,
I’d like to follow you. Would you post a list of
every one of your shared sites like your linkedin profile, Facebook page or twitter feed?