Details of Interaction Styles Dr.s Barnes and Leventhal

Details of Interaction StylesDetails of Interaction Styles

Dr.s Barnes and LeventhalDr.s Barnes and Leventhal

Reference/ReadingReference/Reading

Chapter 8Chapter 8

ReminderReminder

Usability is an outcome of the interaction of situational variables (task Usability is an outcome of the interaction of situational variables (task and user characteristics) and characteristics of the user interface.and user characteristics) and characteristics of the user interface.

We can design the user interface but we are GIVEN the situation.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 So it makes sense that to improve your chances of good usability, you

should select an interaction style that is APPROPRIATE for the should select an interaction style that is APPROPRIATE for the situation.situation.

Not every interaction style or combination is appropriate for every Not every interaction style or combination is appropriate for every situation.situation.

The commercial success of MS Windows may lead us to believe that 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 there is a “one-size fits all” solution for every situation, but in fact that is not true.is not true.

Structure of PresentationsStructure of Presentations

For each interaction style presented in Chapter 8, For each interaction style presented in Chapter 8, the following information is presented (more or the following information is presented (more or less)less) Definition and description of the interaction styleDefinition and description of the interaction style Situations in which the interaction style is most likely Situations in which the interaction style is most likely

appropriate.appropriate. Design decisions and guidelines for this interaction Design decisions and guidelines for this interaction

style.style. Overview of different options for this interaction style.Overview of different options for this interaction style. Examples.Examples.

Menu InteractionsMenu Interactions

Definition - A menu presents options or Definition - A menu presents options or choices explicitlychoices explicitly

Consists of: Consists of: a series of options. a series of options. an id, a title, help text, and an id, a title, help text, and

Summary of Situations Which May Call for MenusSummary of Situations Which May Call for Menus

Situations:Situations: TaskTask

Tasks which are tightly structuredTasks which are tightly structured

UsersUsers NovicesNovices

Menu Advantages for NovicesMenu Advantages for Novices

Menus appear to have advantages for Menus appear to have advantages for novice users:novice users: They can provide tightly-structured tasks They can provide tightly-structured tasks

which can help the user build a conceptual which can help the user build a conceptual model of the task.model of the task.

Using a menu is a Using a menu is a RecognitionRecognition task. task. All alternatives are presented.All alternatives are presented. Can reduce the user’s cognitive workloadCan reduce the user’s cognitive workload

Design Choices for Menus (1)Design Choices for Menus (1)

Choices in for an individual menuChoices in for an individual menu Type of menu (e.g. Pull down or Pop up)Type of menu (e.g. Pull down or Pop up)

There are many choices of menu types because there There are many choices of menu types because there are many ways to explicitly present a set of options.are many ways to explicitly present a set of options.

At the end of this unit we will visit a number of At the end of this unit we will visit a number of different styles and discuss their positives and different styles and discuss their positives and negatives.negatives.

Orientation of menusOrientation of menus Are choices laid out vertically or horizontally?Are choices laid out vertically or horizontally?


Navigational Structure of MenuNavigational Structure of Menu Linear sequence of menus. User sees same sequence Linear sequence of menus. User sees same sequence

of menus no matter what. Eg. collecting responses of menus no matter what. Eg. collecting responses or data on line.or data on line.

Tree-structured menus. User traverses a hierarchical Tree-structured menus. User traverses a hierarchical menu structure. At each menu, user decisions guide menu structure. At each menu, user decisions guide the next menu shown.the next menu shown.

Menu networks - User traverses network menu Menu networks - User traverses network menu structure. Unlike tree structure, user can move up-structure. Unlike tree structure, user can move up-down, right-left...down, right-left...


How does the user access the menu from the screen? How does the user access the menu from the screen? Is the menu structure always visible or is it embedded Is the menu structure always visible or is it embedded

into the presentation. For example, in embedded into the presentation. For example, in embedded networks. Select alternatives from text item which networks. Select alternatives from text item which activates menu. (ie. Hypertext or pop-up menu). activates menu. (ie. Hypertext or pop-up menu). Alternatively a menu bar is always present and visible.Alternatively a menu bar is always present and visible.

How does the user physically access menuHow does the user physically access menu Touchscreens, mouse, lightpens, function keys, key Touchscreens, mouse, lightpens, function keys, key

press...press...


Menu architectureMenu architecture Breadth vs. depth tradeoffs. Breadth vs. depth tradeoffs. How many items to put into one menu vs. how How many items to put into one menu vs. how

