Human Interface Note #8    
_____________________________________________________________________________

Note #9    Pop-Up Menus

           Written by:    Scott Jenson & John Sullivan              June 1990
_____________________________________________________________________________

A description of the new style of pop-up menus.
_____________________________________________________________________________


Introduction

Pop-up menus have been around on the Macintosh since HFS (Hierarchical 
File System) was introduced in 1986, and their use became much more 
widespread after the addition of Toolbox support in 1987.  It is 
surprising, then, that many Macintosh users have no idea what pop-up 
menus are and do not recognize them when they see them.  The problem is 
that pop-up menus do not look sufficiently different from other 
Macintosh interface elements; the one-pixel drop shadow that 
differentiates pop-up menus from editable text fields has proven 
inadequate.  This Note presents the new standard appearance for the pop-
up menu in System Software 7.0 and also describes how the new appearance 
lends itself to some new uses that were previously impossible.


Standard pop-up menus

Previously, pop-up menus were displayed by surrounding the current value 
of the menu with a one-pixel rectangle and a one-pixel drop shadow to 
the right and bottom.  The new standard appearance adds a downward-
pointing black arrow, which is identical to the arrow that indicates 
that a menu is too long to fit on the screen and must scroll.  All pop-
up menus should now use this new style.  Figure 1 shows a simple pop-up 
menu in both the old and new styles.


                 |--------||          |----------||
           Baud: | 1200   ||    Baud: | 1200  \/ ||
                 |========||          |==========||
                  Old Style             New Style

         Figure 1-Old-style and new-style pop-up menus

Figure 2 shows an expanded view of the downward-pointing black arrow of 
this new-style pop-up menu.

                  *********************************
                                                  **
                        **                        **
                        **                        **
                     *****         *********      **
                    **  **          *******       **
                    **  **           *****        **
                    **  **            ***         **
                     *****             *          **
                                                  **
                  **********************************

            Figure 2-FatBits view of new-style pop-up menu

When the user clicks on the pop-up menu or its label text, the black 
arrow disappears and the menu pops up, and when the user releases the 
mouse button, the menu disappears and the black arrow is redrawn.  
Figure 3 illustrates the proper behavior of a pop-up menu when a user 
clicks on it.

                                      |----------||
                                      |   50     ||
                                      |  300     ||
                                      |  600     ||
                 |--------||   +++++++|++++++++++||
           Baud: | 1200   ||   +Baud:+|+1200+++++||
                 |========||   +++++++|++++++++++||
                                      | 2400     ||
                                      | 4800     ||
                                      | 9600     ||
                                      |==========||

        Figure 3-Pop-up menu before and during a mouse click


Pop-up menus with editable text fields

Sometimes it is useful to display a list of choices but still allow a 
user to enter or edit a choice that the application may not know in 
advance.  One example is a font size field with an accompanying pop-up 
menu of commonly used sizes.  The new standard pop-up menu appearance 
leads itself readily to this use, as shown in Figure 4.

                 |-----|----||           |-----|+++++||
           Size: |  9  | \/ ||     Size: |  9  |+/9++||
                 |-----|====||           |-----|+++++||
                                               | 10  ||
                                               | 11  ||
                                               | 12  ||
                                               | 14  ||
                                               | 24  ||
                                               |=====||

            Figure 4-Pop-up menu with an editable text field

Note that as in standard pop-up menus, the black arrow disappears when a 
user clicks on it and reappears when a user releases the mouse button.  
Also note that an application should draw the pop-up menu so it 
automatically highlights the item that corresponds to the value in the 
edit text field; this technique prevents a quick click in the pop-up 
menu from accidently erasing the previous value.

If a user enters a value in the edit text field that does not match any 
of the pop-up menu's items, then the pop-up menu should make that value 
the first item and separate it from the rest of the standard values with 
a gray line., as shown in Figure 5.  This separation makes a clean 
distinction between common items, which are always available, and the 
user-entered value, which is only temporary.  (In the case of the 
example in Figure 5, if the font size 13 had been inserted in order into 
the list, a subsequent selection of 10, or any other matching selection, 
would have removed it from the list.)

                 |-----|----||           |-----|+++++||
           Size: | 13  | \/ ||     Size: | 13  |+/13+||
                 |-----|====||           |-----|+++++||
                                               |-----||
                                               |  9  ||
                                               | 10  ||
                                               | 11  ||
                                               | 12  ||
                                               | 14  ||
                                               | 24  ||
                                               |=====||

       Figure 5-Pop-up menu with a non-matching edit text item
