What is HCI and why should welearn about it?

1. A few incidents....

2. Consequences of bad user interfaces

3. How can user interface designers determine whether auser interface will cause problems for users?

4. What is HCI?

Why learn about HCI

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/why-learn-about-HCI.htm [1/23/2001 10:16:56 PM]

A few incidents involving badlydesigned user interfaces

• A professor loses half an hour

• A professor and three staff lose two hours

• Errors are made in presidential elections

• An airliner gets shot down

• A nuclear power plant gets out of control

• ICS 205 students ...

Untitled Document

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/incidents.htm [1/23/2001 10:16:57 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/nsf-old.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/nsf-old.jpg [1/23/2001 10:17:00 PM]

How can this problem beprevented?

flawed-error-msg.htm

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/flawed-error-msg.htm [1/23/2001 10:17:01 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/large.ballot.ap.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/large.ballot.ap.jpg [1/23/2001 10:17:02 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/vincennes.gif

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/vincennes.gif [1/23/2001 10:17:04 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/threemle.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/threemle.jpg [1/23/2001 10:17:05 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy.jpg [1/23/2001 10:17:05 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy-start.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy-start.jpg [1/23/2001 10:17:06 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy-login.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy-login.jpg [1/23/2001 10:17:07 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy-keyboard.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/photocopy-keyboard.jpg [1/23/2001 10:17:08 PM]

Consequences of bad userinterfaces

Bad interfaces may cause users to

• need more time for performing their tasks• make more errors• feel dissatisfied• need more time for learning how to use thesoftware• not learn/use the full functionality of the software• (if given a choice:) refrain from using the software

Characteristics of bad interfaces

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/bad-ifs.htm (1 of 2) [1/23/2001 10:17:08 PM]

Good interface design therefore is important for any kindof interactive software, and of utmost importance in

• systems with high costs of failure (e.g., nuclearpower plants)• systems with high demands on operators (e.g.,rescue coordination centers, combat aircraft, callcenters)• mission-critical systems (e.g., space missioncontrol)

Characteristics of bad interfaces

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/bad-ifs.htm (2 of 2) [1/23/2001 10:17:08 PM]

How can user interface designers determine whethera user interface (element) will cause problems forusers?

1. Analyze the interface using "common sense" (?) Intuitions can reveal some obvious omissions, confusing andinefficient interaction. Many flaws however are not "intuitively" recognizable, even withexperience in user interface design.

2. Develop a theory of "human cognitive processing",and use it to predict problems that users will havewith the interface Was only successfull in limited areas so far.

find-problems.htm

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/find-problems.htm (1 of 2) [1/23/2001 10:17:08 PM]

3. Test the interface with users, and watch whetherproblems can be observed or are reported by users Tests with 5-8 users already reveal major problems

Generalize the findings from (3) and develop guidelines of whatshould not be done + "Usability Engineering"

How can user interface designers determine whether auser interface (element) will not cause problems forusers?

find-problems.htm

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/find-problems.htm (2 of 2) [1/23/2001 10:17:08 PM]

What is Aim of Human-ComputerInteraction?

Narrow definition:

The field of Human-Computer Interaction investigateshow (single) users can best interact with computers.Particular emphasis is put on

software aspects (as opposed to the input and outputdevices and the physical workplace), and

●

Aim of Human-Computer Interaction

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/whatishci.htm (1 of 3) [1/23/2001 10:17:09 PM]

specifically on the layout and operation of the interface("User Interface Design", "Interface Engineering").

●

Broad definition:

The field of Human-Computer Interaction studies "thepeople side" in the interaction with computers, including

users´ mental processes when interacting withcomputers

●

work practices●

training issues●

Aim of Human-Computer Interaction

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/whatishci.htm (2 of 3) [1/23/2001 10:17:09 PM]

management of computerized work processes●

collaboration in computerized workgroups●

social/organizational aspects●

health issues●

+ This course focusses on user interface design issues,due to their importance and the availability of other ICScourses that focus on other aspects of HCI.

Aim of Human-Computer Interaction

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/whatishci.htm (3 of 3) [1/23/2001 10:17:09 PM]

Elements of HCI

1. What are user interfaces?

2. Users are different

3. Factors in HCI

4. Levels of analysis

5. Measurable human factors

6. Disciplines contributing to HCI

7. Integration of usability testing into the software development process

Elements of HCI

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/elements-of-HCI.htm (1 of 2) [1/23/2001 10:17:10 PM]

8. Affordances

Elements of HCI

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/elements-of-HCI.htm (2 of 2) [1/23/2001 10:17:10 PM]

What are user interfaces?

User interfaces help users interact with programs.Users employ programs for performing their tasks.

+ User interfaces help users interact with their tasks.

+ A user interface should not reflect the structure of theunderlying program, but the structure of the task domainand/or the task solution process. Users should notinteract with the computer, but with their tasks.

What are interfaces

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/what-are-ifs.htm [1/23/2001 10:17:11 PM]

Users are different

Physical work environments●

Tasks●

Cognitive and perceptual abilities●

Personality differences●

Cultural differences●

Disabilities●

Age●

Users are different

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/users-are-diff.htm [1/23/2001 10:17:11 PM]

Factors in HCIFactors in HCI

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/factors-in-hci.htm (1 of 2) [1/23/2001 10:17:13 PM]

(from Preece et al. 1994, p. 31)

Factors in HCI

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/factors-in-hci.htm (2 of 2) [1/23/2001 10:17:13 PM]

Levels of Analysis in HCI

Untitled Document

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/levels-of-analysis.htm (1 of 2) [1/23/2001 10:17:15 PM]

Untitled Document

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/levels-of-analysis.htm (2 of 2) [1/23/2001 10:17:15 PM]

Central measurable human factorsfor user interface evaluation

Speed of performanceHow long does it take to carry out the benchmark tasks?

●

Error/success rateHow many and what kind of errors do people make in carrying outthe benchmark tasks? How many tasks were successfullycompleted?

●

Time to learnHow long does it take for users to learn what actions are required toachieve the benchmark tasks?

●

5humanfactors.html

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/measurable-factors.htm (1 of 2) [1/23/2001 10:17:15 PM]

Retention over timeHow well do users maintain their knowledge and skills over givenperiods of time?

●

Subjective satisfactionHow much did users like using verious aspects of the system?

●

5humanfactors.html

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/measurable-factors.htm (2 of 2) [1/23/2001 10:17:15 PM]

Disciplines contributing to HCI

Other contributing disciplines:

Artificial intelligence●

contr-disciplines.htm

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/contr-disciplines.htm (1 of 2) [1/23/2001 10:17:16 PM]

Linguistics●

Ethnology●

contr-disciplines.htm

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/contr-disciplines.htm (2 of 2) [1/23/2001 10:17:16 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/waterfall.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/waterfall.jpg [1/23/2001 10:17:17 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/star-lifecycle.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/star-lifecycle.jpg [1/23/2001 10:17:18 PM]

Affordances"term that refers to the properties of objects -- what sorts of operationsand manipulations can be done to a particular object" (D. A. Norman1988, The Psychology of everyday things).

A door affords opening●

A chair affords support●

"perceived affordance": the extent to which objectssuggest their affordance.

Affordances

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/affordance.htm (1 of 2) [1/23/2001 10:17:19 PM]

Affordances

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/affordance.htm (2 of 2) [1/23/2001 10:17:19 PM]

Cognitive Elements of HCI

1. Gestalt laws

2. Graphical coding

3. Recognition versus recall

4. Mental models

5. Metaphors

6. Affordances

7. Fitts' law (see menu interaction)

8. Color vision (see color)

Cognitive Elements of HCI

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/cognitive-elements.htm [1/23/2001 10:17:20 PM]

Gestalt Laws

Gestalt laws describe regularities of human perception (but do notexplain them!)

Proximity: objects that are close to each other tend to be seen as agroup

Similarity: objects of the same shape or color are seen as belongingtogether

Closure: Missing parts of an object are filled in to complete it, so that itappears as a whole.

Continuity: lines tend to be seen as continuous, even if they areinterrupted

Symmetry: regions bounded by symmetrical borders tend to beperceived as coherent figures

Untitled Document

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/gestalt-laws.htm [1/23/2001 10:17:20 PM]

Example for the Application of Gestalt Laws

Please answer the following questions based solely on Gestalt laws, theupper-case words in the leftmost box and the proper names in thepicture.

How many ballots are there?1.

Can George Bush and Art Olivier together be elected for presidentand vice president?

2.

Name all people who can be elected for president and vice president.3.

Untitled Document

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/gestalt-ballot.htm (1 of 2) [1/23/2001 10:17:21 PM]

Untitled Document

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/gestalt-ballot.htm (2 of 2) [1/23/2001 10:17:21 PM]

Comparison of coding methods (Maguire, 1987)

Coding methodMaximumnumber ofcodes

Comments

Alphanumerics UnlimitedHighly versatile. Meaning can be self-evident. Location time may be longerthan for graphic code.

Shapes 10-20 Very effective if code matches object or operation represented

Color 4-11Attractive and efficient. Excessive use confusing. Limited value for thecolor-blind.

Line angle 8-11 Good in special cases, for example, wind direction.Line length 3-4 Good. Can clutter display if many codes displayed.Line width 2-3 GoodLine style 5-9 Good

Object size 3-5Fair. Can take up considerable space. Location time longer than for shapeand color

Brightness 2-4 Can be fatiguing, especially if screen contrast is poor

Blink 2-4Good for getting attention but should be suppressible afterwards. Annoying ifoverused. Limit to small fields.

Reverse video No dataEffective for making data stand out. If large area is in reverse video, flicker ismore easily perceived.

Underlining No data Useful but can reduce text legibility.Combination ofcodes

Unlimited Can reinforce coding but complex combinations can be confusing

Comparison of coding methods

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/coding-methods.htm [1/23/2001 10:17:22 PM]

Mental models

Mental models are representations of the function and/or structure ofobjects in peoples' minds.

may be incorrect or incomplete●

can be "executed"●

are analogical representations, or a combination of analogical andpropositional representations

●

are dynamically constructed when required●

Two main types:

Functional models (good for everyday use)●

Structural models (good for breakdown situations; difficult to acquirefrom usage experience only)

●

* Computer systems should be designed in such a way that users canquickly acquire a good functional model of the system which is inaccordance with their task model.

Mental models

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/mental-model.htm [1/23/2001 10:17:22 PM]

Important interaction metaphors

Metaphors constitute the user's initial mental model of thesystem's structure and operation. They should relate to users' pastexperiences and should be consistent.

(Typewriter metaphor): Evoked easily due to physicalsimilarities. Should be avoided

●

Desktop metaphor: Currently the predominant metaphor.●

Book metaphor: For hypertext, hypertext-like onlinedocumentation.

●

Filing cabinets: For online documentation, system settings.●

Important interaction metaphors

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/metaphors.htm (1 of 2) [1/23/2001 10:17:23 PM]

Office metaphor: For collections of documents●

Library metaphor: For large collections of documents●

Building metaphors, city metaphors, etc.: for virtual worlds●

Composite metaphorsCombine 2 or more metaphors (like office, file cabinet and desktop)

●

The learning and retention of a system's functionality is considerablyfacilitated by meaningful and consistent metaphors.

Important interaction metaphors

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/metaphors.htm (2 of 2) [1/23/2001 10:17:23 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/bookmetaphor.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/bookmetaphor.jpg [1/23/2001 10:17:24 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/filing-cabinet.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/filing-cabinet.jpg [1/23/2001 10:17:25 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/virtual-environment.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/virtual-environment.jpg (1 of 2) [1/23/2001 10:17:29 PM]

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/virtual-environment.jpg

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/virtual-environment.jpg (2 of 2) [1/23/2001 10:17:29 PM]

City metaphorCity metaphor

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/city-metaphor.htm [1/23/2001 10:17:30 PM]

Input and Output Devices

1. Output devices

2. Input devices

3. Requirements for input and output devices

Input and Output Devices

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/input-output-devices.htm [1/23/2001 10:17:30 PM]

Output devices

Desk-bound displays (CRT, LCD, Plasma)●

Portable displays●

Displays in helmets , eye glasses , projections onto retina●

Wall-mounted displays (projections ), whiteboards●

Speech Audio●

Non-Speech Audio●

Force output ●

Special output devices for people with disabilities(Braille display , speech, etc.)

●

Output devices

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/output-devices.htm (1 of 2) [1/23/2001 10:17:31 PM]

+ Cater to variety of possible output devices

Output devices

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/output-devices.htm (2 of 2) [1/23/2001 10:17:31 PM]

Input devices

Keyboards (QUERTY, Dvorak , chord , numeric)●

Cursor keys●

mouse (1-3 keys)●

trackballs, trackpads, joystick, 3D-mouse●

Touch screens●

Speech input●

"Graffiti", handwriting, gestures●

Data gloves , data suits, 3D trackers●

Gaze●

Input devices

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/input-devices.htm (1 of 2) [1/23/2001 10:17:32 PM]

Special input devices for people with disabilities(e.g., foot mouse, head mouse , lip readers, etc.)

●

+Cater to variety

Input devices

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/input-devices.htm (2 of 2) [1/23/2001 10:17:32 PM]

Requirements for I/O Devices

Must match the physiological and psychological characteristics ofusers, their training and their expertise(consider age, impairments, and computer skills)

●

Must be appropriate for the user's tasks●

Must be suitable for the intended work environment.●

Requirements for I/O Devices

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/input-output-requirements.htm [1/23/2001 10:17:33 PM]

Interaction Styles and HCIGuidelines

1. Interaction Styles

2. Interaction style independent design principles

3. Command interfaces

4. Menu-based interfaces

5. Direct-manipulative interaction

Overview of Interaction Styles

http://www.ics.uci.edu/~kobsa/courses/ICS205/course-notes/1stlevelheaders/interaction-styles.htm [1/23/2001 10:17:33 PM]