Pie menu
In computer interface design, a pie menu (also known as a radial menu) is a circular context menu where selection depends on direction. It is a graphical control element. A pie menu is made of several "pie slices" around an inactive center and works best with stylus input, and well with a mouse. Pie slices are drawn with a hole in the middle for an easy way to exit the menu.
Pie menus work well with keyboard acceleration, particularly four and eight item menus, on the cursor keys and the number pad. A goal of pie menus is to provide a smooth, reliable gestural style of interaction for novices and experts.[1] A slice can lead to another pie menu; selecting this may center the pointer in the new menu.
A marking menu[2] is a variant of this technique that makes the menu less sensitive to variance in gesture size.[3]
As a kind of context menu, pie menus are often context-sensitive,[4] showing different options depending on what the pointer was pointing at when the menu was requested.
History
The first documented radial menu is attributed to a system called PIXIE in 1969. Some universities explored alternative visual layouts.[5]
In 1986, Mike Gallaher and Don Hopkins together independently arrived at the concept of a context menu based on the angle to the origin where the exact angle and radius could be passed as parameters to a command, or the radius could be used to trigger a submenu.[6]
The first performance comparison to linear menus was performed in 1988 showing an increase in performance of 15% less time and a reduction of selection errors.[7]
Usage
For novice users, pie menus are easy because they are a self-revealing gestural interface: They show what you can do and direct you how to do it. By clicking and popping up a pie menu, looking at the labels, moving the pointer in the desired direction, then clicking to make a selection, users learn the menu and practice the gesture to "mark ahead" ("mouse ahead" in the case of a mouse, "wave ahead" in the case of a dataglove). With a little practice, it becomes quite easy to mark ahead even through nested pie menus.
For the expert, the pie menus are more efficient. Because they might have built up the muscle memory for certain menu actions, and able to select the option they want without looking the pop up selections. In some cases, only when used more slowly like a traditional menu, does a pie menu pop up on the screen, to reveal the available selections. Moreover, novices can gradually become experts when they practice the same pie menu selection for many times and start to remember the menu and the motion. As Jaron Lanier of VPL Research has remarked, "The mind may forget, but the body remembers." Pie menus take advantage of the body's ability to remember muscle motion and direction, even when the mind has forgotten the corresponding symbolic labels.[1]
Comparison with other interaction techniques
Pie menus are faster and more reliable to select from than linear menus, because selection depends on direction instead of distance. The circular menu slices are large in size and near the pointer for fast interaction (see Fitts's law). Experienced users use muscle memory without looking at the menu while selecting from it.[1][8] Nested pie menus can efficiently offer many options, and some pie menus can pop up linear menus, and combine linear and radial items in the same menu.[9] Pie menus just like any popup menu are shown only when requested, resulting in less visual distraction and cognitive load than toolbars and menu bars that are always shown.
Pie menus show available options, in contrast to invisible mouse gestures. Pie menus, which delay appearance until the pointer is not moving, reduce intrusiveness to the same level as mouse gestures for experienced users. Pie menus take up more screen space than linear menus, and the number of slices in an individual menu must be kept low for effectiveness by using submenus. When using pie menus, submenus may overlap with the parent menu, but the parent menu may become translucent or hidden.
Pie menus are most suited for actions that have been laid out by humans, and have logical grouping choices. Linear menus are most suited for dynamic, large menus that have many possible options, without any logical grouping,[1] since pie menus can only show a limited number of menu items. Around 3-12 items can be reasonably accommodated in a radial layout, but additional items past that tend to counteract the benefits of using pie menus in the first place. This can be overcome with related techniques that allow chaining commands in one single gesture through submenus.[3][10]
However, using interaction techniques that are not pointer-based have proven problematic with both pie and linear menus for cluttered digital tabletop, where physical objects might occlude menu items.[11]
Pie menus are unavailable as standard graphical control element in common commercial toolkits. Video games often require custom widget development, so pie menu cost is lower in that particular scenario.
Notable implementations
- Secret of Mana[12] and its successor Secret of Evermore (where the menu was used to accelerate the pacing of combat[13])
- Grand Theft Auto V[14]
- PowerAnimator, a commercial 3D modelling program that used marking menus[15]
- Mozilla and Mozilla Firefox extensions RadialContext[16][17] and easyGestures[18]
- Autodesk Maya, a commercial 3D modelling program[19]
- Metisse and Unix Desktop Environment, window managers for the X Window System
- modo, an advanced polygon and subdivision surface modeling package
- Songza, a music search engine and internet jukebox that uses a pie menu for its main mode of interaction, by Aza Raskin
- Quicksilver via the Constellation plug-in
- Sugar (GUI), GUI implementation for the One Laptop per Child project
- BumpTop, a computer desktop created to mimic paper files on a real world desk that uses pie menus as many of its control menus
- Android Browser in Android
- OneNote App for Windows 8 and Windows RT
- The Cherry mouse driver for the Power Pad mouse M-1000 optionally offers a circular context menu
- The Temple of Elemental Evil (video game)
See also
References
- 1 2 3 4 Hopkins, Don (December 1991). "The Design and Implementation of Pie Menus". Dr. Dobb's Journal. Retrieved December 15, 2009.
- ↑ Gordon Kurtenbach1 and William Buxton. "User Learning and Performance with Marking Menus".
- ↑ Don Hopkins. "Dynamic Pie Menus".
- ↑ Gordon Kurtenbach (April 2004). "Notes on the History of Radial menus, Pie menus and Marking menus" (PDF).
- ↑ Don Hopkins. "Theta Menus Proposal and Pie Menu Designs - May 1986".
- ↑ Callahan, Jack; Hopkins, Don; Weiser, Mark; Shneiderman, Ben (1988). "An empirical comparison of pie vs. linear menus". Proceedings of ACM CHI Conference on Human Factors in Computing Systems. pp. 95–100. http://doi.acm.org/10.1145/57167.57182.
- ↑ Shneiderman, Ben; Plaisant, Catherine; Botafogo, Rodrigo; Hopkins, Don; Weiland, William. "Designing to Facilitate Browsing: A Look Back at the Hyperties Workstation Browser". Human-Computer Interaction Laboratory, University of Maryland. Retrieved December 15, 2009.
- ↑ Hopkins, Don. "Pie Menus on Python/GTK/Cairo for OLPC Sugar". Retrieved December 15, 2009.
- ↑ www.markingmenus.org
- ↑ Leithinger, D; Haller, M (October 10–12, 2007). "Improving Menu Interaction for Cluttered Tabletop Setups with User-Drawn Path Menus". Horizontal Interactive Human-Computer Systems, 2007. TABLETOP '07. Second Annual IEEE International Workshop on. Newport, RI. pp. 121–128. doi:10.1109/TABLETOP.2007.24. ISBN 978-0-7695-2013-1. Retrieved December 15, 2009.
- ↑ Campbell, Greg. "Secret of Mana - Retroview". RPGamer. Retrieved 2008-12-24.
- ↑ "Ring of Fire: How Secret of Mana Perfected the Action RPG". videogamesarerad.com.
- ↑ Seitz, Dan. "'Grand Theft Auto V' Plays Like A Whole New Game". Uproxx. Retrieved 5 February 2015.
- ↑ Maximum PC Oct 1998
- ↑ John Breslin. "A Tale Of Two Atoms: AtomPub And Atom Interface". http://newtechpost.com. External link in
|publisher=
(help) - ↑ AUUGN Mar 2003
- ↑ Mozilla Firefox 4 (in German)
- ↑ Understanding 3-D animation using Maya by John Edgar Park
- Wiseman, N. E.; Lemke, H. U.; Hiles, J. O. "PIXIE: A New Approach to Graphical Man-Machine Communications". Proceedings of 1969 CAD Conference Southampton, IEEE Conference Publication 51. p. 463.
External links
- The Flower Menu is a marking menu implementation for Qt (Software)
- Tcl/Tk - A simple implementation in pure Tcl/Tk
- Pie Menus in c2 wiki
- Pie Menus for Qt
- Pie Menus for OLPC Sugar User Interface, in Python with GTK, Cairo and Pango modules
- Slashdot article: Pie-menus in Mozilla
- Asymetrix [ToolBook] pie menu component, by Paolo Tosolini. Source code: .
- Python - Open source Python pie menus for GTK/Cairo/Pango/OLPC/Sugar user interface, by Don Hopkins.
- OpenLaszlo - Open source OpenLaszlo pie menus for Flash, by Don Hopkins.
- JavaScript - Open source JavaScript pie menus for the Internet Explorer browser, by Don Hopkins.
- JavaScript/jQuery Radmenu Plugin, Open source JavaScript radial / pie menus for ALL browsers, by Nirvana Tikku.
- ActiveX - Open source C++ ActiveX pie menus for the Internet Explorer browser, by Don Hopkins.
- X11 - Open source "piewm" X11 window manager with pie menus, by Don Hopkins, maintained by Russ Nelson.
- TCL/Tk - Free software Pie Menus for TCK/Tk, written in 1992 for SimCity by Don Hopkins.
- NeWS - Free software Pie Menus for NeWS 1.1 written in March 1988 by Don Hopkins.
- X10 - Free software Pie Menus for X10 "uwm" Window Manager, written in June 1986 by Don Hopkins.
- Suntools - Free software Pie Menus for Suntools, written in January 1987 by Mark Weiser.
- X10 - Free software Theta menus, proof of concept prototype for X10, written in June 1986 by Don Hopkins.
- Pie Menu Articles by Don Hopkins
- Circle Menus, by Greg Bronevetsky.
- 3D Circle Menu Variation - Cube Menu, by conquex with source code.
- Asymetrix [ToolBook] pie menu component, by Paolo Tosolini. Source code: .
- Pie Menus for Windows, Dr. Dobb's Journal, Nov., 1992, pp 30–39, by Carl Rollo.
- Pie Menus Demonstration in Java, by Carl Rollo.
- WPF Pie Menu, by Christoph Menge
- wheelnav.js, Animated JavaScript navigation component based on Raphaël (JavaScript library) (SVG/VML) by softwaretailoring.net