0253
`
`TDA 1013 (Part 2 of 3)
`CBM of U.S. Pat. No. 6,766,304
`
`

`
`Menu Selection, Fortn Fillin,
`and Dialog Boxes
`
`A man is responsible for his choice and 1nust accept the consequences, whatever
`they may be.
`
`W. H. Auden, A Certain World
`
`0254
`
`

`
`CH7
`
`Chapter 7
`
`7.1 Introduction
`7.2 Task-Related Organization
`7.3 Item Presentation Sequence
`7.4 Response Time and Display Rate
`7.5 Fast Movement Through Menus
`7.6 Menu Layout
`7.7 Form Fillin
`7.8 Dialog Boxes
`7.9 Practitioner's Summary
`7.10 Researcher's Agenda
`I I
`I I
`L.J
`L_J
`
`I I
`L.J
`
`7.1
`
`Introduction
`
`When designers cannot create appropriate direct-manipulation strategies,
`menu selection and form fillin are attractive alternatives. Whereas early sys(cid:173)
`tems used full-screen menus with numbered items, modern menus are usu(cid:173)
`ally pulldowns, check boxes or radio buttons in dialog boxes, or embedded
`links on World Wide Web pages, all selectable by mouse clicks. When the
`menu items are written with familiar terminology and are organized in a
`convenient structure and sequence, users can select an item easily.
`Menus are effective because they offer the cues to elicit user recognition,
`rather than forcing the user to recall the syntax of a command from memory.
`Users indicate their choices with a pointing device or keystroke and get feed(cid:173)
`back indicating what they have done. Simple menu selection is especially
`effective when users have little training, use the system intermittently, are
`
`0255
`
`

`
`7.2 Task-Related Organization
`
`237
`
`unfmniliar with the terminology, or need help in structuring their decision(cid:173)
`making process. With careful design of cmnplex 1nenus and high-speed inter(cid:173)
`action, menu selection can becmne appealing even to expert frequent users.
`However, just because a designer uses menu selection, form fillin, and
`dialog boxes, there is no guarantee that the interface will be appealing and
`easy to use. Effective interfaces emerge only after careful consideration of
`and testing for nun-terous design issues, such as task-related organization,
`phrasing of items, sequence of items, graphic layout and design, response
`time, shortcuts for knowledgeable frequent users, on line help, error correc(cid:173)
`tion, and selection mechanisms (keyboard, pointing devices, touchscreen,
`voice, and so on) (Norm.an, 1991).
`This chapter starts with 1nenus, then 1noves on to c;:over form fillin and this
`1nethod's integration into dialog boxes. The exmnples are drawn frmn pull(cid:173)
`down 1nenus, full-screen displays, embedded links of the World Wide Web,
`and graphical dialog boxes. Menu items can be textual, graphic, or auditory.
`
`7.2 Task-Related Organization
`
`The primary goal for menu, form-fillin, and dialog-box designers is to create a
`sensible, comprehensible, memorable, and convenient organization relevant to
`the user's tasks. We can learn a few lessons by following the decomposition of
`a book into chapters, a program into 1nodules, or the animal kingdom into
`species. Hierarchical decompositions-natural and comprehensible to most
`people-are appealing because every ite1n belongs to a single category. Unfor(cid:173)
`tunately, in some applications, an item may be difficult to classify as belonging
`to only one category, and designers are tempted to create duplicate pointers,
`thus forming a network.
`Restaurant menus separate appetizers, soups, salads, main dishes,
`desserts, and beverages to help customers organize their selections. Menu
`items should fit logically into categories and have readily understood mean(cid:173)
`ings. Restaurateurs who list dishes with idiosyncratic names such as "veal
`Monique," generic terms such as "house dressing," or unfamiliar labels such
`as "wor shu op" should expect that waiters will spend ample time explain(cid:173)
`ing the alternatives, or should anticipate that custmners will become anxious
`because of the unpredictability of their meals.
`Similarly, for computer menus, the categories should be comprehensible
`and distinctive so that users are confident in making their selections. Users
`. should have a clear idea of what will happen when they make a selection.
`Computer menus are more difficult to design than are restaurant menus,
`because computer displays typically have less space than do printed menus.
`In addition, the number of choices and the cmnplexity is greater in many
`
`0256
`
`

