TLDR: bla bla bla pie menus bla bla bla. ;)<p>Fitts' Law inspired my work with pie menus [1] and gestural direct manipulation user interfaces over the years. [2]<p>[1] Pie Menus on Wikipedia:
<a href="https://en.wikipedia.org/wiki/Pie_menu" rel="nofollow">https://en.wikipedia.org/wiki/Pie_menu</a><p>[2] An Empirical Comparison of Pie vs. Linear Menus; CHI'88; Callahan, Hopkins, Weiser, Shneiderman:
<a href="http://www.donhopkins.com/drupal/node/100" rel="nofollow">http://www.donhopkins.com/drupal/node/100</a><p>One rule of thumb which abides by Fitts' Law that I try to follow is: "the user's attention should not be squandered". [3] (So I apologize for being so verbose.)<p>[3] BayCHI '98 talk: Natural Selection: The Evolution of Pie Menus:
<a href="http://www.baychi.org/calendar/19981013/" rel="nofollow">http://www.baychi.org/calendar/19981013/</a><p>My goals have been enabling designers and users to easily create and edit their own pie menus, and providing smart editors, automatic layout, and support and guidance to help humans come up with easily memorable, Fitts'-friendly designs.<p>This demo of an old OLE/ActiveX implementation of pie menus in Internet Explorer [4] shows the weakness and complexity of the traditional desktop gui MFC based approach to creating and editing pie menus with typical property sheets, scrolling lists and tree editors.<p>[4] ActiveX Pie Menus:
<a href="https://www.youtube.com/watch?v=nnC8x9x3Xag" rel="nofollow">https://www.youtube.com/watch?v=nnC8x9x3Xag</a><p>When editing a scrolling list or tree of items, it's difficult to visualize the directions, which change when you add or remove items. As the antithesis of direct manipulation, it takes far too much pointing and clicking to indirectly edit a pie menu via a scrolling list or tree control.<p>Entering an indented outline into a text editor is an easy way to quickly define and edit a tree of pie menus and submenus, but it doesn't give you a good way to edit properties of each item. Of course describing menus in XML is great if you're a web server, but not fun for human beings.<p>I tried to combine these different techniques of editing pie menus in a tabbed dialog, with a scrolling list and controls for editing items, a tree of nested items and a graphical preview, a text editor for entering nested items as an outline, loading and saving XML.<p>But the result was a horribly unwieldy Frankinterface's Monster, difficult for a professional UI designer to use, and impossible for end users to use.<p>These jQuery pie menus have a more evolved, web friendly design, but I haven't made an editor for them yet. Here's the documentation [5] and free open source code [6].<p>[5] jQuery Pie Menus Documentation:
<a href="http://www.donhopkins.com/mediawiki/index.php/JQuery_Pie_Menus" rel="nofollow">http://www.donhopkins.com/mediawiki/index.php/JQuery_Pie_Men...</a><p>[6] jQuery Pie Menus Source Code:
<a href="https://github.com/SimHacker/jquery-pie" rel="nofollow">https://github.com/SimHacker/jquery-pie</a><p>In the newer jQuery version, one change from previous designs is that I'm de-emphasizing the idea of "menus", and just calling them "pies", because I believe that framing pies as menus has too much historical baggage, does not emphasize their gestural, direct manipulative qualities, and precludes thinking of them more like a directed graph or geographical map, instead of a hierarchical tree.<p>The jQuery and Unity3D [7] versions also differ from previous designs by modeling pies as containing directional slices, which themselves contain linear items, instead of pies containing items directly, and laying out all items in different directions, which change whenever you add or remove items.<p>[7] Unity3D Pie Menu Demo:
<a href="https://www.youtube.com/watch?v=sMN1LQ7qx9g" rel="nofollow">https://www.youtube.com/watch?v=sMN1LQ7qx9g</a><p>That enables designers to first specify the number of slices (which has a major effect on usability, with 4 and 8 being ideal numbers of slices), and then independently populate each slice with zero or more items, which users can select by moving out from the center.<p>So the directions of the slices remain stable during construction and editing, because you can start by creating an 8 slice menu, and then incrementally drop any number of items into it each slice, or none at all.<p>But why would you ever want to have empty slice, and why would you want the directions to remain stable and fixed to 8 slices?<p>Kurtenbach and Buxton compared the speed and error rates of directional menus with different numbers of items, and found that 2, 4, 8 and 12 were optimal peaks. [8]<p>[8] An empirical evaluation of some articulatory and cognitive aspects of marking menus:
<a href="https://d2f99xq7vri1nk.cloudfront.net/legacy_app_files/pdf/93-p1-kurtenbach-empirical.pdf" rel="nofollow">https://d2f99xq7vri1nk.cloudfront.net/legacy_app_files/pdf/9...</a><p>With 2 or 4 items, Fitts' Law has an overwhelming effect, because each item's target area is enormous (1/2 or 1/4 of the entire screen area), and adjacent to the cursor starting position in the center of the menu. (Maximizing the area, minimizing the distance).<p>The articulatory effects of Fitts' Law diminish as you add more items (the target area decreases, but the distance remains a small fixed constant), but there are other important cognitive effects that comes into play: the cognitive effort of remember the directions, and the mental framework you use to think, learn and recall.<p>How many items are there, and what are their relationships? Are you ordering food from restaurant menu [8], or wandering around a Memory Palace? [10] [11]<p>[9] Servitude:
<a href="https://www.youtube.com/watch?v=NXsUetUzXlg" rel="nofollow">https://www.youtube.com/watch?v=NXsUetUzXlg</a><p>[10] Method of Loci:
<a href="https://en.wikipedia.org/wiki/Method_of_loci" rel="nofollow">https://en.wikipedia.org/wiki/Method_of_loci</a><p>[11] iPhone app iLoci by Don Hopkins @ Mobile Dev Camp:
<a href="https://www.youtube.com/watch?v=03ddG3jWF98" rel="nofollow">https://www.youtube.com/watch?v=03ddG3jWF98</a><p>With 7 items, there is no common English word or concept for all but one of the directions. But with 8 items, you benefit from the compass framework, opposite pairs, orthogonal axis, vertical, horizontal or diagonal patterns to use as a framework for arranging the items. And with 12 items, you benefit from the clock dial framework, as well as pairs, orthogonal and diagonal patterns, etc.<p>But 10 and 12 items are past the "seven, plus or minus two" sweet spot. [12] So I'd recommend sticking with 8 items at most, unless your items semantically fit into that number of directions, like a 10 decimal dial, the 12 hours of the day, 12 months of the year, 12 signs of the Zodiac, etc.<p>[12] The Magical Number Seven, Plus or Minus Two:
<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two" rel="nofollow">https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus...</a><p>Kurtenbach and Buxton expected that the selection time would be monotonically increasing as you added more items, but were surprised to find that 8 items were faster than 7, and it kind of plateaued between 11 and 12.<p>If you have 7 items, it actually helps to add a dummy item to even the menu out! That explains the "8 Days a Week" menu in this Dr. Dobb's Journal article, which adds "Today" to the top of a 7 weekday menu, splitting Sunday and Sunday, where it's always easy to select. [13]<p>[13] The Design and Implementation of Pie Menus -- Dr. Dobb's Journal, Dec. 1991:
<a href="http://www.donhopkins.com/drupal/node/98" rel="nofollow">http://www.donhopkins.com/drupal/node/98</a><p>In this MediaGraph demo [14], you can see two different approaches to pies working together.<p>1) Traditional hierarchical pop-up pie menus, supporting sub-menus, mouse ahead gestures, real time feedback, and pull-out items that use the distance as a parameter to the selection. (0:36 in video) Not editable by the user, but used to edit the other kind of pie.<p>2) Non-hierarchical free-form navigational pie maps, for arranging a map of songs connected with roads into a bidirectionally navigable graph, which enables users to easily hop around the network with quick flicking gestures (3:20 in video), and even create, edit and navigate their own pie maps via direct manipulation (4:07 in video). Editable and navigable by the user. Seamlessly integrated with panning and zooming gestures.<p>[14] MediaGraph Music Navigation with Pie Menus Prototype developed for Will Wright's Stupid Fun Club:
<a href="https://www.youtube.com/watch?v=2KfeHNIXYUc" rel="nofollow">https://www.youtube.com/watch?v=2KfeHNIXYUc</a><p>For more examples, here's a youtube playlist with some of my pie menu demos, in reverse-chronological order, which shows the evolution of designs over time. [15]<p>[15] YouTube Pie Menu Play List:
<a href="https://www.youtube.com/playlist?list=PLX66BqHq0qTCWwzRxTJ-XQ8o5vP7pjDbv" rel="nofollow">https://www.youtube.com/playlist?list=PLX66BqHq0qTCWwzRxTJ-X...</a>