many menus.many menus. Many short menus vs. fewer long menusMany short menus vs. fewer long menus Some research suggests that a menu with about 4-8 Some research suggests that a menu with about 4-8

items is superior to a menu with few or lots of items.items is superior to a menu with few or lots of items.

Limited depth seems to lead to higher Limited depth seems to lead to higher performance and satisfaction levelsperformance and satisfaction levels


Content and structure of categories (what to Content and structure of categories (what to group together)group together) Should not be arbitraryShould not be arbitrary Categories should not overlapCategories should not overlap Categories should not contain extraneous Categories should not contain extraneous

items.items.


Ordering of items within a single menuOrdering of items within a single menu When possible use a natural or temporal When possible use a natural or temporal

ordering.ordering. Other orders - alphabetical or frequency-based.Other orders - alphabetical or frequency-based.

Menu titles, phrasing of items, graphical Menu titles, phrasing of items, graphical layouts should strive for clarity.layouts should strive for clarity.

Guidelines for Menu Design (1)Guidelines for Menu Design (1)

Support Good Task MatchSupport Good Task Match The menu structure should follow the semantic The menu structure should follow the semantic

organization of the task: linear, hierarchical or organization of the task: linear, hierarchical or network (ref, Shneiderman, 1982, Table 3.1)network (ref, Shneiderman, 1982, Table 3.1)

Match menu structure to task structure (ref, Match menu structure to task structure (ref, Mayhew, 1999)Mayhew, 1999)

Menu categories should be distinctive and should Menu categories should be distinctive and should reflect the task (ref, Shneiderman, 1982, Table 3.1)reflect the task (ref, Shneiderman, 1982, Table 3.1)


The menu architecture should support Wayfinding The menu architecture should support Wayfinding and Menu Navigationand Menu Navigation

Allow users to navigate menus in a consistent way (ref, Allow users to navigate menus in a consistent way (ref, Mayhew, 1999)Mayhew, 1999)

Allow the user to move back to previous menus and to return Allow the user to move back to previous menus and to return to the main menu or home base (ref, Shneiderman, 1982, to the main menu or home base (ref, Shneiderman, 1982, Table 3.1, Instone, Mynatt, Leventhal, 1992)Table 3.1, Instone, Mynatt, Leventhal, 1992)

Provide navigational information on each screen. The user Provide navigational information on each screen. The user should know how to move between menus (ref, Shneiderman, should know how to move between menus (ref, Shneiderman, 1982, Table 3.1)1982, Table 3.1)

User should know where they are in the menu structure at all User should know where they are in the menu structure at all times (ref. Shneiderman, 1982, Table 3.1, Instone, Mynatt, times (ref. Shneiderman, 1982, Table 3.1, Instone, Mynatt, Leventhal, 1992)Leventhal, 1992)


Selection Method (selecting an option)Selection Method (selecting an option) Choices include keyboard characters, cursors, and Choices include keyboard characters, cursors, and

pointing devices (ref. Shneiderman, 1982)pointing devices (ref. Shneiderman, 1982) Provide selection defaults when possible (ref. Mayhew, Provide selection defaults when possible (ref. Mayhew,

1999)1999) Provide feedback for selections (ref. Mayhew, 1999)Provide feedback for selections (ref. Mayhew, 1999) Selection method should support both speed and Selection method should support both speed and

accuracy, so the “right” answer for selection method accuracy, so the “right” answer for selection method may vary based on the number of items in the menu. may vary based on the number of items in the menu. For long menus, use of letter codes may be better than For long menus, use of letter codes may be better than use of a pointing device (ref., Mayhew, 1999)use of a pointing device (ref., Mayhew, 1999)


Ordering and presentation of menu optionsOrdering and presentation of menu options In menu, items should be logically organized (ref. In menu, items should be logically organized (ref.

Shneiderman, Table 3.1) . Possibilities include Shneiderman, Table 3.1) . Possibilities include alphabetical, frequency of choice, sequencing within alphabetical, frequency of choice, sequencing within the task or the conventions of the task (ref. Mayhew, the task or the conventions of the task (ref. Mayhew, 1999)1999)

Support shortcuts for frequent or expert users (ref. Support shortcuts for frequent or expert users (ref. Shneiderman, 1982)Shneiderman, 1982)


Selection of menu typeSelection of menu type May be limited by guidelines for platformMay be limited by guidelines for platform If there is plenty of screen real estate, consider permanent If there is plenty of screen real estate, consider permanent

