Menus.docx

7/29/2019 Menus.docx

1/5

Menus, Forms, and Dialog Boxes

Overview.

Menus and forms considered "attractive alternatives" to DM. Why?

low mental load (recognition, not recall) attractive to novice or intermittent users

Their use does not guarantee appealing and easy to use UI!

Shneiderman definitions:

Menu: any selection from list. Quite a broad definition. Form fillin : collection of data entry fields (paper form as metaphor) Dialog box : device to organize menus and forms The World of Menus How many kinds can you name, based on Shneiderman definition? (pulldown, popup, check box, command buttons, radio buttons, www links,

toolbar, palette, . . .).

A tour through MacWrite and Word 97 revealed a large number of techniques.Organize for Task Support

M,F,and DB should be designed and organized to support user tasks.

Some menu organizations include:

1.single menu: two or more items simultaneously available.

There are semantic variations (e.g. single vs multiple item selection, state vs.command).

There are many different styles (buttons, radio buttons, icons, numbered list,scrolling list, toolbars, palettes, embedded links in web page)

2. linear sequences and multiple menus: guided sequence of choices (such as Wizard)

Guides user through complex decision making by presenting one decision at atime.

Possible alternative to dialog box.3. tree-structured menus: requires classification into mutually-exclusive categories


2/5

such classification may not be feasible (do not use in that case) uses abstraction to handle large numbers of choices selection speed depends on:

o logical organization (grouping, breadth vs depth)o terminology (get from task domain),o user knowing what name to look for

Breadth (number of items per list) is preferred to depth (number of levels) --tradeoff. Many empirical studies confirm this.

Each layer of depth increases chances for disorientation and error (offset withmenu map)

In designing groupings, follow these guidelines:o create groups of logically related itemso make sure groups cover all possibilities (leave no gaps)o make sure items do not overlapo use domain terminologyo each item has distinctly different label

4. acyclic and cyclic menu networks:

use if appropriate, beware that disorientation occurs more easily than with tree. Provide orienting information (distance from main, position in network).

Menu Layout

Menu Item Sequence:

Some possibilities include:o chronological orderingo numeric ordering (ascending or descending)o alphabetical ordero usage frequency order (most frequent first)o importance order (most important first)o subgroups of functionally related items (separate by space/line)

One cannotcategorically say that one of these is better than another. Dependson what items represent, user familiarity with items and task

All studies show that dynamically adaptive ordering is no good -- surprises theuser.

If ordering by frequency, let user determine when to update order!


3/5

Menu Item Names:

terminology should be familiar to expected user audience terminology should be consistent across items names and phrases should be clearly distinct from each other if phrase, place keyword first (leftmost) item phrases should be concise

Other layout guidelines:

Menu titles should be left- or center-justified Menu tems should be left-justified Consistency, consistency, consistency!!

Menu Fast Select and Response time

Fast select through:o Shortcut keystrokes and key combinationso Bookmarkso Macro facility to record menu selection paths (hierarchical)

Response time is how long for system to respond to menu selection. Can affect menu organization :

o longer response time should lead to fewer levels of menus This had all but disappeared as an issue until the Web!

Form Fillin

For entering several items or groups of related items concurrently. Existed long before bitmapped displays and DM. Attractive due to metaphor: paper form.

Here are some Shneiderman guidelines for designing such a form.

1. Give form a meaningful title2. Group related fields3. Separate groups with space.4. Uniformly distribute and align fields/groups on form.5. Match screen form layout to paper form (if data entry from paper)6. Use concise instructions in command form ("Type the address.").7. When instructing user to type normal characters, use "type".


4/5

8. When instructing user to type control keys, use "press".9. Use the word "enter" only to refer to Enter key.10.Use familiar and consistent terminology for field labels.11.Allow easy movement between fields (tab, arrows)12.Prevent input errors (through e.g. list selection)13.Allow easy error correction14.Use concise error messages in familiar terms15.Show error messages only after erroneous field value complete.16.When cursor is on field, provide explanation in standard place.17.Use coded fields as appropriate

(e.g. for ss#, supply dashes and skip forward automatically)

18.Mark optional fields and place them at end if appropriate19.Explicit completion signal (e.g. Submit or OK button)

There are many more guidelines, concerning use of graphics, color, multiscreen, etc.,

which are not addressed here.

Dialog Boxes

What is the difference between a form and a dialog box? According to Dix, et al :

forms used primarily for data entry dialog boxes primarily for system messages and subdialogs.

Direct quote from Dix et al: "Dialog boxes are information windows used by the

system to bring the user's attention to some important information, possibly an error

or a warning used to prevent a possible error. Alternatively, dialog boxes are used to

invoke a subdialog between user and system for a very specific task that will normally

be embedded within some larger task."

Dialog boxes range from very simple (click OK in response to message), to quite

complex (e.g. Word 97 Font specification, or Open dialog).

Shneiderman relates dialog boxes to menus and forms:"Dialog box design combines menu-selection and form-fillin issues with additional

concerns about consistency across hundreds of dialog boxes and relationship with

other items on the screen."

Some guidelines for designing menus also apply to dialog boxes.


5/5

Most guidelines for designing form fillin also apply to dialog boxes.

Dialog boxes pop up in front of other UI info, so:

Box should appearclose to relevant information without obscuring it. Box should be moveable Box should be as small as possible without being cramped. Box should be clearly distinguishable from background Box should not be too visually annoying or disruptive Use standard buttons (OK, Cancel, etc) to lessen mental burden.

Documents

Menus.docx