A PIE MENU COOKBOOK: Techniques for the Design of Circular Menus By Don Hopkins Ms. MacBain English 393 Written for Designers of Menu Based User Interfaces TABLE OF CONTENTS Section Page LIST OF ILLUSTRATIONS...........................................1 GLOSSARY........................................................2 EXECUTIVE SUMMARY...............................................4 INTRODUCTION....................................................5 1. CHARACTERISTICS AND DISTINCTIONS OF PIE MENUS................6 1.1. DEFINITION.................................................6 1.2. DIRECTION..................................................6 1.2.1. CIRCULAR LAYOUT..........................................6 1.2.2. SELECTING WITHOUT LOOKING................................6 1.2.3. MOUSE AHEAD..............................................6 1.2.4. DISPLAY SUPPRESSION......................................6 1.3. DISTANCE...................................................7 1.3.1. SELECTION SPEED..........................................7 1.3.2. INCREASED ANGULAR PRECISION..............................7 1.3.3. DISTANCE AS AN ARGUMENT..................................7 2. APPLICATION EXAMPLES.........................................7 2.1. WINDOW MANAGEMENT MENU.....................................7 2.1.1. TOP, BOTTOM..............................................8 2.1.2. CLOSED EYE...............................................8 2.1.3. PAINTING HAND............................................8 2.1.4. STRETCH..................................................8 2.1.5. MOVE.....................................................9 2.1.6. RESHAPE..................................................9 2.1.7. ZAP......................................................9 2.2. FONT SELECTION MENU........................................9 3. DESIGN PRINCIPLES............................................10 3.1. VISUAL REPRESENTATION OF FUNCTION..........................10 3.1.1. DIRECTION................................................10 3.1.1.1. DISCRETE DIRECTION.....................................10 3.1.1.2. CONTINUOUS DIRECTION...................................10 3.1.2. DISTANCE.................................................10 3.2. LABEL ARRANGEMENT..........................................11 3.2.1. INTUITIVE................................................11 3.2.2. LEARNABLE................................................11 3.2.3. GOOD KINESTHETIC FEEL....................................11 3.3. MENU SIZE..................................................12 3.3.1. MINIMIZING THE SIZE......................................12 3.3.2. SUBMENUS.................................................12 3.3.3. EIGHT ITEM MENUS.........................................12 CONCLUSION......................................................13 REFERENCES......................................................14 APPENDIX........................................................16 LIST OF ILLUSTRATIONS Figure Title Page 1. Pie Menu Schematic......................................16 2. Sun Workstation, with a mouse...........................17 3. Default linear frame menu...............................18 4. Default frame menu in pie menu form.....................19 5. Window management pie menu..............................20 6. Stretch submenu.........................................21 7. Move submenu............................................22 8. Zap submenu.............................................23 9. Times-Roman font style/size submenu.....................24 10. Helvetica font style/size submenu.......................25 GLOSSARY Chunking Two or more actions kinesthetically fusing together into a single gesture, that is as much of a cognitive burden as a one action. Click The press and release of a mouse button, used to indicate something at the cursor's location on the screen. Cursor (figure 1) A small graphical symbol superimposed on the computer's display, that points to a spot on the screen, and tracks the movement of the mouse. It is the focus of the user's attention. The cursor's shape may change according to where it is pointing. Clicks of the mouse buttons are directed at the cursor's location. Icon A small graphical symbol that represents a closed window. When a window is not needed, it can be closed to its iconic state, so that it takes up less space on the screen. Iconifying a window removes it from the screen and replaces it with its icon, which can be opened back up when the window is needed. Inactive region (figure 1) A small round area in the center of the menu where the cursor starts out, that makes no selection. Kinesthesis The sense of bodily movement, and the tensions of muscles, tendons, and joints. Linear menu (figure 3) A rectangular menu, whose choices are laid out in linear rows or columns. Clicking the mouse in one of the rectangular labels selects the corresponding choice. Mouse (figure 2) A hand-held pointing device, used to point the cursor on the screen. Moving the mouse around on the mouse pad produces corresponding cursor motion. A mouse has one or more buttons, used to select and manipulate objects on the screen. Pie menu (figure 1) A round menu, whose choices are all in different directions, with selection regions shaped like the slices of a pie. Clicking the mouse in a wedge shaped target region selects the corresponding choice. The small inactive region in the menu center, where the cursor starts out, makes no selection. Target region (figure 1) A pie slice shaped area on the screen corresponding to a menu selection, whose wedge shaped active area starts just outside the circular inactive region in the menu center, and extends out beyond the menu radius, to the screen edge. To choose a slice of a pie menu, move the cursor into one of its target regions, and click the mouse button to select it. Window One of the overlapping drawing surfaces on the screen, usually enclosed in a frame. Clicking the mouse's menu button on the window frame pops up a frame menu of functions to manipulate the window.