menus. High frequency use may call for pop-up or user menus. High frequency use may call for pop-up or user invoked menus (ref. Mayhew, 1999) invoked menus (ref. Mayhew, 1999)

Less commonly used menu types may be appropriate in Less commonly used menu types may be appropriate in some situationssome situations Pie menus may be fast for situations with few optionsPie menus may be fast for situations with few options Command based (user types a letter or number for selection) may Command based (user types a letter or number for selection) may

be appropriate for long lists of options or with 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)

Examples of Improving Menu DesignExamples of Improving Menu Design

Barbee's Music example In-class exercise

Book 8.2.11 In-class exercise - find the errors and correct 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.

Sample SolutionsSample Solutions

PARADISE TRAVEL

Trip Portfolio Options

AA Build a tripAB Remove a tripACQuit Paradise TravelADView a tripAE Edit a trip

Type your choice of option by typing the letters of the option

PARADISE TRAVELTrip Portfolio Management

B Build EEdit tripDEdit destination VView R Delete

QQuit Paradise Travel

Worksheet for Your AnswerWorksheet for Your Answer

Characteristic of Tong's Menu

Characteristic of Melvin's Menu

Relevant guideline

Characteristic of Tong's Menu

Characteristic of Melvin's Menu

Relevant guideline

AE Edit a trip

E Edit tripD Edit 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 tripAB Remove a tripAC Quit Paradise TravelAD View a tripAE 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.

Specific Menu Types – Full ScreenSpecific Menu Types – Full Screen

PARADISE TRAVEL

Trip Portfolio Options

AA Build a tripAB Remove a tripACQuit Paradise TravelADView a tripAE Edit a trip

Type your choice of option by typing the letters of the option

Specific Menu Types – Layered, Context DependentSpecific Menu Types – Layered, Context Dependent

One menu type is to present multiple layers of the One menu type is to present multiple layers of the menu at once. The lower levels are dependent on menu at once. The lower levels are dependent on what has been selected at the highest level.what has been selected at the highest level.

The menu options may be presented horizontally The menu options may be presented horizontally or vertically.or vertically.

An example of this kind of choice would be the An example of this kind of choice would be the Lotus-style menus of Lotus 1-2-3 for DOSLotus-style menus of Lotus 1-2-3 for DOS

Example Lotus Type MenusExample Lotus Type Menus

Files Files Records Utilities Records UtilitiesOpen Save Rename Exit Open Save Rename Exit

Files Records Files Records UtilitiesUtilitiesBackup Restore Backup Restore

Example Menu Type – Pop UpExample Menu Type – Pop Up

Pop-up menus are closed until activated by Pop-up menus are closed until activated by user and then typically stay on screen until user and then typically stay on screen until explicitly closed.explicitly closed.

May be more efficient for frequently used May be more efficient for frequently used menus because the user “pops” the menu up menus because the user “pops” the menu up in place.in place.

Sample from Open LookSample from Open Look

x x WorkspaceWorkspacePrograms xPrograms xUtilities xUtilities xProperties…Properties…

Help …Help …Desktop Intro.. Desktop Intro..

Exit …Exit …

Menu Types - Walking or cascadingMenu Types - Walking or cascading

Similar to layered context dependent menus Similar to layered context dependent menus in the sense that making a menu selection in the sense that making a menu selection brings up another menu.brings up another menu.

Choice A Choice B ….Choice A Choice B ….Choice AChoice AOption 1 Option 1 Option 2Option 2

Option XOption X

Option ZOption Z

Option XOption XOption X.1Option X.1Option X.2Option X.2……

More Menu Types - Pull DownMore Menu Types - Pull Down

Example pull downExample pull down This is the “apple” menuThis is the “apple” menu

Menu Types - AdditionalMenu Types - Additional

Iconic menuIconic menu Check boxes (multiple options)Check boxes (multiple options)

Menu Types - Pie MenusMenu 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/)/)

Sample Pie MenusSample Pie Menus

Function keys Function keys

A function key is similar to a menu option, A function key is similar to a menu option, except that selection is done by typing a except that selection is done by typing a key.key.

Most general interaction libraries provide Most general interaction libraries provide simple functions for defining and displaying simple functions for defining and displaying function key settings.function key settings.

SummarySummary

SummarySummary Menu parameter handoutMenu parameter handout

Review problemReview problem Case Study Case Study

Brain SurgeonBrain Surgeon

Documents

Details of Interaction Styles Dr.s Barnes and Leventhal