Copyright © 2005, Pearson Education, Inc. Chapter 6 Menu Selection, Form Fillin, and Dialog Boxes

Copyright © 2005, Pearson Education, Inc. 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 task."

Copyright © 2005, Pearson Education, Inc. Task-Related Organization (cont.) Restaurant menus separate appetizers, soups, salads, main dishes, desserts, and beverages to help customer organize their selections. –Menu items should fit logically into categories and have readily understood meanings. –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 explaining the alternatives, or should anticipate that customers will become anxious because of the unpredictability of their meals.

Copyright © 2005, Pearson Education, Inc. Task-Related Organization (cont.) Computer menus, the categories should be comprehensible and distinctive so that users 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 restaurant menus, because computer displays typically have less space than printed menus. –In addition, the number of choices and the complexity is greater in many computer applications, and –Computer users do not have helpful waiters to turn for explanations.

Copyright © 2005, Pearson Education, Inc. Task-Related Organization (cont.) Menu-selection applications range from trivial choices between two items to complex information systems that can lead through thousands of displays. –Tree structures: the most common group –Acyclic: menus that are reachable by more than one path (e.g. WWW) –Cyclic: structures with meaningful paths that allow users to repeat menus

Copyright © 2005, Pearson Education, Inc. Single Menus Binary Menus allow users to choose between two options –For example, true/false, yes/no, male/female choices. Multiple-item Menus –Radio buttons also support single-item selection from a multiple-item menu Multiple-selection Menus –Check boxes can allow the selection of one or more items in a menu

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Pull-down, pop-up, and toolbar menus –Pull-down menus Always available to the user by making selections on a top menu bar Key board shortcuts –E.g., Ctrl-C important to support expert user efficiency –The first letter of the command is often used for the shortcut to favor memorability, but caution is required to avoid collisions. –If at all possible, shortcuts should be used consistently across applications; for example, »Ctr-S is usally used for Save and »Ctr-P for print.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) The cascading pull-down menus of Microsoft Word Keyboard shortcut Three dots (...) indicate that the selection will lead to a dialog box. A tool palette

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Pull-down, pop-up, and toolbar menus (cont.) –Toolbars, iconic menus, and palettes Offers actions on a displayed object These menu were first used in drawing and computer-assisted design applications but are now widely popular. –Pop-up menus Appear on a display in response to a check or tap with a pointing device. The contents of the pop-up menu usually depend on where the cursor is when the pointing device is clicked.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Pop-up menus The contents of the pop-up menu usually depend on where the cursor is when the pointing device is clicked

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Menus for long lists –Scrolling menus, combo boxes, and fisheye menus Scrolling menus –display the first portion of the menu and an additional menu item, typically an arrow that leads to the next set of items in the menu sequence. –might continue with dozens or thousands of items, using the listbox capabilities found in most graphical user interfaces. »Keyboard shortcuts might allow users to type the letter “M” to scroll directly to the first word starting with the letter “M”.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Menus for long lists –Scrolling menus, combo boxes, and fisheye menus (cont.) Combo boxes combine a scrolling menu with a text-entry filed. –Users can type in leading characters to scrolling menu with a text-entry field. Fisheye menus display all of the menu items on the screen at once, but show only items near the cursor at full size; items further away are displayed at a smaller size. –Fisheye menus have the potential to improve speed, but wide differences in users’ preferences exist, making fisheye menus a useful option but not a recommended choice as a default menu style.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Combo boxes menus Combo boxes combine a scrolling menu with a text-entry filed

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Fisheye menus Fisheye menus display all of the menu items on the screen at once, but show only items near the cursor at full size; items further away are displayed at a smaller size.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Menus for long lists (cont.) –Two-dimensional menus “Fast and vast” two-dimensional menus give users a good overview of the choices, reduce the number of required actions, and allow rapid selection. Multiple-column menus are especially useful in web-page design, to minimize the scrolling needed to see a long list and to give users a single-screen overview of the full set of choices.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) This online grocery-shopping web page includes multiple menus using icons and textual labels. This page also demonstrates an effective tab design to provide access to other services.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) Embedded menus and hotlinks –Embedded menus are an alternative to explicit menus –It is natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context. –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. Graphical menus are a particularly attractive way to present many selection options while providing context to help users make their choices.

