Upload
meltem7798
View
805
Download
5
Tags:
Embed Size (px)
Citation preview
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