1. Details of Interaction Styles Dr.s Barnes and Leventhal

2. Reference/Reading  Chapter 8

3. Reminder  Usability is an outcome of the interaction of situational variables (task and user characteristics) and characteristics of the user interface.  We can design the user interface but we are GIVEN the situation.  So it makes sense that to improve your chances of good usability, you should select an interaction style that is APPROPRIATE for the situation.  Not every interaction style or combination is appropriate for every situation.  The commercial success of MS Windows may lead us to believe that there is a “one-size fits all” solution for every situation, but in fact that is not true.

4. Structure of Presentations  For each interaction style presented in Chapter 8, the following information is presented (more or less)  Definition and description of the interaction style  Situations in which the interaction style is most likely appropriate.  Design decisions and guidelines for this interaction style.  Overview of different options for this interaction style.  Examples.

5. Menu Interactions  Definition - A menu presents options or choices explicitly  Consists of:  a series of options.  an id, a title, help text, and

6. Summary of Situations Which May Call for Menus  Situations:  Task  Tasks which are tightly structured  Users  Novices

7. Menu Advantages for Novices  Menus appear to have advantages for novice users:  They can provide tightly-structured tasks which can help the user build a conceptual model of the task.  Using a menu is a Recognition task.  All alternatives are presented.  Can reduce the user’s cognitive workload

8. Design Choices for Menus (1)  Choices in for an individual menu  Type of menu (e.g. Pull down or Pop up)  There are many choices of menu types because there are many ways to explicitly present a set of options.  At the end of this unit we will visit a number of different styles and discuss their positives and negatives.  Orientation of menus  Are choices laid out vertically or horizontally?

9. Design Choices for Menus (2)  Navigational Structure of Menu  Linear sequence of menus. User sees same sequence of menus no matter what. Eg. collecting responses or data on line.  Tree-structured menus. User traverses a hierarchical menu structure. At each menu, user decisions guide the next menu shown.  Menu networks - User traverses network menu structure. Unlike tree structure, user can move up-down, right-left...

10. Design Choices for Menus (3)  How does the user access the menu from the screen?  Is the menu structure always visible or is it embedded into the presentation. For example, in embedded networks. Select alternatives from text item which activates menu. (ie. Hypertext or pop-up menu). Alternatively a menu bar is always present and visible.  How does the user physically access menu  Touchscreens, mouse, lightpens, function keys, key press...

11. Design Choices for Menus (4)  Menu architecture  Breadth vs. depth tradeoffs.  How many items to put into one menu vs. how many menus.  Many short menus vs. fewer long menus  Some research suggests that a menu with about 4-8 items is superior to a menu with few or lots of items.  Limited depth seems to lead to higher performance and satisfaction levels

12. Design Choices for Menus (5)  Content and structure of categories (what to group together)  Should not be arbitrary  Categories should not overlap  Categories should not contain extraneous items.

13. Design Choices for Menus (6)  Ordering of items within a single menu  When possible use a natural or temporal ordering.  Other orders - alphabetical or frequency-based.  Menu titles, phrasing of items, graphical layouts should strive for clarity.

14. Guidelines for Menu Design (1)  Support Good Task Match  The menu structure should follow the semantic organization of the task: linear, hierarchical or network (ref, Shneiderman, 1982, Table 3.1)  Match menu structure to task structure (ref, Mayhew, 1999)  Menu categories should be distinctive and should reflect the task (ref, Shneiderman, 1982, Table 3.1)

15. Guidelines for Menu Design (2)  The menu architecture should support Wayfinding and Menu Navigation  Allow users to navigate menus in a consistent way (ref, Mayhew, 1999)  Allow the user to move back to previous menus and to return to the main menu or home base (ref, Shneiderman, 1982, Table 3.1, Instone, Mynatt, Leventhal, 1992)  Provide navigational information on each screen. The user should know how to move between menus (ref, Shneiderman, 1982, Table 3.1)  User should know where they are in the menu structure at all times (ref. Shneiderman, 1982, Table 3.1, Instone, Mynatt, Leventhal, 1992)

16. Guidelines for Menu Design (3)  Selection Method (selecting an option)  Choices include keyboard characters, cursors, and pointing devices (ref. Shneiderman, 1982)  Provide selection defaults when possible (ref. Mayhew, 1999)  Provide feedback for selections (ref. Mayhew, 1999)  Selection method should support both speed and accuracy, so the “right” answer for selection method may vary based on the number of items in the menu. For long menus, use of letter codes may be better than use of a pointing device (ref., Mayhew, 1999)

17. Guidelines for Menu Design (4)  Ordering and presentation of menu options  In menu, items should be logically organized (ref. Shneiderman, Table 3.1). Possibilities include alphabetical, frequency of choice, sequencing within the task or the conventions of the task (ref. Mayhew, 1999)  Support shortcuts for frequent or expert users (ref. Shneiderman, 1982)

