Pie Menus
Volume Number: 7
Issue Number: 1
Column Tag: HyperChat
By Boyd and Andrea Hays, Boulder, CO
Note: Source code files accompanying article are located on MacTech CD-ROM orsource code disks.
[Boyd Hays is a Software Engineer for TRW. He is currently working on the
“Data Integration Engine”, a tool for integrating heterogeneous data bases. Andrea Hays
is a Research Assistant for the University of Colorado. She is developing “Metalog“, an
“electronic notebook” for scientists.]
Pie menus offer an interesting alternative to traditional linear menus when
designing user interfaces. In linear menus, selectable items are placed in a vertical
list; in pie menus, selectable items are placed in a circle around a midpoint. Each
approach offers different advantages and disadvantages which we believed were worth
exploring.
As a project in a user interface class, we implemented pie menus in Parcplace’s
Smalltalk-80 on the Mac. Our goal was to study the relative benefits of this menuing
technique in an actual environment that had a pervasive use of popup menus.
Though Smalltalk-80 was the target system, our familiarity with the HyperCard
environment allowed us to quickly build an initial test via a HyperCard XCMD. What
follows is a description of that implementation.
Description of Menu Types
We are all familiar with the use of linear menus. Their use is ubiquitous on the
Mac; we have a entire menu bar full of them. To summarize, a linear menu consists of a
list of selectable items (words or phrases) aligned vertically and framed within a
rectangular space. Items in the menu are selected using some sort of pointing device, in
the Mac’s case, a mouse. The user scans the menu by moving the mouse in a vertical
motion through the menu. The current item of selection is highlighted in some way,
often through the use of reverse video. A subsequent movement with the mouse (such as
clicking or releasing a button) while an item is highlighted would “select” that item in
the menu and cause the action indicated by that menu item to occur. The following
figure shows the Finder’s “File” linear menu with “Close” selected.
Pie menus differ from linear menus in that the selectable items are placed in a
circle around a midpoint. When the menu appears, the mouse pointer appears at this
midpoint. To select an item, the user moves the mouse toward one of the items. As the
mouse nears the item, a region associated with that item is highlighted to indicate its
selectability. In our implementation the area of selection is in the shape of a pie wedge
emanating from the midpoint, thus the term “pie menu”. A region in the center of the
pie was left unfilled and does not participate in any of the wedge selections. This allows
the user to de-select all items without having to move the cursor outside the pie.
Since we are interested in the perceived usability of pie menus in a real context,
we have included a HyperCard stack that utilizes both linear and pie menus. This stack
consists of a series of multiple-choice questions about presidents of the United States.
Half of the cards in the stack utilize linear menus; the other half, pie menus. This test
was administered to numerous individuals to obtain their preference between the two
types of menuing systems. The following figure is an example from that stack with
“Jackson” selected.
Why Pie Menus?
We became interested in pie menus after reading the article “An Empirical
Comparison of Pie vs. Linear Menus”, by J. Callahan, D Hopkins, M. Weiser, and B.
Shneiderman, in the ACM’s SIGCHI 1988 Conference Proceedings. For a more formal
treatment of the topic, please refer to this paper. The general conclusion of this paper
was that, overall, users could select items from pie menus faster than from linear
menus. The major reason cited was that less hand movement was needed to select items
from the pie menus. Other advantages to pie menus include: easy grouping of common
selections; the ability to quickly locate semantically opposite selections by placing
them at opposite positions on the menu; and the ability to “pre-mouse”, or select a
desired item before the menu is even fully rendered on the display.
The pie menus always appear with the mouse in the center. This can be
accomplished by positioning the menu so that it is centered about the current mouse
location. An alternative is to “warp” or move the mouse until it is at the desired
location. This is necessary when the natural location of the popup menu would result in
it being partly off the screen. While this could certainly be construed to be in violation
of Apples Human Interface Guidelines, we do in fact warp the mouse when necessary to
keep the entire menu visible.
Pie Menu Usage
In many cases pie menus can be used interchangeably with linear menus.
However, the differences between the two forms of popup menus bear noting.
Linear menus have proven useful for a number of reasons. A linear menu
contains a great deal of information in a small physical space. The size of the menu need
be only as large as the minimum space required to hold the text items. This has a
distinct advantage when the context in which a menu appears, i.e. the background, must
be preserved. By maintaining as much of the prior screen image as possible, the
instantiation of a linear popup menu is made visually less obtrusive.
Linear menus correspond closely with the appearance of text in print. The
mechanisms an individual has developed for reading are directly applicable to the
scanning of a list of menu items. This appears to be a critical factor in how quickly one
can assimilate a large amount of information from a menu.
Pie menus, due to their difference in form, exhibit a different set of advantages.
They are capable of providing much semantic information in a spatial format. Menu
choices that are semantically opposite e.g. cut and paste, can be placed on opposite sides
of the menu.
Since pie menus are circular, they can be arranged to place the most frequently
used items on the left or right side depending upon the “handedness” of the user. This
facilitates mouse motion due to anatomical factors. It is an intrinsically stronger and
more accurate physical movement to draw your hand toward your chest than it is to push
it away.
Locating a menu item within a pie menu that has been frequently used is easier
than it would be with a linear menu. It is difficult in a linear menu to “pre-mouse” to,
for example, the s eventh item. In a pie menu it is quite easy to pre-mouse to ten
o’clock if the user anticipates the location of the desired item.
Pie menus do suffer from several major disadvantages. They take up much more
screen real estate than linear menus, obstructing more of the background. They also
become harder to read as the number of selectable items grows. In our experimentation
we found an upper limit of twelve to fifteen items could be presented in a “reasonable”
space. Many of the Smalltalk users in our experiment found that the ease of selection
began to decrease as the menu became this dense.
The greatest difficulty with pie menus is that it is difficult to locate menu items
when you have no pre-awareness of their location. Pie menus trade hand motion for eye
motion, a exchange which evidently is not an even one. In our tests we found most users
complained much more vehemently about trying to read a circular list of items from a
pie menu than they did about having to move the mouse further with a linear menu.
Implementation Guidelines
Given the fact that pie menus appear to have applicability in certain domains, we
offer the following implementation guidelines and suggestions:
• Make the selectable regions within the pie easily distinguishable.
• Provide the user visual information regarding the current selection in
real-time. If the system does not handle highlighting in a “reasonable” time
frame the menus will go unused.
• Reduce the amount of screen real estate consumed by a popup menu to a
minimum. This means that the system should collapse the bounding region of a pie
menu to the smallest possible size to contain the menu items.
• Provide areas wherein no menu selection takes place, e.g., a central hole. This
will give the user avenues of escape.
• Make the labels selectable as well as the pie regions.
• Have the pie menu appear centered about the mouse. In cases where this would
cause part of the menu to be off the screen, reposition the menu and warp the
mouse to the new location.
• Group menu items according to function when possible, much as separator lines
are used in linear menus. Possible ways to do this would be to explode the pie into
related sections, or to use lines to separate the regions.
• Try to keep the number of menu items small; pie menus are most effective with
fewer items.
• Locate menu items that occur in multiple menus in the same location in each of
the menus.
The Code
The pie wedges of this implementation are made up of QuickDraw regions. We
wanted the implementation to be fast enough to keep-up with the movement of the
cursor, so we decided to precompute the perimeters of the necessary circles. There are
three circles used: an inner doughnut hole used to create a neutral spot for initial
cursor positioning; a circle, termed inner in the source, that serves as the boundary of
the circle of wedges; and the final outer circle upon which the labels are positioned.
A utility program, “plotcircle.c”, is responsible for constructing a header file,
“circledata.h”, used by the routine that actually draws the pie menus. The method used
to compute the circles is that of Bresenham’s Algorithm. It works by starting at the
point (0,0). It then locates a point directly “above” the center of the circle at a point
(0,-y) where y is equal to the circle’s radius. To find any point on the circle, one
computes which of the three possible selections (horizontally and to the right,
diagonally down and to the right, or vertically downward) minimizes the square of the
distance between the trial pixel and the pixel that would lie on the “actual” circle’s
arc. Through reflection, one only has to compute the first octant of the circle, as all
other octants can be derived via a change in the sign of the x and/or y coordinates.
Bresenham’s Circle Algorithm is detailed more fully in many readily available texts on
computer graphics.
The source file “PieXCMD.c” is the HyperCard interface to the pie menu plotting
function. It accepts the user’s argument list and formats the arguments into a suitable
form. The format of the interface to the XCMD is:
/* 1 */
put PiePopupMenu("menu",font#,size,pattern) into container
where menu is the list of menu items in Menu Manager format; font # is the
number of the font to use, e.g., geneva; size is the point size of the font; and pattern is a
boolean used to indicate whether or not patterns should be used in the display of the
wedges.
The source file “PieUtils.c” contains the single function ConvertMenuList().
This is used to filter out the Menu Manager specific control characters from the menu
list that is passed to the XCMD. This is useful in that one can freely interchange the
PiePopupMenu XCMD with one of the many “normal” popup menu XCMDs that support
the native Menu Manager options. (In fact, the accompanying stack interchanges calls to
PiePopupMenu with LinearPopupMenu in order to demonstrate the different menuing
techniques.)
The source file containing the routine that displays a pie menu is “PieMenu.c”.
Its external entry point is DrawPieMenu(). It is implemented by taking the array of
points that make up each of the circles and dividing them into equal chunks based on the
number of elements to display. These chunks are then used to generate regions. Once
the regions have been drawn on the display the routine awaits the mouse release, at
which time the menu selection, if any, is returned to the caller.
[The files: HyperXcmd.h, StrToLong.c, EvalExpr.c, StrToNum.c, NumToStr.c,
and XCMD-Utils.c are found and copyrighted in Gary Bond’s book, XCMD’s For
Hypercard, published by MIS: Press.-ed]
Future Work
The implementation presented here suffers in a couple of areas. The circles used
to generate the pie menus and the enclosing rectangle in which they are displayed are
fixed in size. It would not be terribly difficult to modify these routines to use the
trigonometric functions of the Mac’s Transcendental Functions Package to determine
which wedge contained the cursor. Additionally, a needed improvement is to reduce the
size of the enclosing window used to display the menu to the smallest size possible that
would not clip the labels of the wedges. This would do much to enhance the utilization of
the screen’s real estate. We chose not to implement these features due to both time
constraints and our interest in minimizing run-time overhead. (Granted, when you’re
in a spin-loop awaiting a mouse button release, all of the cycles of the machine are
fundamentally consumed by your application anyway.)
During the course of our investigations we received numerous responses from
individuals who took the pie menu test. One of the more interesting suggestions came
from Daniels & Mara of “StackHeads”. They augmented our design to include
hierarchical pie menus in the following manner:
Acknowledgements
Thanks to Clayton Lewis and the members of our user interface class at the
University of Colorado who participated in our study. Additionally, we would like to
thank all of the individuals who responded to our requests for feedback on the usage of
pie menus, and, of course, to Callahan et. al. for providing our inspiration.
Listing: plotcircle.c
/*
* File: plotcircle.c
* Purpose: Construct three collections of points
* representing concentric circles used
* in the plotting of pie popup menus.
*/
#include
#define I_RADIUS 50 /* Inner radius */
#define O_RADIUS 70 /* Outer radius */
#define C_RADIUS 5 /* Center radius */
#define CENTER_X 0 /* Bias all points */
#define CENTER_Y 0 /* at origin 0,0. */
#define MAX_PTS 1000 /* Max # points */
#define X_COORD 1
#define Y_COORD 2
#define I_POINTS 1
#define O_POINTS 2
#define C_POINTS 3
/* This is the representation of a point. */
struct xy_pt {
int x;
int y;
} pt[MAX_PTS];
/*
* Array index into which to generate the next point.
*/
int num_pts;
/* File into which the data is written. */
FILE *fp;
/* Local Function prototypes. */
void circle(int xc, int y_center, int radius);
void sortpoints(void);
void sort(struct xy_pt *, int, int);
int compare(struct xy_pt, struct xy_pt, int);
void swap(struct xy_pt *, struct xy_pt *);
int main()
{
if ((fp=fopen("circledata.h","w")) != NULL) {
/* Generate the set of interior points */
circle(CENTER_X, CENTER_Y, I_RADIUS);