Human-Computer Interaction

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.

User Experience Goals

§ Satisfying.
§ Enjoyable.
§ Fun.
§ Entertaining.
§ Helpful.
§ Motivating.
§ Aesthetically pleasing.
§ Supportive of creativity.
§ Rewarding.
§ Emotionally fulfilling.

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

Eight Golden Rules of HCI (2)

5. Error handling:
§ Design to avoid user errors.
§ Detect errors.
§ Offer help as to cause of error.
§ Make correction simple.
6. Reversal of actions – provide ‘‘undo’’
functions.
7. Make users the initiators of actions, rather
than responders.
8. Reduction of short term memory load:
§ 7 plus-or-minus 2 chunks.
8 § Keep it simple.

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

Menu Selection Guidelines (2)

§ Permit jumps to previous menu, and back to the
main menu.
§ Use consistent layout and terminology.
§ Consider selection mechanisms and devices.
§ Consider response time and display rate.
§ Consider screen size.
§ Offer help facilities.

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

Menu Layout Guidelines

§ Titles: § Instructions:
§ Centered. § Identical in each
§ Left justified (for slow menu.
displays). § Same position in each
§ Case (upper or mixed). menu.
§ Font. § Error messages.
§ Item placement. § Consistent position.
§ Status reports.
§ Consistent position.

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

Form Fill-in Guidelines (2 of 2)

§ Consistent terminology and abbreviations.
§ Visible space and boundaries for data entry
fields:
§ Underscores.
§ Convenient cursor movement:
§ TAB key.
§ Arrow keys.
§ User error correction and editing.
§ Explanatory messages for fields.

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

General HCI Principles

§ Know who your user is. § Make most effective use
§ Experience level. of tools.
§ Interest. § Use appropriate
§ User requirements. interface.
§ Interface devices. § Use standard interface
§ Be considerate of the conventions.
user.
§ "User friendly"
systems are actually
"user considerate."
§ Instructions & help.
§ Messages, feedback.
22

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.

HCI Design Checklist (2 of 3)

§ Be consistent:
§ In use of words, phrases.
§ In required user actions.
§ Across subsystems.
§ Provide feedback within a reasonable time.
§ Provide clearly marked exits.
§ To cancel an action.
§ To "undo" an action.

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