Chapter 7 Menu Selection, Form Fillin and Dialog Boxes
Task-Related Organization  <ul><li>Hierarchies / tree structures </li></ul><ul><ul><li>“ Natural” for taxonomies </li></ul...
Single Menus <ul><li>Binary Menus Mnemonic letters </li></ul><ul><li>Radio Buttons </li></ul><ul><li>Button Choice </li></...
Single Menus (cont.) Copyright © 2005, Pearson Education, Inc.
Single Menus (cont.) <ul><li>Toolbars and palletes </li></ul><ul><li>Iconic menus </li></ul><ul><li>Pop-up menus </li></ul>
Single Menus (cont.) <ul><li>Menus for long lists </li></ul><ul><li>Scrolling menus  </li></ul><ul><ul><li>Display first p...
Single Menus (cont.) <ul><li>Sliders and alphasliders </li></ul><ul><ul><li>Slider allows the selection of a value </li></...
Fisheye Menu <ul><li>Fisheye menus  </li></ul><ul><ul><li>Display all of the menu items on screen at once, but show only i...
Single Menus (cont.) <ul><li>Menus for long lists (cont.) </li></ul><ul><ul><li>Sliders and alphasliders </li></ul></ul><u...
Single Menus (cont.) <ul><li>Menus for long lists (cont.) </li></ul><ul><li>Two-dimensional menus </li></ul><ul><ul><li>Fa...
Single Menus (cont.) <ul><li>Embedded Menus  are found in the Web interface and other hypertex interfaces. Lynx is an inte...
Single Menus (cont.)
Single Menus (cont.) <ul><li>Embedded menus and hotlinks </li></ul><ul><ul><li>Alternative to explicit menus </li></ul></u...
Combination of multiple menus <ul><li>Linear menu sequences and simultaneous menus </li></ul><ul><ul><li>Linear </li></ul>...
Combination of  multiple menus (cont.) <ul><li>Tree-structured menus </li></ul><ul><ul><li>Designers can form categories o...
Combination of  multiple menus (cont.) <ul><li>Menu Maps </li></ul><ul><ul><li>Effective for providing overviews to minimi...
Audio Menus and Menus for  Small Displays <ul><li>Menu systems in small displays and situations where hands and eyes are b...
Audio Menus and Menus for  Small Displays (cont.) <ul><li>Menu for small displays </li></ul><ul><ul><li>E.g., entertainmen...
Audio Menus and Menus for  Small Displays (cont.) <ul><li>Guidelines for (small) information appliances </li></ul><ul><ul>...
Content Organization <ul><li>Task-related grouping in tree organization </li></ul><ul><ul><li>Create groups of logically s...
Content Organization (cont.) <ul><li>Item Presentation Sequence </li></ul><ul><ul><li>The order of items in the menu is im...
Content Organization (cont.) Adaptive menus vs most-recently-used  combo box
Content Organization (cont.) <ul><li>Menu layout guidelines </li></ul><ul><li>Titles </li></ul><ul><ul><li>For single menu...
<ul><li>Graphic layout and design </li></ul><ul><ul><li>Constraints  </li></ul></ul><ul><ul><ul><li>screen width and lengt...
Content Organization (cont.) <ul><li>Menu layout (cont.)   </li></ul><ul><li>Techniques Indentation </li></ul><ul><li>Uppe...
Fast Movement Through Menus <ul><li>Keyboard shortcuts </li></ul><ul><ul><li>Supports expert use </li></ul></ul><ul><ul><l...
Content Organization (cont.) <ul><li>Menu status </li></ul><ul><li>Menu item effective for choosing item from list, but th...
Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives <ul><li>Form-Fillin Design Guidelines </li></ul><ul><ul...
Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives Blooper
Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives <ul><li>Format-specific field </li></ul><ul><ul><li>Cod...
Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives <ul><li>Dialog Boxes </li></ul><ul><ul><li>Combination ...
Combinations <ul><li>Novel design combining menus and direct manipulation </li></ul><ul><ul><li>Pie menus </li></ul></ul><...
Upcoming SlideShare
Loading in …5
×

Chap07