`
`238
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`computer applications, and computer users may not have helpful waiters to
`turn to for an explanation (Norman and Chin, 1989).
`The importance of meaningful organization of menu ite1ns was demon(cid:173)
`strated in an early study with 48 novice users (Liebelt et al., 1982). Simple
`menu trees with three levels and 16 target items were constructed in both
`meaningfully organized and disorganized fonns. Error rates were nearly
`halved and user think tilne (time from 1nenu presentation to user's selection
`of an item) was reduced for the meaningfully organized form. In a later
`study, meaningful categories-such as food, animals, minerals, and cities(cid:173)
`led to shorter response times than did random or alphabetic organizations
`(McDonald et al., 1983). This experiment tested 109 novice users who
`worked through 10 blocks of 26 trials. The authors concluded that "these
`results demonstrate the superiority of a categorical menu organization over
`a pure alphabetical organization, particularly when there is some uncer(cid:173)
`tainty about the terms." With larger menu structures, the effect is even more
`dramatic.
`These results and the OAI model suggest that the key to menu-structure
`design is first to consider the task-related objects and actions. For a music(cid:173)
`concert ticketing system, the menus might separate out types of music (clas(cid:173)
`sical, folk, rock, jazz, and so on), concert locations, or dates, and might offer
`actions such as browsing lists, searching by performer name, or locating
`inexpensive performances. The interface objects might be dialog boxes with
`check boxes for types of music and scrolling menus of concert locations. Per(cid:173)
`former names might be in a scrolling list or typed in via fonn fillin.
`Menu-selection applications range from trivial choices between two items
`to complex information systems that offer thousands of displays. The sim(cid:173)
`plest applications consist of a single menu, but even within this limited for(cid:173)
`mat, there are many variations (Fig. 7.1). The second group of applications
`includes a linear sequence of menu selections; the progression of menus is
`independent of the user's choice. Strict tree structures make up the third and
`1nost common group. Acyclic (menus that are reachable by more than one
`path) and cyclic (structures with meaningful paths that allow users to repeat
`menus) networks constitute the fourth group. In addition, special traversal
`commands may enable users to jump around the branches of a tree, to go
`back to the previous menu, or to go to the beginning of a linear sequence.
`
`7.2.1 Single menus
`
`In some situations, a single menu is sufficient to accomplish a task. Single
`menus may have two or more items, or may allow multiple selections. Sin(cid:173)
`gle menus may pop up on the current work area or may be permanently
`available (on a frame, in a separate windo·w, or on a data tablet) while the
`main display is changed.
`
`0257
`
`

`
`7.2 Task-Related Organization
`
`239
`
`Single Menus
`
`linear Sequence
`
`Tree Structure
`
`Acyclic Network
`
`Cyclic Network
`
`Figure 7.1
`
`Menu systems can use a simple single menu or a linear sequences of menus. Tree(cid:173)
`structured menus are the most common. Traversing deep trees or more elaborate
`acyclic or cyclic menu structures can be difficult for some users.
`
`Binary menus The simplest case is a binary menu with, for example, yes-no,
`true-false, or male-female choices. In keyboard-oriented systems, menu
`items can be identified by single-letter mnemonics, as they are in this photo(cid:173)
`library retrieval system:
`
`Photos are indexed by film type
`B Black and white
`C Color
`Type the letter of your choice
`and press RETURN:
`
`0258
`
`

`
`240
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`Users often prefer mnenzonic letters, such as those in this menu, to numbered
`choices (see Section 7.5). The mne1nonic-letter approach requires additional
`caution in avoiding collisions and increases the effort of translation to for(cid:173)
`eign languages, but its clarity and mernorability are an advantage in many
`applications.
`In GUis, dialog boxes offer users selection buttons, often called radio but(cid:173)
`tons. Selection is made with a mouse or other cursor-control device. This box
`has two radio buttons.
`
`Photos are indexed by film type
`0 Black and white
`0 Color
`
`C Cancel)
`
`C Done )
`
`While earlier systems used text only;. modern systems can show items graph(cid:173)
`ically. For example, users can choose the orientation for output by selecting one
`of a pair of icons. The selected item is the darker (inverse highlighted) one.
`
`Orientation
`
`In the following example, users can choose between Cancel and OK by a
`mouse click, but the thickened border on OK indicates that this selection is
`the default, and that pressing RETURN will select it.
`
`( Canc:el J
`
`OK
`
`These silnple examples demonstrate alternative ways to identify menu
`items and to convey instructions to the user. No optimal format for menus has
`emerged, but consistency across menus in a system is extremely important.
`
`0259
`
`

`
`7.2 Task-Related Organization
`
`241
`
`Multiple-item menus Single menus may have more than two items. One
`example is an online quiz displayed on a touchscreen:
`
`Who invented the telephone?
`Thomas Edison
`Alexander Graham Bell
`Lee De Forest
`George Westinghouse
`Touch your answer.
`
`Another example is a list of options in a document-processing syste1n:
`
`EXAMINE, PRINT, DROP, OR HOLD?
`
`The quiz example has distinct, comprehensible items, but the document(cid:173)
`processing example shows an implied menu selection that could be confus(cid:173)
`ing to novice users. There are no explicit instructions, and it is not apparent
`that single-letter abbreviations are acceptable. Knowledgeable and expert
`users may prefer this short form of a menu selection, usually called a prompt,
`because of its speed and simplicity.
`In GUis, radio buttons support single item selection from a multiple-item
`menu. This choice of paper size for printing shows US Letter as the selected
`item:
`
`Paper: @US Letter
`C) US Legal
`C• No. 1 0 Enuelope
`
`(:_] A4 Letter
`C) B5 Letter
`
`Multiple-selection menus or check boxes A further variation on single
`menus is the capacity to make multiple selections from the choices offered.
`For example, a political-interest survey might allow multiple choice on one
`display (Fig. 7.2). A multiple-selection menu with mouse clicks as the selec(cid:173)
`tion method is a convenient strategy for handling multiple binary choices,
`since the user is able to scan the full list of items while deciding. In the fol(cid:173)
`lowing Macintosh example, Bold and Underline have been selected;
`
`0260
`
`

`
`242
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`Political Issues
`Unemployment
`
`(
`c Aid to Elderly
`c Nuclear Freeze
`(
`(
`(
`c Defense Spending
`Touch up to three issues
`( DONE )
`
`Crime Control
`
`Abortion
`
`Minority Rights
`
`)
`)
`)
`)
`)
`)
`)
`
`Figure 7.2
`
`A multiple-selection touchscreen. menu. Users can select up to three political
`issues.
`
`Superscript and UPPERCASE (grayed out) become available on a pop-up
`1nenu after the check box is selected:
`
`Q Plain
`~Bold
`D Ito/it:·
`D Str-ike Thru
`D mmtlDtlmrn
`D ~lll~tfiWI!Y
`
`rEl Underline
`D LUd. Under-line
`D Obi. Underline
`·····:··························:······;·····
`: ~:: :::- :-·~ ···;: :- ·-:: .... ~ .... :: -~ :.-:- ·:;
`D
`~
`....... > .. ;;:: -:
`::
`: .... :: -...:: ~ .. := -= ... ::
`. . o'".l'o" .. •"•"•"•"o"h"w"o".l'~-·,h,•.!'o".;oo•.."..-.".h"o"•"•"•;;
`: •.-.-.... Y.•o•o0 o0
`:". ·;. ·;. -~ :;·..: =~·..::. ~= ;··; :.· ~::. :;· ·.:: ....... ;
`D
`: ~ ~ ::·"" =··· ::· ::·::::
`.... ~ ..... ~-
`~
`: ..... ••
`'{
`............ :- > .,.. ••
`:-
`: ............. ,.. •••• w.t".·.-........................ J' ............... ,. ................. .IV' ..... :;
`
`Pull-down and pop-up menus Pull-down menus are constantly available to
`the user via selections along a top menu bar. The Xerox Star, Apple Lisa, and
`Apple Macintosh (Fig. 7.3) made these possibilities widely available, and
`their versions have become standardized (Windows, IBM OS/2, OSF/Motif).
`Common items in the menu bar are File, Edit, Font, Format, View, Window,
`and Help. The users make a selection by moving the pointing device over the
`
`0261
`
`

