Pie menu

Last updated
A pie menu EasyGestures PieMenu.png
A pie menu

In user interface design, a pie menu or 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.

Contents

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, and a mouse click could be used to trigger an item or submenu. [6]

The first performance comparison to linear menus was performed in 1988, and showed an increase in performance of 15% less time and a reduction of selection errors. [7]

The role-playing video game Secret of Mana featured an innovative icon-based radial menu system in 1993. [8] Its ring menu system was adopted by later video games. [9]

Usage

Pie menus are a self-revealing gestural interface: they display multiple options to a user and direct them to select one.

Users operate the menu by observing the labels or icons present as options, moving the pointer in the desired direction, then clicking to make a selection. This action is called a "mark ahead" ("mouse ahead" in the case of a mouse, "wave ahead" in the case of a dataglove).[ citation needed ]

Repetition of actions and memorization of the interface further simplify the user experience. 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] [10] 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. [11] 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] [12]

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. [13]

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

Software

A pie menu in the Sugar desktop environment XO laptop running GUI "Sugar" in "home view".png
A pie menu in the Sugar desktop environment

Games

See also

Related Research Articles

<span class="mw-page-title-main">Context menu</span> User interface element

A context menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application to which the menu belongs. Usually the available choices are actions related to the selected object. From a technical point of view, such a context menu is a graphical control element.

<span class="mw-page-title-main">Pointing device gesture</span>

In computing, a pointing device gesture or mouse gesture is a way of combining pointing device or finger movements and clicks that the software recognizes as a specific computer event and responds to accordingly. They can be useful for people who have difficulties typing on a keyboard. For example, in a web browser, a user can navigate to the previously viewed page by pressing the right pointing device button, moving the pointing device briefly to the left, then releasing the button.

Gecko is a browser engine developed by Mozilla. It is used in the Firefox browser, the Thunderbird email client, and many other projects.

<span class="mw-page-title-main">Menu (computing)</span> List of options or commands within a computer program

In user interface design, a menu is a list of options presented to the user.

Pop-up ads or pop-ups are forms of online advertising on the World Wide Web. A pop-up is a graphical user interface (GUI) display area, usually a small window, that suddenly appears in the foreground of the visual interface. The pop-up window containing an advertisement is usually generated by JavaScript that uses cross-site scripting (XSS), sometimes with a secondary payload that uses Adobe Flash. They can also be generated by other vulnerabilities/security holes in browser security.

<span class="mw-page-title-main">Graphical widget</span> Element of interaction in a graphical user interface

A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, Qt, GTK, and Cocoa, contain a collection of controls and the logic to render these.

<span class="mw-page-title-main">Tooltip</span> Graphical user interface element

The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, what an abbreviation stands for, or the exact absolute time stamp over a relative time. In common practice, the tooltip is displayed continuously as long as the user hovers over the element or the text box provided by the tool. It is sometimes possible for the mouse to hover within the text box provided to activate a nested tooltip, and this can continue to any depth, often with multiple text boxes overlapped.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

<span class="mw-page-title-main">Tab (interface)</span> Interface component

In interface design, a tab is a graphical user interface object that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panels, with window managers and tiling window managers.

Don Hopkins is an artist and programmer specializing in human computer interaction and computer graphics. He is an alumnus of the University of Maryland and a former member of the University of Maryland Human–Computer Interaction Lab.

DOM Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. Client-side scripting languages like JavaScript, JScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.

In computing, a mouseover, mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers. For example, hovering over a hyperlink triggers the mouseover control element to display a URL on the status bar. Site designers can define their own mouseover events using JavaScript or Cascading Style Sheets.

Mozilla Firefox has features which distinguish it from other web browsers, such as Google Chrome, Safari, and Microsoft Edge.

<span class="mw-page-title-main">Mozilla Application Suite</span> Discontinued Internet suite

The Mozilla Application Suite is a discontinued cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It was based on the source code of Netscape Communicator. The development was spearheaded by the Mozilla Organization from 1998 to 2003, and by the Mozilla Foundation from 2003 to 2006.

A menu bar is a graphical control element which contains drop-down menus.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

<span class="mw-page-title-main">Features of the Opera web browser</span> List of software application features

This article details features of the Opera web browser.

In programming and software design, an event is an action or occurrence recognized by software, often originating asynchronously from the external environment, that may be handled by the software. Computer events can be generated or triggered by the system, by the user, or in other ways. Typically, events are handled synchronously with the program flow. That is, the software may have one or more dedicated places where events are handled, frequently an event loop.

