Chapter 7Chapter 7

Menu Selection, Form Fillin and Dialog Boxes

Task-Related Organization Task-Related Organization Hierarchies / tree

structures◦ “Natural” for taxonomies◦ Ubiquitous◦ Powerful in organizing - log

levels◦ Natural for menus

Menu organization provides a structuring of choices◦ Also, revealing system and

command structure through organization

Menu organization one element in how user creates mental model

Various “well understood” organizations are possible

Single MenusSingle Menus

Binary Menus Mnemonic lettersRadio ButtonsButton ChoiceMultiple-item Menus Multiple-selection menus or check

boxesPull-down or pop-up menus Scrolling and two-dimensional menusAlphasliders

Single Menus (cont.)Single Menus (cont.)

Copyright © 2005, Pearson Education, Inc.

Single Menus (cont.)Single Menus (cont.)

Toolbars and palletes

Iconic menusPop-up

menus

Single Menus (cont.)Single Menus (cont.)

Menus for long lists

Scrolling menus ◦ Display first portion of menu, additional

menu item (typically an arrow) that leads to the next set of items in the menu sequence

Combo boxes ◦ Combine scrolling menu with a text-entry field

Single Menus (cont.)Single Menus (cont.)

Sliders and alphasliders◦ Slider allows the selection of a value◦ Shneiderman: “The alphaslider uses multiple levels

of granularity in moving slider thumb and can support tens or hundreds of thousand of items.”

Fisheye MenuFisheye Menu

Fisheye menus ◦ Display all of the

menu items on screen at once, but show only items near cursor at full size

Single Menus (cont.)Single Menus (cont.)

Menus for long lists (cont.)

◦Sliders and alphasliders◦ Slider allows the selection of a value◦ Shneiderman: “The alphaslider uses multiple levels

of granularity in moving slider thumb and can support tens or hundreds of thousand of items.”

Single Menus (cont.)Single Menus (cont.)

Menus for long lists (cont.)Two-dimensional menus

◦ Fast and vast” ◦ Give users a good overview of choices◦ Reduce the number of required actions◦ Allow rapid selection

Single Menus (cont.)Single Menus (cont.)

Embedded Menus are found in the Web interface and other hypertex interfaces. Lynx is an interesting example where a text based interface is provided for the web. It permits the user to select whether they want to move the cursor or select by number. A great strength of embedded menus is that they make the provision of context for each choice natural.

Single Menus (cont.)Single Menus (cont.)

Single Menus (cont.)Single Menus (cont.)

Embedded menus and hotlinks◦ Alternative to explicit menus◦ Natural to allow users reading about people,

events, and places to retrieve detailed information by selecting menus in context

Combination of multiple Combination of multiple menusmenus

Linear menu sequences and simultaneous menus◦Linear

Guide the user through complex decision-making process, e.g., install

Effective for novice users performing simple tasks

◦ Simultaneous Present multiple active menus at the same

time and allows users to enter choices in any order

Frequently used in web pages

Combination of Combination of multiple menus (cont.)multiple menus (cont.)

Tree-structured menus◦ Designers can form categories of

similar items to create a tree structure E.g., fonts, size style, spacing

Tree-structured MenusE.g. familiar examples Male, femaleAnimal, vegetable, mineralFonts, size, style, spacing

Combination of Combination of multiple menus (cont.)multiple menus (cont.)

Menu Maps◦ Effective for providing overviews to

minimize user disorientation.

Acyclic and Cyclic NetworksUseful for social relationships transportation routingscientific-journal citationsCan cause confusion and disorientation.

Audio Menus and Menus for Audio Menus and Menus for Small DisplaysSmall Displays

Menu systems in small displays and situations where hands and eyes are busy are a challenge.

Audio menus◦ Verbal prompts and option descriptions◦ Input is normally verbal or keypad◦ Not persistent, like a visual display, so

memorization is required.◦ Request users can avoid listening to

options

Audio Menus and Menus for Audio Menus and Menus for Small Displays (cont.)Small Displays (cont.)

Menu for small displays◦ E.g., entertainment, communication

services◦ Learnability is a key issue◦ Hardware buttons

Navigation, selection◦ Spatial design is extremely critical on small