Copyright © 2005, Pearson Education, Inc. Single Menus (cont.) To search for rental-car office locations, users can select a country by using a cascading menu of regions of the world and countries, or by clicking directly on the area of interest.

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus Linear menu sequences and simultaneous menus –Linear Guide the user through a series of choices in which they see a sequence of menus. –E.g. a pizza ordering interface might include a linear sequence of menus to choose Guide the user through complex decision-making process. –E.g. "Wizards" (a Microsoft term) Effective for novice users performing simple tasks Size (small/medium/large) Thickness (thick/normal/thin) Ingredients

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus Linear menu sequences and simultaneous menus (cont.) –Simultaneous Present multiple active menus at the same time and allows users to enter choices in any order E.g. Shoppers looking for sunglasses can narrow the list of results by selecting any item in three simultaneous menus of brands, features, and frame color, without any particular order (

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus (cont.) Tree-structured menus –Designers can form categories of similar items to create a tree structure E.g., an online grocery store can be organized by categories such as –Produce: vegetables, fruits, and nuts –Meat –Dairy: milk, cheese, and yogurt –Cleaning products –Fast retrieved if natural and comprehensive On the other hand, if the groupings are unfamiliar and users have only vague notions of the items that they seek, they may get lost for hours in the tree menus.

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus (cont.) Tree-structured menus (cont.) –Use terminology from the task domain Instead of using a title that is vague and emphasizes the computer domain, such as “Main Menu Options”, use terms such as “Friendlibank Services” or simply “Games”. –Expanding menus maintain the full context of each choice E.g., Windows Explorer At any point, users have access to the whole set of major and same-level categories. A recent study showed that expandable menus were acceptable only for shallow menu hierarchies of depth 2 or 3, and should be avoided for deeper hierarchies.

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus (cont.) Menu Maps –As the depth of a menu tree grows, users find it increasingly difficult to maintain a sense of position in the tree –Menu maps can help users stay oriented in a large menu tree –Effective for providing overviews to minimize user disorientation. –Sometimes menu maps are shown on web pages as site maps.

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus (cont.) The Lycos site-map page presents the entire menu structure of the web site (

Copyright © 2005, Pearson Education, Inc. Combination of multiple menus (cont.) Acyclic and Cyclic Networks –Although tree structures are appealing, sometimes network structures are more appropriate. E.g. 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. –Useful for social relationships transportation routing scientific-journal citations –Can cause confusion and disorientation.

Copyright © 2005, Pearson Education, Inc. Content Organization Task-related grouping in tree organization –Create groups of logically similar items E.g. a comprehensible menu would list: countries at level1, states or provinces at level2, and cities at level3. –Form groups that cover all possibilities E.g. a menu 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 Overlapping categories such as, “Entertainment” and “Events” are poor choices 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; more specific options such as “6am-6pm” and “6pm-6am” may be more useful and precise.

Copyright © 2005, Pearson Education, Inc. Content Organization (cont.) Item Presentation Sequence –The order of items in the menu is important, and should take natural sequence into account when possible: Time (chronological ordering) Numeric ordering (ascending/descending ordering) Physical properties (increasing/decreasing length, area, volume, temperature, weight, and so on) –When cases have no task-related orderings, the designer must choose from such possibilities as: Alphabetic sequence of terms Grouping of related items Most frequently used items first Most important items first.

Copyright © 2005, Pearson Education, Inc. Content Organization (cont.) Microsoft introduced adaptive menus in Office2000. As users work with the programs, the menu items that have not been selected disappear from the menu, making it shorter.

Copyright © 2005, Pearson Education, Inc. Content Organization (cont.) Menu layout

Copyright © 2005, Pearson Education, Inc. Content Organization (cont.) Titles –For single menus, use a simple descriptive title. –For tree-structured menus, use the exact same words in the higher-level menu items as in the titles for the next lower-level menu. E.g. if a menu item is called Business and Financial Services, the next screen should have that phrase as its title.

Copyright © 2005, Pearson Education, Inc. Content Organization (cont.) Phrasing of menu items –Use familiar and consistent terminology –Ensure that items are distinct from one another E.g. “Slow tours of the countryside” and “Journeys with visits to parks” are less distinctive than are “Bike tours” and “Train tours to national parks”. –Use consistent and concise phrasing Users are likely to feel more comfortable and to be more successful with “Animal” and “Vegetable” than with “Information about animals” and “Vegetable choices you can make”. –Bring the keyword to the left Try to write menu items such that the first word aids the user in recognizing and discriminating between items – use “Size of type” instead of “Set the type of size”

Copyright © 2005, Pearson Education, Inc. Content Organization (cont.) Graphic layout and design: establish guidelines for consistency of at least these menu components: Titles –Some people prefer centered titles, but left justification is an acceptable approach. Item placement –Typically, items are left justified, with the item number or letter proceeding the item description. Instructions –The instructions should be identical in each menu and should be placed in the same position. Error messages –If the users make unacceptable choice, the error messages should appear in a consistent position and should use consistent terminology and syntax.

Copyright © 2005, Pearson Education, Inc. Fast Movement Through Menus Keyboard shortcuts –Supports expert use An expert user might memorize that in Microsoft Word the shortcut Ctrl+C for Copy, followed by Ctrl+V for Paste. –Bookmarks in browsers In web browsers, book marks provide a way for users to take shortcuts to destinations that they have visited previously.

Copyright © 2005, Pearson Education, Inc. Data Entry with Menus: Form Fillin, Dialog Boxes Form Fillin –Appropriate when many fields of data must be entered: Full complement of information is visible to user. Display resembles familiar paper forms. Few instructions are required for many types of entries. –Users must be familiar with: Keyboards Use of TAB key or mouse to move the cursor Error correction methods Field-label meanings Use of the ENTER and/or RETURN key.

Copyright © 2005, Pearson Education, Inc. Data Entry with Menus: Form Fillin, Dialog Boxes Form-Fillin Design Guidelines –Meaningful title –Comprehensible instructions –Logical grouping and sequencing of fields (e.g. city followed by state followed by zip code) –Familiar field labels –Consistent terminology and abbreviations –Visible space and boundaries for data-entry fields (an appropriate- sized box can show field length in GUIs) –Convenient cursor movement (Tab key or cursor-movement arrows) –Error prevention –Error messages for unacceptable values (e.g. zip codes – 5 digits) –Optional fields clearly marked (or required fields) –Explanatory messages for fields –Completion signal (e.g. Submit buttons)

Copyright © 2005, Pearson Education, Inc. Data Entry with Menus: Form Fillin, Dialog Boxes

Copyright © 2005, Pearson Education, Inc. Data Entry with Menus: Form Fillin, Dialog Boxes Format-specific field –Coded fields Telephone numbers Telephone: (_ _ ) _ _ _ - _ _ _ _ Times Time _ _ : _ _ _ _ (09.:45 AM or PM) Dates Date: _ _/ _ _/ _ _ _ _ (MM/DD/YYYY) Dollar amounts (or other currency) Deposit amount: $_ _ _ _ _.00

Copyright © 2005, Pearson Education, Inc. Data Entry with Menus: Form Fillin, Dialog Boxes Dialog Boxes –In modern GUIs, many tasks are interrupted to request users to select options or perform limited data entry. –The most common solution is to provide a dialog box. –Dialog-box design combines menu-selection and form-fillin techniques.

Copyright © 2005, Pearson Education, Inc. Audio Menus –Verbal prompts and option descriptions –Input is normally verbal or keypad –Not persistent, like a visual display, so memorization is required. –For example, users of a drugstore telephone menu might remember that they can dial 1 followed by 0 to be connected to the pharmacy immediately, without having to listen to the store’s welcome message and the list of options.