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

Copyright © 2005, Pearson Education, Inc.

Chapter 6

Menu Selection, Form Fillin, and

Dialog Boxes


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."


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.



• 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.



• 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


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


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.



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



• 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.



Pop-up menus

The contents of the pop-up menu usually depend on where the cursor is when the pointing device is clicked



• 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”.



• 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.



Combo boxes menus

Combo boxes combine a scrolling menu with a text-entry filed



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.



• 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.



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.



• 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.



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.


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


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 (http://www.shopping.com/xDN-sunglasses).

http://www.shopping.com/xDN-sunglasses




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.



• 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.



• 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.



The Lycos site-map page presents the entire menu structure of the web site (www.lycos.com)



• 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.


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.


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.



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.



• Menu layout



• 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.



• 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”


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.


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.


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.



• 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)





• Format-specific field– Coded fields

• Telephone numbers Telephone: (_ _ ) _ _ _ - _ _ _ _

• Times Time _ _ : _ _ _ _ (09.:45 AM or PM)

• DatesDate: _ _/ _ _/ _ _ _ _ (MM/DD/YYYY)

• Dollar amounts (or other currency) Deposit amount: $_ _ _ _ _.00



• 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.


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.

Documents

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