Professional Documents
Culture Documents
Overview
§ These days, some of the most important non-
functional requirements have to do with
usability.
§ How easy is it for people to use, learn to use, recall
how to use the system?
§ Human-Computer Interaction (HCI) deals with
these issues, including modes of operation,
usage styles, and human factors.
1
Objectives
§ Here is what you should be able to do upon
completion of this module:
§ Identify Usability and User Experience goals.
§ Apply usability rules and guidelines for designing
human-computer interaction.
§ Discuss the advantages and disadvantages and
design considerations of four types of user interaction
mechanism: menus, form fill-in, command language,
and direct manipulation.
Outline
§ Usability goals.
§ Eight golden rules of HCI.
§ HCI mechanisms.
§ Error message guidelines.
§ General HCI principles.
§ HCI design checklist.
2
Usability Goals
§ Effectiveness.
§ Efficiency.
§ Safety.
§ Utility.
§ Learnability.
§ Memorability.
5 Preece, Rogers & Sharp, Interaction Design , John Wiley and Sons, 2002.
6 Preece, Rogers & Sharp, Interaction Design , John Wiley and Sons, 2002.
3
Eight Golden Rules of HCI (1)
1. Consistency terminology in:
§ Command formats.
§ Screen layout.
2. Shortcuts for frequent users:
§ Abbreviations.
§ Macro facilities.
3. Informative feedback or every operator action.
4. Closure:
§ Organize sequences of actions into groups with a
beginning, middle and end, with informative
feedback at the end.
7
4
Human-computer Interfaces
§ Menu selection.
§ Form fill-in.
§ Command language.
§ Direct manipulation.
Shneiderman, Ben, Designing the User Interface, Strategies for Effective Human-Computer Interaction 3rd Edition , Addison-Wesley, Reading, MA, 1998.
Menu Selection
§ Advantages: § Disadvantages:
§ Shortens learning. § Danger of many
§ Reduces keystrokes. menus.
§ Structures decision- § May slow frequent
making. users.
§ Permits use of dialog § Consumes screen
management tools. space.
§ Easy to support error § Requires rapid display
handling. rate.
10
5
Menu Selection Guidelines (1)
§ Use task semantics to organize.
§ Give position in organization by graphic design,
numbering, and titles.
§ Make meaningful groupings and sequences of
items in a menu.
§ Items should be brief and consistent.
§ Permit short-cuts for experienced users.
11
12
6
Phrasing of Menu Items
§ Use familiar and consistent terminology.
§ Ensure that items are distinct from one another.
§ Use consistent and concise phrasing.
§ Bring the keyword to the left.
13
14
7
Selection Mechanisms
§ Numbered items: § User shortcuts:
§ Use when there is a § Type-ahead.
numerical sequence to § Macros.
the choices. § Item selection:
§ Lettered items: § Select by use of arrow
§ User must be familiar keys or mouse.
with keyboard. § Selected item is
highlighted.
§ Mnemonic letters:
§ Press RETURN key or
§ Must have unique first mouse button to
letters on selections. activate.
15
Form Fill-in
§ Advantages:
§ Simplifies data entry.
§ Requires modest training.
§ Assistance is convenient.
§ Permits use of form management tools.
§ Disadvantages:
§ Consumes screen space.
16
8
Form Fill-in Guidelines (1 of 2)
§ Meaningful title.
§ Comprehensible instructions:
§ Use familiar terminology.
§ Be brief.
§ Logical grouping and sequencing of fields:
§ Alignment.
§ Blocking.
§ Visually appealing layout of the form.
§ Familiar field labels.
17
18
9
Command Languages
§ Advantages:
§ Flexibility.
§ Appeals to ‘‘power users.’’
§ Supports user initiative.
§ Convenient for creating user-defined macros.
§ Disadvantages:
§ Poor error handling.
§ Requires substantial training and memorization.
§ Harder to automate with tools.
19
Direct Manipulation
§ Advantages: § Disadvantages:
§ Visually presents task § May be hard to
concepts. program.
§ Easy to learn. § May require graphics
§ Easy to retain. display and pointing
§ Errors can be avoided. devices.
§ Encourages
exploration.
§ High subjective
satisfaction.
20
10
Error Message Guidelines
§ Be specific. § User-centered phrasing.
§ Tell user what the problem § User should have the
was. feeling that he is
§ Provide constructive guidance. controlling the session, not
the computer.
§ Give user advice about how
to fix problem. § Use consistent visual format
§ Be positive. and placement.
§ Rather than condemning. § Use consistent grammatical
form, terminology, and
§ Avoid words such as
abbreviations.
ILLEGAL, ERROR, INVALID,
or BAD. § Consider multiple levels of
messages.
21
11
HCI Design Checklist (1 of 3)
§ Simple and natural dialogue.
§ No irrelevant information.
§ Natural and logical sequence.
§ Speak the user’s language.
§ Rather than system-oriented terms.
§ Minimize the user’s memory load.
§ From one part of the dialogue to another.
§ Provide context clues, help facilities.
23 Molich, Rolf, and Jakob Nielsen, "Improving a Human -Computer Dialogue,“ Communications of the ACM, Vol. 33, No. 3, March, 1990.
24
12
HCI Design Checklist (3 of 3)
§ Provide shortcuts for experienced users.
§ Provide good error messages:
§ Defensive (non-criticizing).
§ Precise.
§ Constructive.
§ Error prevention:
§ Don’t put user in situation where an error can be
made.
25
References
§ Molich, Rolf, and Jakob Nielsen, "Improving a Human-
Computer Dialogue,“ Communications of the ACM, Vol.
33, No. 3, March, 1990.
§ Shneiderman, Ben, Designing the User Interface,
Strategies for Effective Human-Computer Interaction 3rd
Edition, Addison-Wesley, Reading, MA, 1998.
§ Microsoft, The Windows Interface Guidelines for
Software Design, Microsoft Press, Redmond, WA, 1995.
§ Sun Microsystems, Java Look and Feel Design
Guidelines, Addison-Wesley, 1999. (also available in html
format at http://java.sun.com/products/jlf/dg/index.htm
26
13