999 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
999
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chap07

  1. 1. Chapter 7 Menu Selection, Form Fillin and Dialog Boxes
  2. 2. Task-Related Organization <ul><li>Hierarchies / tree structures </li></ul><ul><ul><li>“ Natural” for taxonomies </li></ul></ul><ul><ul><li>Ubiquitous </li></ul></ul><ul><ul><li>Powerful in organizing - log levels </li></ul></ul><ul><ul><li>Natural for menus </li></ul></ul><ul><li>Menu organization provides a structuring of choices </li></ul><ul><ul><li>Also, revealing system and command structure through organization </li></ul></ul><ul><li>Menu organization one element in how user creates mental model </li></ul><ul><li>Various “well understood” organizations are possible </li></ul>
  3. 3. Single Menus <ul><li>Binary Menus Mnemonic letters </li></ul><ul><li>Radio Buttons </li></ul><ul><li>Button Choice </li></ul><ul><li>Multiple-item Menus </li></ul><ul><li>Multiple-selection menus or check boxes </li></ul><ul><li>Pull-down or pop-up menus </li></ul><ul><li>Scrolling and two-dimensional menus </li></ul><ul><li>Alphasliders </li></ul>
  4. 4. Single Menus (cont.) Copyright © 2005, Pearson Education, Inc.
  5. 5. Single Menus (cont.) <ul><li>Toolbars and palletes </li></ul><ul><li>Iconic menus </li></ul><ul><li>Pop-up menus </li></ul>
  6. 6. Single Menus (cont.) <ul><li>Menus for long lists </li></ul><ul><li>Scrolling menus </li></ul><ul><ul><li>Display first portion of menu, additional menu item (typically an arrow) that leads to the next set of items in the menu sequence </li></ul></ul><ul><li>Combo boxes </li></ul><ul><ul><li>Combine scrolling menu with a text-entry field </li></ul></ul>
  7. 7. Single Menus (cont.) <ul><li>Sliders and alphasliders </li></ul><ul><ul><li>Slider allows the selection of a value </li></ul></ul><ul><ul><li>Shneiderman: “The alphaslider uses multiple levels of granularity in moving slider thumb and can support tens or hundreds of thousand of items.” </li></ul></ul>
  8. 8. Fisheye Menu <ul><li>Fisheye menus </li></ul><ul><ul><li>Display all of the menu items on screen at once, but show only items near cursor at full size </li></ul></ul>
  9. 9. Single Menus (cont.) <ul><li>Menus for long lists (cont.) </li></ul><ul><ul><li>Sliders and alphasliders </li></ul></ul><ul><ul><li>Slider allows the selection of a value </li></ul></ul><ul><ul><li>Shneiderman: “The alphaslider uses multiple levels of granularity in moving slider thumb and can support tens or hundreds of thousand of items.” </li></ul></ul>
  10. 10. Single Menus (cont.) <ul><li>Menus for long lists (cont.) </li></ul><ul><li>Two-dimensional menus </li></ul><ul><ul><li>Fast and vast” </li></ul></ul><ul><ul><li>Give users a good overview of choices </li></ul></ul><ul><ul><li>Reduce the number of required actions </li></ul></ul><ul><ul><li>Allow rapid selection </li></ul></ul>
  11. 11. Single Menus (cont.) <ul><li>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. </li></ul>
  12. 12. Single Menus (cont.)
  13. 13. Single Menus (cont.) <ul><li>Embedded menus and hotlinks </li></ul><ul><ul><li>Alternative to explicit menus </li></ul></ul><ul><ul><li>Natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context </li></ul></ul>
  14. 14. Combination of multiple menus <ul><li>Linear menu sequences and simultaneous menus </li></ul><ul><ul><li>Linear </li></ul></ul><ul><ul><ul><li>Guide the user through complex decision-making process, e.g., install </li></ul></ul></ul><ul><ul><ul><li>Effective for novice users performing simple tasks </li></ul></ul></ul><ul><ul><li>Simultaneous </li></ul></ul><ul><ul><ul><li>Present multiple active menus at the same time and allows users to enter choices in any order </li></ul></ul></ul><ul><ul><ul><li>Frequently used in web pages </li></ul></ul></ul>
  15. 15. Combination of multiple menus (cont.) <ul><li>Tree-structured menus </li></ul><ul><ul><li>Designers can form categories of similar items to create a tree structure </li></ul></ul><ul><ul><ul><li>E.g., fonts, size style, spacing </li></ul></ul></ul><ul><li>Tree-structured Menus </li></ul><ul><li>E.g. familiar examples Male, female </li></ul><ul><li>Animal, vegetable, mineral </li></ul><ul><li>Fonts, size, style, spacing </li></ul>
  16. 16. Combination of multiple menus (cont.) <ul><li>Menu Maps </li></ul><ul><ul><li>Effective for providing overviews to minimize user disorientation. </li></ul></ul><ul><li>Acyclic and Cyclic Networks </li></ul><ul><li>Useful for social relationships </li></ul><ul><li>transportation routing </li></ul><ul><li>scientific-journal citations </li></ul><ul><li>Can cause confusion and disorientation. </li></ul>
  17. 17. Audio Menus and Menus for Small Displays <ul><li>Menu systems in small displays and situations where hands and eyes are busy are a challenge. </li></ul><ul><li>Audio menus </li></ul><ul><ul><li>Verbal prompts and option descriptions </li></ul></ul><ul><ul><li>Input is normally verbal or keypad </li></ul></ul><ul><ul><li>Not persistent, like a visual display, so memorization is required. </li></ul></ul><ul><ul><li>Request users can avoid listening to options </li></ul></ul>
  18. 18. Audio Menus and Menus for Small Displays (cont.) <ul><li>Menu for small displays </li></ul><ul><ul><li>E.g., entertainment, communication services </li></ul></ul><ul><ul><li>Learnability is a key issue </li></ul></ul><ul><ul><li>Hardware buttons </li></ul></ul><ul><ul><ul><li>Navigation, selection </li></ul></ul></ul><ul><ul><li>Spatial design is extremely critical on small screens </li></ul></ul><ul><ul><ul><li>Every word counts! </li></ul></ul></ul><ul><ul><li>GPS and radio frequency identification provides some automatic input </li></ul></ul>
  19. 19. Audio Menus and Menus for Small Displays (cont.) <ul><li>Guidelines for (small) information appliances </li></ul><ul><ul><li>Account for target domain </li></ul></ul><ul><ul><li>Dedicated devices mean dedicated UIs </li></ul></ul><ul><ul><li>Allocate functions appropriately; consider frequency and importance </li></ul></ul><ul><ul><li>Simplify </li></ul></ul><ul><ul><li>Design for responsiveness, plan for interruptions, provide continuous feedback </li></ul></ul>
  20. 20. Content Organization <ul><li>Task-related grouping in tree organization </li></ul><ul><ul><li>Create groups of logically similar items </li></ul></ul><ul><ul><li>Form groups that cover all possibilities </li></ul></ul><ul><ul><li>Make sure that items are non-overlapping </li></ul></ul><ul><ul><li>Use familiar terminology, but ensure that items are distinct from one another </li></ul></ul>
  21. 21. Content Organization (cont.) <ul><li>Item Presentation Sequence </li></ul><ul><ul><li>The order of items in the menu is important, and should take natural task-oriented sequence into account when possible: </li></ul></ul><ul><ul><ul><li>Time </li></ul></ul></ul><ul><ul><ul><li>Numeric ordering </li></ul></ul></ul><ul><ul><ul><li>Physical properties </li></ul></ul></ul><ul><ul><li>When cases have no task-related orderings, the designer must choose from such possibilities as: </li></ul></ul><ul><ul><ul><li>Alphabetic sequence of terms </li></ul></ul></ul><ul><ul><ul><li>Grouping of related items </li></ul></ul></ul><ul><ul><ul><li>Most frequently used items first </li></ul></ul></ul><ul><ul><ul><li>Most important items first. </li></ul></ul></ul><ul><ul><ul><li>Consistency with other related systems </li></ul></ul></ul>
  22. 22. Content Organization (cont.) Adaptive menus vs most-recently-used combo box
  23. 23. Content Organization (cont.) <ul><li>Menu layout guidelines </li></ul><ul><li>Titles </li></ul><ul><ul><li>For single menus, use a simple descriptive title. </li></ul></ul><ul><ul><li>For tree-structured menus, use the exact same words in the higher-level menu items as in titles for next lower-level menu. </li></ul></ul><ul><ul><ul><li>E.g. if a menu item is called Business and Financial Services, next screen should have that phrase as its title. </li></ul></ul></ul><ul><ul><li>Phrasing of menu items </li></ul></ul><ul><ul><ul><li>Use familiar and consistent terminology </li></ul></ul></ul><ul><ul><ul><li>Ensure that items are distinct from one another </li></ul></ul></ul><ul><ul><ul><li>Use consistent and concise phrasing </li></ul></ul></ul><ul><ul><ul><li>Bring the keyword to the left </li></ul></ul></ul>
  24. 24. <ul><li>Graphic layout and design </li></ul><ul><ul><li>Constraints </li></ul></ul><ul><ul><ul><li>screen width and length </li></ul></ul></ul><ul><ul><ul><li>display rate </li></ul></ul></ul><ul><ul><ul><li>character set </li></ul></ul></ul><ul><ul><ul><li>highlighting techniques </li></ul></ul></ul><ul><li>Establish guidelines for consistency of at least these menu components: </li></ul><ul><ul><li>Titles </li></ul></ul><ul><ul><li>Item placement </li></ul></ul><ul><ul><li>Instructions </li></ul></ul><ul><ul><li>Error messages </li></ul></ul><ul><ul><li>Status reports </li></ul></ul>
  25. 25. Content Organization (cont.) <ul><li>Menu layout (cont.) </li></ul><ul><li>Techniques Indentation </li></ul><ul><li>Upper/lower case characters </li></ul><ul><li>Symbols such as * or - to create separators or outlines </li></ul><ul><li>Position markers </li></ul><ul><li>Cascading or walking menus </li></ul><ul><li>Magic lens </li></ul>
  26. 26. Fast Movement Through Menus <ul><li>Keyboard shortcuts </li></ul><ul><ul><li>Supports expert use </li></ul></ul><ul><ul><li>Can make translation to a foreign language more difficult </li></ul></ul><ul><ul><ul><li>Localization tip: make sure accelerators get translated! </li></ul></ul></ul><ul><ul><li>Bookmarks in browsers </li></ul></ul><ul><ul><li>User configured toolbars </li></ul></ul>
  27. 27. Content Organization (cont.) <ul><li>Menu status </li></ul><ul><li>Menu item effective for choosing item from list, but there’s more … </li></ul><ul><ul><li>Textual input in particular </li></ul></ul><ul><li>Form fill-in </li></ul><ul><ul><li>Set of text input boxes </li></ul></ul><ul><ul><li>Format can be constrained, e.g., mm/dd/yyyy </li></ul></ul><ul><li>Dialog box </li></ul><ul><ul><li>Limited data entry coupled with menu selection </li></ul></ul><ul><ul><li>Often a standardized element with guidelines </li></ul></ul>
  28. 28. Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives <ul><li>Form-Fillin Design Guidelines </li></ul><ul><ul><li>Meaningful title </li></ul></ul><ul><ul><li>Comprehensible instructions </li></ul></ul><ul><ul><li>Logical grouping and sequencing of fields </li></ul></ul><ul><ul><li>Visually appealing layout of the form </li></ul></ul><ul><ul><li>Familiar field labels </li></ul></ul><ul><ul><li>Consistent terminology and abbreviations </li></ul></ul><ul><ul><li>Convenient cursor movement (tabbing) </li></ul></ul><ul><ul><li>Error correction for individual characters and entire fields </li></ul></ul><ul><ul><li>Error messages for unacceptable values </li></ul></ul><ul><ul><li>Optional fields clearly marked </li></ul></ul>
  29. 29. Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives Blooper
  30. 30. Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives <ul><li>Format-specific field </li></ul><ul><ul><li>Coded fields </li></ul></ul><ul><ul><ul><li>Telephone numbers </li></ul></ul></ul><ul><ul><ul><li>Social-security numbers </li></ul></ul></ul><ul><ul><ul><li>Times, Dates </li></ul></ul></ul><ul><ul><ul><li>Dollar amounts (or other currency) </li></ul></ul></ul>
  31. 31. Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives <ul><li>Dialog Boxes </li></ul><ul><ul><li>Combination of menu and form-fillin techniques. </li></ul></ul><ul><ul><li>Internal layout guidelines: </li></ul></ul><ul><ul><ul><li>Error prevention by direct manipulation </li></ul></ul></ul><ul><ul><ul><li>Clustering and emphasis </li></ul></ul></ul><ul><ul><ul><li>Proper clustering/grouping and emphasis of information </li></ul></ul></ul><ul><ul><ul><li>Consistent layouts (margins, grid, white space, lines, boxes) </li></ul></ul></ul><ul><ul><ul><li>Consistent terminology, fonts, capitalization, justification </li></ul></ul></ul><ul><ul><ul><li>Standard buttons (OK, Cancel) in standard locations </li></ul></ul></ul>
  32. 32. Combinations <ul><li>Novel design combining menus and direct manipulation </li></ul><ul><ul><li>Pie menus </li></ul></ul><ul><ul><li>Allows “walking out” for selection </li></ul></ul><ul><ul><li>Control menus </li></ul></ul><ul><ul><li>Marking menus (radial menus) </li></ul></ul><ul><ul><li>Toolglass </li></ul></ul><ul><ul><li>Flow menus </li></ul></ul><ul><ul><ul><li>Return to central rest area triggers selection and allows further choice </li></ul></ul></ul>

×