Introduction to Human Computer Interaction

1. Introduction to Human Computer Interaction • Menu Selection, Form Fillin, and Dialog Boxes • http://www.youtube.com/watch?v=Dc4wPo_9xWY • Early systems used full screen menus with numbered items • Modern menus • Pull-downs, check-boxes, radio buttons, hyperlinks • Menus offer cues to elicit recognition • Do not require the user to recall commands • Users point or use keystrokes and get immediate feedback

2. Introduction to Human Computer Interaction • Menu Selection, Form Fillin, and Dialog Boxes • Simple menu selection is valuable when • Users have little training • Intermittent usage • Unfamiliar with the terminology • Assist in structuring decision making • Design also must consider • Task related organization • Phrasing of items • Sequence of items • Short-cuts • Selection mechanisms (viz., keyboard, pointing device, touch screen, voice)

3. Introduction to Human Computer Interaction • Task-Related Menu Organization • Goal: create sensible, comprehensible, memorable, and convenient organization relevant to the user’s task • Hierarchicaldecomposition • Chapters • Biological Taxonomy • Restaurant Menus • Difficulty in classifying an item as belonging to only one category • Could lead to forming a network

4. Introduction to Human Computer Interaction • Example: Music concert ticket system • Menus for types of sports (e.g., MLB Playoff, NFL football, etc.) • Menus for sports locations • Menus for dates • Search by team • Interface objects: tabs, hyperlinks, search boxes

5. Introduction to Human Computer Interaction • Menu Systems • Binary Menus • Single and Multi-Choice Binary Menus

6. Introduction to Human Computer Interaction • Menu Systems • Pull-down • Always available via a top menu bar • Items that are not available can be grayed out • Short-cuts (e.g., Ctrl-S) • Cascade

7. Introduction to Human Computer Interaction • Menu Systems • Cascade Display icons to facilitate learning Display short-cuts to facilitate learning Three dots to indicate leads to dialog box

8. Introduction to Human Computer Interaction • Menu Systems • Toolbars and palettes • Support single click action that applies to a displayed object • User controls items in the toolbar or palette • User controls location of toolbar or palette

9. Introduction to Human Computer Interaction • Menu Systems for Long Lists • List Boxes • Single vs. Multi-Select • Auto-complete • Fisheyes

10. Introduction to Human Computer Interaction • Two-dimensional menus • Provides a good overview of the choices • Reduces the number of required actions • Allows for rapid selection • Useful for web page design (minimizes scrolling – single screen overview)

11. Introduction to Human Computer Interaction • Embedded Menus and Hotlinks • Permit items to be viewed in context • Keeps users focused on the task and objects of interest The University of Delaware (UD) is the largest university in the U.S. state of Delaware. The main campus is located in Newark, with satellite campuses in Dover, Wilmington, Lewes and Georgetown. It is medium-sized — approximately 16,000 undergraduate and 3,000 graduate students. Although UD receives public funding for being a land-grant, sea-grant, space-grant and urban-grant state-supported research institution, it is also privately chartered.[1] At present, the school's endowment is valued at about $1.3975 billion US. The University of Delaware is ranked 71st by US News in the category of nationwide "Top Schools." [4] In 2008, UD was ranked No. 20 in the in-state category of Kiplinger's Personal Finance magazine's list of the 100 Best Values in Public Colleges.[2] The school from which the university grew was founded in 1743, making it one of the oldest in the nation. However, the University of Delaware was not chartered as an institution of higher learning until 1833. Its original class of 10 students included George Read, Thomas McKean, and James Smith, all three of whom would go on to sign the Declaration of Independence. The school has, among others, engineering, science, business, education, urban affairs and public policy, public administration and agriculture programs, as well as programs in history, chemical engineering, chemistry and biochemistry, drawing as it does from the historically strong presence of the nation's chemical and pharmaceutical industries in the state of Delaware. In 2006, UD's engineering program was ranked number 10 in the nation by The Princeton Review. It is one of only four schools in North America with a major in art conservation.

12. Introduction to Human Computer Interaction • Menu Systems Linear Sequence Single Menu Acyclic Network Cyclic Network

13. Introduction to Human Computer Interaction • Acyclic and Cyclic Menu Networks • Mental model of the structure and of relationships between menus • Lack a single parent menu • Backward traversals toward the main menu may not map to a single parent Acyclic Network Cyclic Network

14. Introduction to Human Computer Interaction • Linear Menu Sequence (e.g., wizards) Linear Sequence

15. Introduction to Human Computer Interaction • Simultaneous Menus • Multiple active menus on the screen • Choices can be entered in any order • Require more display space • Shopping.com

16. Introduction to Human Computer Interaction • Tree-structured Menus • Dependent on the definition of categories • User familiarity improves performance • If groupings are unfamiliar, performance will suffer • Use terminology from the user’s task domain • Depth – number of levels (ideally less than 3 or 4) • Breadth – number of items per each level (ideally 4 to 8 items) • Breadth is preferred over depth Breath = 11 Depth = 2

17. Introduction to Human Computer Interaction • Content Organization • Task-related grouping in tree structures • Create groups of logically similar items • E.g., Countries = Level 1; States = Level 2; Cities = Level 3 • Form groups that cover all possibilities • E.g., Ages = 0-9, 10-19, 20-29, > 30 • Make sure items are not overlapping • E.g., “Entertainment and Event” versus “Concert and Sports” • Use familiar terminology • E.g., Day/Night versus 6am to 6pm and 6pm to 6am

18. Introduction to Human Computer Interaction • Item Presentation Sequence • Alphabetic sequence of terms • Grouping of related items • Most frequently used items first • Most important items first • Time (chronological) • Numeric ordering (ascending or descending) • Physical properties • Increasing/decreasing length, temperature, etc. • Adaptability • Automatically list most frequently selected to the top • Can be confusing • This form of adaptability is likely to have a negative impact on performance • Infrequently used items not appearing in drop-downs • Hybrid: Most frequent at top, alphabetic thereafter

19. Introduction to Human Computer Interaction • Menu Maps (also site maps)

20. Introduction to Human Computer Interaction • Menu Layout • Titles • Single menus – use a title that identifies the situation (e.g., warning) • Linear menus – titles should represent the stage in the process • Tree menus – use a meaningful term for the root (e.g., “Main Menu”)

21. Introduction to Human Computer Interaction • Menu Layout • Phrasing of menu items • Use familiar, concise terms • The first word should allow easy discrimination between items • E.g., “Size of type” versus “Set the type size” • Graphical layout and design • Consistent layouts improve: • The locating of information • Predictability • Titles (typically left justified) • Item placement (typically left justified) • Error messages (consistent location)

22. Introduction to Human Computer Interaction • Menu Layout • Font Style as an indicator of level • Indicators of stage in a linear menu Main Menu Revenue Management Denied Amounts Payer +----- ----+-