Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Mozilla Calculates the Potential Value of Pie

pie vs list menusMost of us don’t give the humble context menu much thought. We right-click, a menu pops up, we choose what we want and that’s about it. However, user interface designers are always looking for ways to improve that interaction and one possible idea is the radial or pie menu.

Jono DiCarlo, a user interface designer at Mozilla recently suggested some possible changes for the content menu that might make it a bit easier to use. DiCarlo thinks that the pie-shaped menu might have some advantages over the simple list — all the possible choices are equidistant from your mouse, there’s no need to scroll through a long list of options.

Pie menus also fall in line with Fitts’ Law, which basically says that the less human movement necessary, the better the interface. Since a pie menu requires very little movement (all the options are equidistant from the starting point) it’s pretty easy to use.

Fitts’ Law isn’t the only sound argument in favor of pie menus, as DiCarlo writes:

We usually think of the menu that you see on the screen as a UI element, but here’s a different way to think about it: the mouse gesture IS the command. The menu on the screen is just visual feedback to help you find the right mouse gesture.

With a traditional list-style menu, the mouse gesture consists of moving downward by a certain distance. Choosing a different item means moving a different distance downward.

With a pie menu, the gesture consists of moving a certain direction. Choosing a different item means moving a different direction.

Of course gestures, and even pie menus, are nothing new, lots of popular apps use them — Maya, the 3D modeling app, has pie menus and even Mozilla has experimented with them in the past.

However, the pie menu is also fraught with potential problems — for instance, if choosing an item from a pie menu means moving the mouse in a different direction, then how do you figure out which direction to move? With a list it’s easy: you move down. With a pie, well, who knows?

And the which direction question gets more complicated if you have a lot of items in your pie menu: too many options means very small, difficult to select pie pieces. Another problem crops up with constantly changing menu items, which means the item you want may be in a different place each time you see the menu. Then there’s the most basic problem of pie menus — where do start reading the pie? The top slice? The left-most slice? The right most slice?

DiCarlo addresses some of these issues and points out that, clearly, the pie menu is not right for every situation. However he makes a compelling case for certain instances where it might be quite handy.

There are some examples available if you’d like to play around with the idea (though you’ll need Firefox 3+). If you want a more real-world example of a pie menu, check out the Firefox extension Radial Context, which turns the Firefox context menu into a pie menu.

As with any unusual UI suggestion there are many detractors who feel that traditional list menus are common for a very good reason: they just work. However, if we’ve learned anything from Apple’s various touchscreen UIs, it’s that sometimes breaking from tradition yields a better interface.

See Also:

Post Comment Comments Permalink Print
Reddit Digg

 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year