1. Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU

2. Menus Lists of options  Textual or graphical A way of organizing system capabilities  Navigate to a new menu/screen  Perform an function  Select data/parameters  Display information And also a learning tool

3. Menu-Based Interaction Based on recognition as opposed to recall  No need to remember commands  Users search from a list of possible choices  Avoids user error  List provides constraints Structure decision making

4. Advantages & Disadvantages For the novice user  Help build a mental model of the task  No need to remember options  Present choices among alternatives For the expert user  Understand the task very well and know what choices one needs  Need to “translate” what one wants to do into an allowable action sequence

5. Advantages & Disadvantages Easy to learn, to use, and to relearn Suitable to tasks in which steps and likely input values are predictable Consumes screen space

6. Pull-Down Menus

7. Mark Toggles and Settings

8. Cascading Menus

9. Expanding Menus Default condensed menu Menu after Check for Updates Full menu was selected

10. Pop-Up Menus

11. Tear-Off Menus

12. Layered Context-Dependent Menus

13. Other Menu Types Keyboard-based menus Picture menus

14. Challenges in Menu Design Limited space and many choices Need to accommodate both novice users performing simple tasks and expert users performing complex tasks

15. Menu Organization Dividing tasks into broad categories  Also following standards Categories should be meaningful in the context of the user’s task  A way to promote task match  Easy to locate, remember No overlapping No irrelevant items

16. An Example

17. Design Issues Breadth and depth  Limit the depth of menu structures when possible  If a menu requires scrolling or overruns the space available, it is definitely too long Using visual separators Isolate destructive actions from frequently used items

18. Design Issues (Cont.) Menus for long lists  Scrolling  Combo boxes  Fisheye  Sliders  Two-dimensional Follow platform standards

19. Menu Options Descriptive, unambiguous Consistent in placement, order, wording, highlighting etc. Mnemonics Accelerators for frequently used ones

20. Menu Options (Cont.) Displaying options  All, relevant ones only, or graying-out some  Inaccessible (grayed out) options should remain on the menu in their usual location Ordering  Natural  Frequency-based  Alphabetical

21. Navigational Structure Single Linear Simultaneous Tree- structured Networked

22. Navigational Structure Single Sequential Hierarchal Star Networked

23. Navigation Aids Menu map Look-ahead Navigation history

24. Physical Access to Menu Choose input devices for access  Touch screens  Pointing devices (mouse, stylus, …)  Keyboards Consider users  with low-level typing skills  having difficulty with precise pointing

25. Form Fill-in Interaction Similar to paper forms  A familiar metaphor  Tasks with a lot of data entry Provide guidance about expected content and format for the data to be entered Especially useful for users who are familiar with the task at hand but need the cueing  Such as using tax software

26. Design Issues Grouping and labels of fields  guide the user through  help locate/remember fields Group form elements logically  meaningful in the context of the task Data validation  form-level vs. field level Provide format information

27. Navigation Forms can be presented using  Single scrolling screens  Multiple linked pages Provide navigation support Inform the user about the length of paged forms and where they are within the structure

28. Advantages & Disadvantages Advantages  Low memory requirements  Self-explanatory  Present a context for input information Disadvantages  Require valid input in valid format  Require familiarity with interface controls  Can be tedious to correct mistakes  Take up a lot of screen space

29. Question and Answer Also called wizards

30. 1-30 Discussion Low memory requirements Self-explanatory Simple linear presentation Can be tedious to correct mistakes Navigation  Easy navigation to Prev and Next  Difficult to any other page  An alternative design – Turbo Tax