18. Guidelines for Menu Design (5)  Selection of menu type  May be limited by guidelines for platform  If there is plenty of screen real estate, consider permanent menus. High frequency use may call for pop-up or user invoked menus (ref. Mayhew, 1999)  Less commonly used menu types may be appropriate in some situations  Pie menus may be fast for situations with few options  Command based (user types a letter or number for selection) may be appropriate for long lists of options or with  Command based (user types a letter or number for selection) may be appropriate for long lists of options or with interactive devices that are either unable to display visual interactions (e.g. VT100 terminals) or that are hampered by visuals (eg. Cell phones, personal digital assistants)

19. Examples of Improving Menu Design   Barbee's   Music example   In-class exercise

20. Book 8.2.11 In-class exercise - find the errors and correct   Some students in CS 205 have just received the assignment “Paradise Travel.” As part of the Paradise Travel problem, users are able to create trips to: Florida, Barbados, Cedar Point or Casino Windsor. For each trip that they create, they specify the dates of the trip, the number of travelers, and the price range of the hotel that they wish to stay in. Students in CS 205 are to use menus to allow users to build, modify and delete their trips as well as a menu to manage their trip portfolio.

21. Sample Solutions PARADISE TRAVEL Trip Portfolio Options AA Build a trip AB Remove a trip ACQuit Paradise Travel ADView a trip AE Edit a trip Type your choice of option by typing the letters of the option PARADISE TRAVEL Trip Portfolio Management B Build EEdit trip DEdit destination VView R Delete QQuit Paradise Travel

22. Worksheet for Your Answer Characteristic of Tong's Menu Characteristic of Melvin's Menu Relevant guideline

23. Characteristic of Tong's Menu Characteristic of Melvin's Menu Relevant guideline AE Edit a trip EEdit trip DEdit destination Categories should not overlap from the user's perspective, even if they seem to be different categories to the developer. In Melvin's menu, the destination would seem to be a subset of trip. AA Build a trip AB Remove a trip AC Quit Paradise Travel AD View a trip AE Edit a trip Choose a menu structure that most closely matches the structure of the user's task. When possible, use a natural ordering of options within a menu. The "natural" ordering may follow from the user's task. In Tong's menu, the quit is in the middle of the other choices. Typically we would think of Quit as being a final choice. Melvin has a blank line for invoking the menu choice. Facilitate wayfinding through the menu structure. Provide a clear home base for the menu structure Melvin's blank line does not give a lot of cues as to how to move from this menu to another. R Delete Use consistent menu layouts, terminology for options and selection strategies. For example, many menu interactions use typed numbers or letters as the selection mechanism. If this is the case in your design, use a consistent strategy to number or letter your menu options. Melvin has used the first letter of each choice for his option designator, except for Delete.

24. Specific Menu Types – Full Screen PARADISE TRAVEL Trip Portfolio Options AA Build a trip AB Remove a trip ACQuit Paradise Travel ADView a trip AE Edit a trip Type your choice of option by typing the letters of the option

25. Specific Menu Types – Layered, Context Dependent  One menu type is to present multiple layers of the menu at once. The lower levels are dependent on what has been selected at the highest level.  The menu options may be presented horizontally or vertically.  An example of this kind of choice would be the Lotus-style menus of Lotus 1-2-3 for DOS

26. Example Lotus Type Menus Files Records Utilities Open Save Rename Exit Files Records Utilities Backup Restore

27. Example Menu Type – Pop Up  Pop-up menus are closed until activated by user and then typically stay on screen until explicitly closed.  May be more efficient for frequently used menus because the user “pops” the menu up in place.

28. Sample from Open Look x Workspace Programs x Utilities x Properties… Help … Desktop Intro.. Exit …

29. Menu Types - Walking or cascading  Similar to layered context dependent menus in the sense that making a menu selection brings up another menu. Choice A Choice B …. Choice A Option 1 Option 2 Option X Option Z Option X Option X.1 Option X.2 …

30. More Menu Types - Pull Down  Example pull down  This is the “apple” menu

31. Menu Types - Additional  Iconic menu  Check boxes (multiple options)

32. Menu Types - Pie Menus  /)  "Pie menus are a naturally efficient user-interface technique -- directional selection of pie slice-shaped targets. The cursor starts out in the inactive center region of a pie, and all target slices are large, nearby, and in different directions. Pie menus are quite easy for new users. You simple follow the pop-up directions to use them. They are also extremely efficient for experienced users. Once you know the directions, you can quickly and reliably 'mouse ahead' without looking. Fitts' Law explains the pie menu advantage -- their fast selection speed and low error rate is due to their large target size and the small distance between each item.” (ref, Welcome to Pie Menu Central By Don Hopkins http://www.piemenu.com /)

33. Sample Pie Menus

34. Function keys  A function key is similar to a menu option, except that selection is done by typing a key.  Most general interaction libraries provide simple functions for defining and displaying function key settings.

35. Summary  Summary  Menu parameter handout  Review problem  Case Study  Brain Surgeon