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

Hierarchical decomposition

• 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

Single Menu Linear Sequence

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 MenuRevenue Management

Denied AmountsPayer

+---------+-