screens Every word counts!

◦ GPS and radio frequency identification provides some automatic input

Audio Menus and Menus for Audio Menus and Menus for Small Displays (cont.)Small Displays (cont.)

Guidelines for (small) information appliances◦Account for target domain◦Dedicated devices mean dedicated UIs◦Allocate functions appropriately; consider

frequency and importance◦Simplify◦Design for responsiveness, plan for

interruptions, provide continuous feedback

Content OrganizationContent Organization

Task-related grouping in tree organization◦ Create groups of logically similar items ◦ Form groups that cover all possibilities ◦ Make sure that items are non-overlapping ◦ Use familiar terminology, but ensure that

items are distinct from one another

Content Organization Content Organization (cont.)(cont.) Item Presentation Sequence

◦ The order of items in the menu is important, and should take natural task-oriented sequence into account when possible: Time Numeric ordering Physical properties

◦ 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. Consistency with other related systems

Content Organization Content Organization (cont.)(cont.)

Adaptive menus vs most-recently-used combo box

Content Organization (cont.)Content Organization (cont.)

Menu layout guidelinesTitles

◦ 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 titles for next lower-level menu. E.g. if a menu item is called Business and

Financial Services, 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 Use consistent and concise phrasing Bring the keyword to the left

Graphic layout and design

◦ Constraints screen width and length display rate character set highlighting techniques

Establish guidelines for consistency of at least these menu components: ◦ Titles ◦ Item placement ◦ Instructions ◦ Error messages ◦ Status reports

Content Organization Content Organization (cont.)(cont.)Menu layout (cont.) Techniques IndentationUpper/lower case charactersSymbols such as * or - to create separators

or outlinesPosition markersCascading or walking menusMagic lens

Fast Movement Through Fast Movement Through MenusMenus

Keyboard shortcuts◦ Supports expert use◦ Can make translation to a foreign

language more difficult Localization tip: make sure accelerators get

translated!

◦ Bookmarks in browsers◦ User configured toolbars

Content Organization Content Organization (cont.)(cont.)Menu statusMenu item effective for choosing item

from list, but there’s more …◦ Textual input in particular

Form fill-in ◦ Set of text input boxes◦ Format can be constrained, e.g., mm/dd/yyyy

Dialog box◦ Limited data entry coupled with menu

selection◦ Often a standardized element with guidelines

Data Entry with Menus: Form Data Entry with Menus: Form Fillin, Dialog Boxes, and Fillin, Dialog Boxes, and AlternativesAlternatives

Form-Fillin Design Guidelines◦ Meaningful title ◦ Comprehensible instructions ◦ Logical grouping and sequencing of fields ◦ Visually appealing layout of the form ◦ Familiar field labels ◦ Consistent terminology and abbreviations ◦ Convenient cursor movement (tabbing)◦ Error correction for individual characters

and entire fields ◦ Error messages for unacceptable values ◦ Optional fields clearly marked

Data Entry with Menus: Form Data Entry with Menus: Form Fillin, Dialog Boxes, and Fillin, Dialog Boxes, and AlternativesAlternatives

Blooper

Data Entry with Menus: Form Fillin, Data Entry with Menus: Form Fillin, Dialog Boxes, and AlternativesDialog Boxes, and Alternatives

Format-specific field◦ Coded fields

Telephone numbers Social-security numbers Times, Dates Dollar amounts (or other currency)

Data Entry with Menus: Form Data Entry with Menus: Form Fillin, Dialog Boxes, and Fillin, Dialog Boxes, and AlternativesAlternativesDialog Boxes

◦ Combination of menu and form-fillin techniques.

◦ Internal layout guidelines: Error prevention by direct manipulation Clustering and emphasis Proper clustering/grouping and emphasis of

information Consistent layouts (margins, grid, white space, lines,

boxes) Consistent terminology, fonts, capitalization,

justification Standard buttons (OK, Cancel) in standard locations

CombinationsCombinations Novel design combining menus and

direct manipulation◦ Pie menus◦ Allows “walking out” for selection◦ Control menus◦ Marking menus (radial menus)◦ Toolglass◦ Flow menus

Return to central rest area triggers selection and allows further choice