Pie menu explained

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.

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. A slice can lead to another pie menu; selecting this may center the pointer in the new menu.

A marking menu[1] is a variant of this technique that makes the menu less sensitive to variance in gesture size.

As a kind of context menu, pie menus are often context-sensitive,[2] 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.[3]

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

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

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

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).

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.

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.[8] [9] 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.[10] 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, 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.[11] [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

Games

See also

References

External links

Notes and References

  1. Web site: User Learning and Performance with Marking Menus. Gordon Kurtenbach1 and William Buxton.
  2. Web site: Dynamic Pie Menus. Don Hopkins. 2009-12-29. https://web.archive.org/web/20091120102819/http://www.donhopkins.com/drupal/node/68. 2009-11-20. dead.
  3. Web site: Notes on the History of Radial menus, Pie menus and Marking menus. Gord Kurtenbach. April 2004 .
  4. Web site: Theta Menus Proposal and Pie Menu Designs - May 1986. Don Hopkins. 2010-04-07. https://web.archive.org/web/20110611185226/http://www.donhopkins.com/drupal/node/82. 2011-06-11. dead.
  5. 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.
  6. Book: Dungeons and Desktops: The History of Computer Role-Playing Games. 2008. CRC Press. 9781439865248. 220. en.
  7. Retrospective: Secret Of Mana . . . 2014-06-01 . 2014-08-20. https://web.archive.org/web/20140715210921/http://www.edge-online.com/features/retrospective-secret-of-mana/ . 2014-07-15 . live.
  8. The Design and Implementation of Pie Menus . Don . Hopkins . Don Hopkins . . December 1991 . December 15, 2009 . https://web.archive.org/web/20091225004939/http://www.donhopkins.com/drupal/node/98 . 2009-12-25 . dead .
  9. Web site: Designing to Facilitate Browsing: A Look Back at the Hyperties Workstation Browser . Ben . Shneiderman . Ben Shneiderman . Catherine . Plaisant . Rodrigo . Botafogo . Don . Hopkins . Don Hopkins . William . Weiland . Human-Computer Interaction Laboratory . . December 15, 2009 . https://web.archive.org/web/20091225004931/http://www.donhopkins.com/drupal/node/102 . 2009-12-25 . dead .
  10. Web site: Pie Menus on Python/GTK/Cairo for OLPC Sugar . Don . Hopkins . Don Hopkins . December 15, 2009 . https://web.archive.org/web/20070427222309/http://www.donhopkins.com/drupal/node/128 . 2007-04-27 . dead .
  11. Web site: Extremely Efficient Menu Selection: Marking Menus for the Flash Platform » b-log – betriebsraum weblog.
  12. Web site: www.markingmenus.org . 2010-04-07 . https://web.archive.org/web/20100328113318/http://www.markingmenus.org/ . 2010-03-28 . dead .
  13. Improving Menu Interaction for Cluttered Tabletop Setups with User-Drawn Path Menus . Leithinger . D . Haller . M . Horizontal Interactive Human-Computer Systems, 2007. TABLETOP '07. Second Annual IEEE International Workshop on . October 10–12, 2007 . 121–128 . Newport, RI . 978-0-7695-2013-1 . 10.1109/TABLETOP.2007.24 .
  14. https://books.google.com/books?id=z-IJWp3u-j4C&dq=maya+%22radial+menu%22&pg=PA143 Understanding 3-D animation using Maya
  15. Web site: Maximum PC Oct 1998. October 1998.
  16. Web site: A Tale Of Two Atoms: AtomPub And Atom Interface. John Breslin. newtechpost.com. John Breslin.
  17. Web site: AUUGN Mar 2003. March 2003.
  18. https://books.google.com/books?id=3WdQ3CZSw7UC&dq=easygestures&pg=PA155 Mozilla Firefox 4
  19. Web site: Make sure you're using the S Pen correctly. Dan. Graziano. CNET.
  20. Web site: S Pen on the Note 4 is better than ever: Feature Focus. October 2, 2014. Android Authority. January 19, 2022. January 19, 2022. https://web.archive.org/web/20220119012837/https://www.androidauthority.com/note-4-s-pen-feature-532978/. dead.
  21. Web site: 4 new noteworthy features of the Galaxy Note 5's S n. GreenBot. Staff. 14 August 2015.
  22. Web site: Hopkins . Don . The Sims, Pie Menus, Edith Editing, and SimAntics Visual Programming Demo . medium.com . 18 December 2018 . 2018-07-07 . 2018-12-19 . https://web.archive.org/web/20181219001040/https://medium.com/@donhopkins/the-sims-pie-menus-49ca02a74da3 . dead .
  23. Web site: 'Grand Theft Auto V' Plays Like A Whole New Game . Seitz . Dan . Uproxx . 5 February 2015. 2013-09-17 .
  24. Web site: Campbell, Greg . Secret of Mana - Retroview . RPGamer . 2008-12-24 . https://web.archive.org/web/20140118175015/http://www.rpgamer.com/games/sd/som/reviews/somrdrev2.html . 2014-01-18 . dead .
  25. Web site: Ring of Fire: How Secret of Mana Perfected the Action RPG. videogamesarerad.com. 2012-02-29. 2020-07-28. https://web.archive.org/web/20200728094345/http://videogamesarerad.com/2012/02/22/ring-of-fire-how-secret-of-mana-perfected-the-action-rpg/. dead.
  26. Web site: Review: Unavowed. davidyat.es. 3 February 2019 .
  27. Web site: The Curse of Monkey Island - Gamer Walkthroughs. gamerwalkthroughs.com.