<span class="mw-page-title-main">Interaction technique</span>

An interaction technique, user interface technique or input technique is a combination of hardware and software elements that provides a way for computer users to accomplish a single task. For example, one can go back to the previously visited page on a Web browser by either clicking a button, pressing a key, performing a mouse gesture or uttering a speech command. It is a widely used term in human-computer interaction. In particular, the term "new interaction technique" is frequently used to introduce a novel user interface design idea.

References

  1. 1 2 3 4 Hopkins, Don (December 1991). "The Design and Implementation of Pie Menus". Dr. Dobb's Journal . Archived from the original on 2009-12-25. Retrieved December 15, 2009.
  2. ↑ Gordon Kurtenbach1 and William Buxton. "User Learning and Performance with Marking Menus".{{cite web}}: CS1 maint: numeric names: authors list (link)
  3. 1 2 "Extremely Efficient Menu Selection: Marking Menus for the Flash Platform » b-log – betriebsraum weblog".
  4. ↑ Don Hopkins. "Dynamic Pie Menus". Archived from the original on 2009-11-20. Retrieved 2009-12-29.
  5. ↑ Gord Kurtenbach (April 2004). "Notes on the History of Radial menus, Pie menus and Marking menus".
  6. ↑ Don Hopkins. "Theta Menus Proposal and Pie Menu Designs - May 1986". Archived from the original on 2011-06-11. Retrieved 2010-04-07.
  7. ↑ 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.
  8. ↑ Dungeons and Desktops: The History of Computer Role-Playing Games. CRC Press. 2008. p. 220. ISBN   9781439865248.
  9. ↑ "Retrospective: Secret Of Mana". Edge . Future plc. 2014-06-01. Archived from the original on 2014-07-15. Retrieved 2014-08-20.
  10. ↑ Shneiderman, Ben; Plaisant, Catherine; Botafogo, Rodrigo; Hopkins, Don; Weiland, William. "Designing to Facilitate Browsing: A Look Back at the Hyperties Workstation Browser". University of Maryland: Human-Computer Interaction Laboratory. Archived from the original on 2009-12-25. Retrieved December 15, 2009.
  11. ↑ Hopkins, Don. "Pie Menus on Python/GTK/Cairo for OLPC Sugar". Archived from the original on 2007-04-27. Retrieved December 15, 2009.
  12. ↑ "www.markingmenus.org". Archived from the original on 2010-03-28. Retrieved 2010-04-07.
  13. ↑ 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.
  14. ↑ Understanding 3-D animation using Maya by John Edgar Park
  15. ↑ "Maximum PC Oct 1998". October 1998.
  16. ↑ John Breslin. "A Tale Of Two Atoms: AtomPub And Atom Interface". newtechpost.com.[ permanent dead link ]
  17. ↑ "AUUGN Mar 2003". March 2003.
  18. ↑ Mozilla Firefox 4 (in German)
  19. ↑ Graziano, Dan. "Make sure you're using the S Pen correctly". CNET.
  20. ↑ "S Pen on the Note 4 is better than ever: Feature Focus". Android Authority. October 2, 2014. Archived from the original on January 19, 2022. Retrieved January 19, 2022.
  21. ↑ Staff, GreenBot (14 August 2015). "4 new noteworthy features of the Galaxy Note 5's S n".
  22. ↑ Hopkins, Don (2018-07-07). "The Sims, Pie Menus, Edith Editing, and SimAntics Visual Programming Demo". medium.com. Archived from the original on 2018-12-19. Retrieved 18 December 2018.
  23. ↑ Seitz, Dan (2013-09-17). "'Grand Theft Auto V' Plays Like A Whole New Game". Uproxx. Retrieved 5 February 2015.
  24. ↑ Campbell, Greg. "Secret of Mana - Retroview". RPGamer. Archived from the original on 2014-01-18. Retrieved 2008-12-24.
  25. ↑ "Ring of Fire: How Secret of Mana Perfected the Action RPG". videogamesarerad.com. Archived from the original on 2020-07-28. Retrieved 2012-02-29.
  26. ↑ "Review: Unavowed". davidyat.es. 3 February 2019.
  27. ↑ "The Curse of Monkey Island - Gamer Walkthroughs". gamerwalkthroughs.com.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.