Transcript Soarian™ User Interface
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
1
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)
2
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
3
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
4
Introduction to Human Computer Interaction
Menu Systems
Binary Menus
5
Single and Multi-Choice Binary Menus
Introduction to Human Computer Interaction
Menu Systems
Pull-down
6 • • •
Always available via a top menu bar Items that are not available can be grayed out Short-cuts (e.g., Ctrl-S)
Cascade
Introduction to Human Computer Interaction
Menu Systems
Cascade
7
Display icons to facilitate learning Display short-cuts to facilitate learning Three dots to indicate leads to dialog box
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
8
Introduction to Human Computer Interaction
Menu Systems for Long Lists
List Boxes
•
Single vs. Multi-Select Auto-complete Fisheyes
9
Introduction to Human Computer Interaction
10
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)
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 .
11
Introduction to Human Computer Interaction
12
Menu Systems Single Menu Linear Sequence Acyclic Network Cyclic Network
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
13
Acyclic Network Cyclic Network
Introduction to Human Computer Interaction
Linear Menu Sequence (e.g., wizards)
14
Linear Sequence
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
15
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
16 Breath = 11 Depth = 2
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
17
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
18
Introduction to Human Computer Interaction
Menu Maps (also site maps)
19
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”)
20
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)
21
Introduction to Human Computer Interaction
Menu Layout
Font Style as an indicator of level Main Menu Revenue Management
Denied Amounts Payer
Indicators of stage in a linear menu +---- ----+-
22