`
`7.2 Task-Related Organization
`
`243
`
`,...
`
`t File Edit Search Format Font
`
`Ht
`
`I I 8/ir
`Underline
`mmuo~mm
`
`:~p
`~:B
`:3€ I
`ocu
`:#: o F--===-===+i;i;Hfl
`:3€ s
`~[i)(J)c1](l)I!!J
`Superscript ~:H
`Subscript
`:#:L
`
`® IPmOmU
`u m !Pm~mu
`vU ~ !Pm~mu
`=.....;:=9 u t{l !Pm~mu
`u m !Pm~mu
`Trli ::; eva 1 uati on f cn-rn ha::; been .._~_4}....-IP_m_Om_u __ __.
`t·1e I piul i nf ot-rnati on for ::;electing courses and teachers.
`
`The form. divided into t:wo p;"Jr-1.:::_. con::;ists of Par-t_
`
`Figure 7.3
`
`The pull-down menu on an early Apple Macintosh MacWrite program. Users can
`select font variations and size. (Photo courtesy of Apple Computer, Inc.)
`
`menu items, which respond by highlighting (reverse video, a box surround(cid:173)
`ing the item, and color all have been used). Since positional constancy is such
`a strong principle, when an item is not available for selection it is preferable to
`gray it out rather than to remove it from the list. This Macintosh menu bar
`shows the available pull-down menus:
`
`File Edit Font Size Style For-mat Spelling Uiew
`
`In Windows, pull-down menu items are also selectable with a keystroke
`sequence.
`Pop-up menus appear on the display in response to a click with a pointing
`device such as a mouse. The contents of the pop-up menu may depend on
`where the cursor is when the pointing device is clicked. Since the pop-up
`·menu covers a portion of the display, there is strong motivation to keep the
`menu text small. Hierarchical sequences of pop-up 1nenus are also used.
`
`0262
`
`

`
`244
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`Pop-up menus can also be organized in a circle to form pie menus (Callahan et
`al., 1988):
`
`Pie menus are convenient because selection is more rapid and, with practice,
`can be done without visual attention. Improvements to appearance and
`behavior were made in a pie menus variant called marking menus in Alias
`StudioPaint V3 (Tapia and Kurtenbach, 1995).
`
`Scrolling and two-dimensional menus (fast and vast) Sometimes the list of
`menu items may be longer than the 20 to 60 lines that can reasonably fit on a
`display. One solution is to create a tree-structured menu, but sometimes the
`desire to limit the system to one conceptual menu is strong. A typical appli(cid:173)
`cation is selecting a state from the 50 states in the United States. The first por(cid:173)
`tion of the menu is displayed with an additional menu item that leads to the
`next display in the menu sequence. The scrolling (or paging) menu might
`continue with dozens or thousands of items using the list-box capabilities
`found in most GUis. Alternatively, a multiple-colu1nn menu might be used,
`with the 50 states arranged in five columns of 10 items each (Fig. 7.4). These
`"fast and vast" two-dimensional menus give users an excellent overview of the
`choices, reduce the number of actions, and allow rapid selection. Multiple(cid:173)
`column menus are especially useful in World Wide Web page design to min(cid:173)
`imize the scrolling needed to see a long list and to give users a single-screen
`overview of the full set of choices.
`
`Alphasliders When the menu items become too numerous to show on the
`screen at once without obscuring other items, more compact strategies are
`needed. One approach is the alphaslider, which uses multiple levels of granu(cid:173)
`larity in moving the slider thumb (scroll box) and therefore can support tens
`or hundreds of thousands of items (Ahlberg and Shneiderman, 1994). The
`following alphaslider covers the 10,000 actors in a film database (Color Plate
`B4). The dark upper part of the thumb jumps· over 40 actors for each move of
`
`0263
`
`

`
`7.2 Task-Related Organization
`
`245
`
`A 1 eberne
`A 1 ask a
`Ar-izona
`Ar-kansas
`Califor-nia
`Colorado
`Connecticut
`Delaware
`Flor-ida
`Geor-gi a
`
`11assachuset ts
`Hav·iai i
`l•jeho
`tvli ct·li !~an
`t·'1i nnesota
`Illinois
`jl ndi en;:~ I
`t"1i ssi ssi ppi
`lo··,·ve
`t'1i ssouri
`t"1ontena
`Kansas
`Kentucky Nebraska
`Louisiana Nevada
`t'1ei ne
`Nevv Hernpshi re
`lr-··1aryl end I I New .Jersey I
`
`~3outtl Dakota
`Ne··,·v t1exi co
`I Ne\·V Vor-k I
`Tennessee
`Nor-th Car-olina
`Texas
`No r-UI Dakota
`Utat1
`CJhi o
`Ver-mont
`Virginia
`Oklal'wrna
`Iiiia s hi ng ton
`Oregon
`V·lest Vi r-gi ni a
`PennS!dl vani a
`\.Yi sconsi n
`Rt·1ode 1 sland
`Soutt-1 Carolina V'l'!dOmi ng
`(::::~k::::::) (::~an~~~::)
`
`Figure 7.4
`
`A "fast and vast" two-dimensional menu that allows rapid multiple selection from
`the list of 50 states. This version shows a menu with five columns of 10 states each,
`arranged in alphabetical order down the columns.
`
`the mouse, and the lighter smaller lower part allows movement through
`each actor's name:
`
`Actor: Connery, Sean
`I~~
`A C DE G H J KN 0 R S TV Z
`
`The index at the bottom of the alphaslider gives users an idea of where to
`jump to start a new search.
`
`Embedded links All the menus discussed thus far might be characterized as
`explicit menus in that there is an orderly enumeration of the menu items with
`little extraneous information. In many situations, however, the menu items
`might be embedded in text or graphics and still be selectable. This is the basis
`for hypertext designs (see Chapter 16).
`In a textual database with articles about people, events, and places for a
`museum application, it is natural to allow users to retrieve detailed informa(cid:173)
`tion by selecting a name in context (Koved and Shneiderman, 1986). Selec(cid:173)
`. table names are highlighted, and users click with a mouse (Fig. 7.5). The
`names, places, or phrases are menu items embedded in meaningful text that
`
`0264
`
`

`
`246
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`WASHINGTON, DC: THE NATION'S CAPITAL
`
`PAGE 2 OF 3
`
`Located between Maryland and Virginia, Washington, DC
`embraces the White House and the Capitol, a host of
`government offices as well as the Smithsonian museums.
`Designed by Pierre L'Enfant, Washington, DC is a graceful
`city of broad boulevards, national monuments, the rustic
`Rock Creek Park, and the National Zoo.
`First-time visitors should begin at the mall by walking
`from the Capitol towards the Smithsonian museums and on
`
`BACK PAGE
`
`NEXT PAGE
`
`RETURN TO "NEW YORK CITY"
`
`EXTRA
`
`Figure 7.5
`
`Embedded links in an early version of Hyperties. The links improve comprehensibil(cid:173)
`ity over numbered menu lists and lowered anxiety for novice users. A reverse-video
`selector box initially covers the NEXT PAGE action. Users move the selector box
`over highlighted links or actions, then select by pressing RETURN. A mouse allows
`them to make a selection by merely clicking on the highlighted link or action. (Cre(cid:173)
`ated in 1983 by Human-Computer Interaction Laboratory, University of Maryland,
`College Park, MD; distributed and refined by Cognetics Corporation, Princeton
`Junction, NJ.)
`
`informs users and helps to clarify the meaning of the items. Embedded links
`were popularized in the Hyperties system (Color Plate C1) (Cognetics Corp.,
`Princeton Junction, NJ), which was used for two early commercial hypertext
`projects (Shneiderman, 1988; Shneiderman and Kearsley, 1989), and became
`the preferred method for traversing links on the World Wide Web (see Color
`Plates A2 to AS and Figs. 16.5 to 16.10).
`Embedded links have emerged in other applications. Air-traffic-control
`systems allow users to select airplanes in the spatial layout of flight paths to
`obtain more detailed information. Many geographic-information systems
`similarly allow users to select cities or other features to obtain more informa(cid:173)
`tion. Selection of regions in a two-dimensional layout, usually called image
`maps, was built into Hyperties in 1988 and has become popular on websites.
`Embedded links permit items to be viewed in context and eliminate the need
`for a distracting and screen-wasting enumeration of items. Contextual display
`helps to keep the users focused on their tasks and on the objects of interest.
`
`Iconic menus, toolbars, or palettes Menus can offer many actions that a
`user can select with a click and apply to a displayed object. These menus,
`often called toolbars or palettes, are widely used in paint and draw programs
`(see Fig. 6.7), in computer-assisted design packages, and in other graphics
`
`0265
`
`

`
`7.2 Task-Related Organization
`
`247
`
`syste1ns. Users 1nay be able to custon1.ize the toolbar with their choices of
`ite1ns, and to control the placement to be at the top or side. Users who wish
`to conserve screen space for their docu1nents can elilninate the toolbar.
`
`7.2.2 Linear sequences and multiple menus
`
`Often, a series of interdependent menus can be used to guide users through
`a series of choices in which they see a sequence of menus. For example, a
`document-printing package might have a linear sequence of 1nenus to
`choose print parameters, such as device, line spacing, and page numbering.
`Another fmniliar example is an online examination that has a sequence of
`1nultiple-choice test items, each made up as a menu. Guidance for users in
`making complex decisions can often be provided by a sequence of cue cards
`or Wizards (a Microsoft term).
`Linear sequences guide the user through a cmnplex decision-making
`process by presenting one decision at a time. We could improve the docu(cid:173)
`ment-printing example by offering the user several menus on the screen at
`once. Putting several menus on a single dialog box silnplifies the user inter(cid:173)
`face, allows users to enter choices in any order, and speeds usage (Fig. 7.6).
`
`7.2.3 Tree-structured menus
`
`When a collection of items grows and becomes difficult to maintain under
`intellectual control, designers can fonn categories of similar items, creating a
`tree structure (Clauer, 1972; Norman, 1991). Smne collections can be parti(cid:173)
`tioned easily into mutually exclusive groups with distinctive identifiers.
`Familiar exmnples include these groupings:
`
`• Male, female
`• Anilnal, vegetable,1nineral
`• Spring, sum1ner, autu1nn, winter
`• Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
`• Less than 10, between 10 and 25, greater than 25
`• Percussion, string, woodwind, brass
`• Fonts, size, style, spacing
`
`Even these groupings may occasionally lead to confusion or disagree(cid:173)
`ment. Classification and indexing are complex tasks, and, in many situa(cid:173)
`tions, there is no single solution that is acceptable to everyone, for example,
`colors or flowers. The initial design can be improved as a function of feed(cid:173)
`back from users. Over time, as the structure is improved-and as users gain
`familiarity with it, success rates will improve.
`
`0266
`
`

`
`248
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`Figure 7.6
`
`Multiple menus in a single dialog box. Users can enter choices in any order and are
`given a clear overview of the possibilities. (Used with permission of Microsoft Corp.,
`Redmond, WA.)
`
`In spite of the associated problems, tree-structured 1nenu systems have
`the power to make large collections of data available to novice or intermit(cid:173)
`tent users. If each menu has 30 items, then a menu tree with four levels has
`the capacity to lead an untrained user through a collection of 810,000 desti(cid:173)
`nations. That number would be excessively large for a set of commands in a
`word processor, but would be realistic in a World Wide Web application such
`as a directory (see Fig. 16.5), a digital library (see Color Plate AS), or an
`online service such as America Online (see Color Plate A6).
`If the groupings at each level are natural and comprehensible to users,
`and if users know the target, then menu traversal can be accomplished in a
`few seconds-it is faster than flipping through a book. On the other hand, if
`the groupings are unfamiliar and users have only a vague notion of the item
`that they seek, they may get lost for hours in the tree menus (Robertson et al.,
`1981; Norman and Chin, 1988).
`Terminology from the user's task domain can orient the user. Instead of
`using a title, such as MAIN MENU OPTIONS, that is vague and emphasizes
`
`0267
`
`

`
`7.2 Task-Related Organization
`
`249
`
`the computer domain, use terms such as FRIENDLIBANK SERVICES or sim(cid:173)
`ply GAMES.
`
`Depth versus breadth The depth, or number of levels, of a 1nenu tree
`depends, in part, on the breadth, or number of items per level. If 1nore items
`are put into the main menu, then the tree spreads out and has fewer levels.
`This shape may be advantageous, but only if clarity is not compromised sub(cid:173)
`stantially and if a slow display rate does not consume the user's patience.
`Several authors urge using four to eight items per 1nenu, but, at the same
`time, they urge using no more than three to four levels. With large menu
`applications, one or both of these guidelines must be compromised.
`Several empirical studies have dealt with the depth-breadth tradeoff, and
`the evidence is strong that breadth should be preferred over depth. In fact,
`there is reason to encourage designers to limit menu trees to three levels:
`when the depth goes to four or five, there is a good chance of users becmning
`lost or disoriented.
`Kiger (1984) grouped 64 items in these menu-tree forms:
`
`Eight items on each of two levels
`8 X 2
`Four items on each of three levels
`4 X 3
`Two items on each of six levels
`2 X 6
`4 X 1 + 16 X 1 A four-item menu followed by a 16-item menu
`16 X 1 + 4 X 1 A 16-item menu followed by a four-item menu
`
`The deep narrow tree, 2 X 6, produced the slowest, least accurate, and least
`preferred version; the 8 X 2 was among those rated highest for speed, accu(cid:173)
`racy, and preference. The 22 subjects performed 16 searches on each of the
`five versions.
`Landauer and Nachbar (1985) confirmed the advantage of breadth over
`depth and developed predictive equations for traversal times. They varied
`the number of items per level from 2, 4, 8, to 16 to reach 4096 target items of
`numbers or words. The times for the task with words ranged from 23.4 sec(cid:173)
`onds down to 12.5 seconds as the breadth increased and the number of levels
`decreased. Over the range studied, the authors suggest that a simple function
`of the number of items on the screen will-predict the time, T, for a selection:
`
`T = k + c*log b,
`
`where k and care empirically determined constants for scanning the screen
`to make a choice, and b is the breadth at each level. Then, the total time to tra(cid:173)
`. verse the menu tree depends on only the depth, D, which is
`
`D = logbN,
`
`0268
`
`

`
`250
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`where N is the total nun1.ber of items in the tree. With N = 4096 target
`ite1ns and a branching factor of b = 16, the depth D = 3, and the total time is
`3*(k + c*log16).
`Nonnan and Chin (1988) fixed the number of levels at four, with 256 tar(cid:173)
`get iten1.s, and varied the shape of the tree structure. They recmnmend
`greater breadth at the root and at the leaves, and add a further encourage(cid:173)
`nl.ent to n1.inimize the total nmnber of 1nenu frames needed so as to increase
`fmniliarity. In an interesting variation, Wallace et al. (1987) confirmed that
`broader, shallower trees (4 X 3 versus 2 X 6) produced superior perfor(cid:173)
`lnance, and showed that, when users were stressed, they made 96 percent
`more errors and took 16 percent longer. The stressor was silnply an instruc(cid:173)
`tion to work quickly ("It is imperative that you finish the task just as quickly
`as possible"); the control group received gentler verbal instruction to avoid
`rushing ("Take your tilne; there is no rush").
`Even though the semantic structure of the ite1ns cannot be ignored, these
`studies suggest that the fewer the levels, the greater the ease of decision
`n1.aking. Of course, display rates, response tilne, and screen clutter 1nust be
`considered, in addition to the semantic organization.
`
`Task-related grouping in tree structures Grouping menu items in a tree
`such that they are comprehensible to users and 1natch the task structure is
`sometimes difficult. The proble1ns are akin to putting kitchen utensils in order;
`steak knives go together and serving spoons go together, but where do you put
`butter knives or carving sets? Cmnputer-menu proble1ns include overlapping
`categories, extraneous ite1ns, conflicting classifications in the same menu, unfa(cid:173)
`miliar jargon, and generic tenus. Based on this set of problems, here are several
`suggested rules for fanning menu trees:
`
`• Create groups of logically sim,ilar items For example, a comprehensible
`menu would list countries at level 1, states or provinces at level 2, and
`cities at level 3.
`• Form groups that cover all possibilities For example, a 1nenu with age
`ranges 0-9, 10-19, 20-29, and> 30 makes it easy for the user to select an
`item.
`• Make sure that items are nonoverlapping Lower-level items should be nat(cid:173)
`urally associated with a single higher-level item. Overlapping cate(cid:173)
`gories such as Entertainment and Events are a poor choice compared to
`Concerts and Sports.
`• Use familiar terminology, but ensure that items are distinct from one another
`Generic terms such as Day and Night may be too vague, when cOin(cid:173)
`pared to Before 6 P.M. and After 6 P.M.
`
`Menu maps As the depth of a menu tree grows, users find it increasingly
`difficult to maintain a sense of position in the tree; their sense of disorienta-
`
`0269
`
`

`
`7.2 Task-Related Organization
`
`251
`
`Figure 7.7
`
`A menu map of a World Wide Web site. This example from the Lycos search service
`is called a siten<ap.
`
`tion, or of "getting lost," grows. Viewing one menu at a time is like seeing the
`world through a cardboard tube; it is hard to grasp the overall pattern and to
`see relationships mnong categories. Evidence from several early studies
`demonstrated the advantage of offering a spatial1nap to help users stay ori(cid:173)
`ented. Sometimes menu maps are shown on web pages (Fig. 7.7); sometimes
`they are printed as large posters to give users a visual overview of hundreds
`of items at several levels. Another approach is to have the overview in the
`user manual as a fold-out or spread over several pages as a tree diagrmn or
`indented-text display to show levels.
`
`Summary There is no perfect menu structure that matches every person's
`· knowledge of the application domain. Designers must use good judgment
`for the initial implementation, but then must be receptive to suggested
`improvements and empirical data. Users will gradually gain familiarity,
`
`0270
`
`

`
`252
`
`7 Menu Selection, Form Fillin, and Dialog Boxes
`
`even with extremely complex tree structures, and will be increasingly suc(cid:173)
`cessful in locating required items.
`
`7.2.4 Acyclic and cyclic menu networks
`
`Although tree structures are appealing, someti1nes network structures are
`more appropriate. For example, in a commercial online service, it might
`make sense to provide access to banking information from both the financial
`and consumer parts of a tree structure. A second motivation for using menu
`networks is that it may be desirable to pennit paths between disparate sec(cid:173)
`tions of a tree, rather than requiring users to begin a new search from the
`main menu. Network structures in the form of acyclic or cyclic graphs arise
`naturally in social relationships, transportation routing, scientific-journal
`citations, and 1nany other applications. As users move from trees to acyclic
`networks to cyclic networks, the potential for getting lost increases. Confu(cid:173)
`sion and disorientation are often reported among World Wide Web users
`who have difficulty navigating that large cyclic network.
`With a tree structure, the user can form a mental model of the structure
`and of the relationships among the menus. Developing this mental model
`may be more difficult with a network. With a tree s