Techniques for the Design of Circular Menus
By Don Hopkins, October, 1987.

Abstract

Pie menus are used for making selections from items displayed on the computer screen, by pointing and clicking at the desired one with a mouse. The regions of the menu are shaped like the slices of a pie, laid out in a circle around the menu center.

1. Characteristics and Distinctions of Pie Menus

1.1. Definition

Pie menus are a fast, accurate way of selecting commands from a list of items shown on the screen, by using a mouse to point and click at the desired item.

1.2. Direction Menu designers can take advantage of the directional aspect of pie menus in several ways.

Circular Layout

1.3. Distance

The other important characteristic of a pie menu is the way in which the cursor distance effects the menu selection.

2. Application Examples

Pie Menus have been implemented for the NeWS window system (Gosling, 1985) by Don Hopkins, using an object oriented PostScript programming package (Densmore, 1986). This section will describe two pie menu applications developed with this system, as a result of research into the design of quick, intuitive, reliable, simple to learn, easy to remember interaction techniques.

2.1. Window Management Menu

In a graphical environment supporting multiple overlapping windows on the screen, such as the NeWS window system, pie menus can be a very effective interaction technique for window management tasks. They can be used to issue commands to move, resize, and manipulate windows, invoke programs, and control the environment in many ways.

Image for post
Image for post
Figure 3
Image for post
Image for post
Figure 4
Image for post
Image for post
Figure 5
Image for post
Image for post
Figure 6
Image for post
Image for post
Figure 7
Image for post
Image for post
Figure 8

2.2. Font Selection Menu

The second pie menu application that will be described is a set of nested font selection menus (figures 9 and 10). They are used to choose between one of four font families, and to select the style and size of the font. The initial menu is labeled with the font family names, “Helvetica”, “Courier”, “Times-Roman”, and “Hershey”, shown in the appropriate fonts.

Image for post
Image for post
Figure 9
Image for post
Image for post
Figure 10

3. Design Principles

This section will expound some principles of practical, intuitive, efficient menu design. Because user interface design is a balanced science and art, it is up to the menu designer to decide which heuristics are applicable to the task at hand. It is hoped that these will stimulate the imagination, and suggest other ways in which the unique characteristics of pie menus may be exploited.

3.1. Visual Representation Of Function

One challenge is to develop a simple, consistent look for visually representing the meaning and function of a pie menu. The graphics and text of the menu, labels, and feedback should convey useful information about the meaning of the items, and the way in which direction and distance are interpreted.

3.2. Label Arrangement

For many applications, a well thought out label arrangement can help to make a pie menu intuitive, learnable, and efficient to use. This effort is mainly worthwhile with menus that will always have the same number of items, however. (Changing the number of choices in a pie menu changes the direction the choices are in, and requires the user to look at the menu to be sure of the selection direction.) By choosing appropriate and convenient directions, the menu designer can strive to make a menu with a mnemonic layout and a good kinesthetic feel.

3.3. Menu Size

Screen space is a valuable resource, and pie menus with long labels or lots of items can take up a lot of space on the screen.

Conclusion

Pie menus can be a very efficient and accurate selection technique, especially if some thought and experimentation are put into their design. It is hoped that these suggestions will inspire menu designers to apply pie menus to their own applications, and to come up with more techniques to improve efficient interaction.

References

Buxton, William. (1982, May). An Informal Study of Selection-Positioning Tasks. Proc. of Graphics Interface, ’82, Toronto, pp. 323–345.

User interface flower child. Pie menus, PizzaTool, SimCity, The Sims, Visual Programming, VR, AR, Unity3D / JavaScript bridge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store