Human Computer Interaction

Introduction to HCI
 PART 1

Overview of Human Computer

Interaction
 What is HCI?
Stands for

COMMUNICATION

USER MACHINE
 What is HCI?
HUMAN COMPUTER INTERACTION

Single user Desktop Direct/Indirect

Groups Embedded communication
I/O channels system Models
Memory Data entry Frameworks
Reasoning devices Styles
Problem solving Output devices Ergonomics
Error Memory
Psychology Processing
What is HCI?
 Why Study HCI?
BUSINESS VIEW
To employ people more
productively and effectively
people costs now far outweigh
hardware and software costs
People now expect easy to
use systems
generally they are not tolerant
of poorly designed systems
if a product is hard to use, they
will seek other products
 Why Study HCI?
HUMAN FACTORS VIEW
Human have limitations

Errors are costly in terms of

loss of time & money
loss of lives in critical systems
loss of morale
Computer Abilities
Transistors
Speed
Cost
Moores Law
Human vs. Computer
 Definition of HCI (1)
Human-computer interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing
system for human use and with the study of
major phenomena surrounding them.

[ACM SIGCHI Curricula Human-Computer Interaction]

 Definition of HCI (2)
The study of interaction between people and
computer-based systems; concern with the
physical, psychological and theoretical aspects
of this process.

[Alan Dix et al. 2003]

Components of HCI

Analysis

Evaluation Design

Implementation
 Goal of HCI
To develop or improve the safety, utility and
effectiveness of systems that include computers,
often through improving usability
 Field of HCI
Psychology Information science
Sociology Information security
Cognitive science Speech-language
Ergonomics / Human pathology
factors Personal information
Computer science management
Visualization Phenomenology
Design
Interactive art
Meta Models of HCI
 PART 2

Evolution of Human Computer

Interaction
Computer Evolution
Human Evolution
 History of HCI

Henry Dreyfuss designed specific measurements & proportions of the human body for
specific work & environment. [Source: Book Designing for People (1955)]
 Electronic Numerical Integrator
And Computer (ENIAC)
First electronic general-purpose computer
(1946)
Compilers
 Graphical User Interface (GUI)
Ivan Sutherlands Sketchpad (1963)
 Hypertext

Ted Nelson introduced the Hypertext Editing System (HES) was an early hypertext
terms hypertext & research project conducted at Brown University in 1967
hypermedia in 1963.
 Mouse
Douglas Engelbart was an
inventor of the computer
mouse
Invented in 1960s
 Model Human
Processor
Introduced by Card,
Moran & Newell in
1983
To calculate how long
it takes to perform a
certain task using
cognitive modeling
method
Memory Extender (Memex)
[As We May Think, Vannevar Bush, 1945]

A device to store all

books, records and
communication

Mechanized to be
consulted with
exceeding speed
and flexibility

Support for full-text

search, text & audio
annotations and
hyperlinks
 Man-Computer Symbiosis
[J.C.R. Licklider, 1960]
Tightly coupled human brain & machine,
speech recognition, time sharing and
character recognition
 DynaBook
[Alan Kay, 1968]

s
 XEROX Machines

XEROX Alto (1973) XEROX Star (1981)

[1984]
Apple LISA & Mac (1984)
 An electronic musical
instrument with a
tabletop/mobile device
A multi-touch interface
for playing music
 HotHand Device

A ring worn by music players that uses motion

sensors and a wireless transmitter

To create different kinds of sound effects by

various hand gestures
Rovio Robotic Webcam
Wirelessly connected to
the internet

It roams around the

house providing an
audio and video link to
keep an eye on family/
pets when you are out
 Film Productions
Minority Report (2002) Iron Man (2008)

Avatar (2009)
 PART 3

User Interface Design

The Perfect User (every designer s wish)
 What is Interaction Design?
Designing interactive products to support the way
people communicate and interact in their everyday
and working lives
[Sharp, Rogers and Preece, 2011]

The design of spaces for human communication and

interaction
[Winograd, 1997]
 Which Kind of Design?
Number of other terms used emphasizing what is
being designed, e.g.
user interface design, software design, user-centered design, product
design, web design, experience design (UX)

Interaction design is the umbrella term covering all

of these aspects
fundamental to all disciplines, fields, and approaches concerned with
researching and designing computer-based systems for people
Field of Interaction Design
 Common Issues in User
Interface Design
Software developers are forced to do it all
Often based on intuition and experience than
on theory-based models
Tendency to let the art of interface design
beats its usability
Inconsistent features that do not fit into a
good user interface design criteria
 Importance of Interface Design
63% of large software projects go over cost
Managers gave 4 usability-related reasons
1. User requested changes
2. Overlooked tasks
3. Users did not understand their own requirements
4. Insufficient user-developer communication &
understanding
 Importance of Interface Design
Usability engineering is software engineering
Pay a little now, or pay a lot later!
Far too easy to jump into detailed design that is:
1. Incorrect requirements
2. Inappropriate flow
3. Difficult to use
4. Never tested until it is too late
 Goals of User Interface Design
Measurable factors
1. Time to learn
2. Performance speed
3. Error rate
4. Retention over time
5. Subjective satisfaction
6. Cost
 Bad Design (1)
How fast am I going?

[www.baddesigns.com]
 Bad Design (2)
How do I get out of the lift?

[www.baddesigns.com]
 Bad Design (3)
Where do you plug the mouse?

Where do you plug the

keyboard?

Top or bottom connector?

Do the color-coded icons help?

[www.baddesigns.com]
 Bad Design (3)
What is wrong with the remote
on the right?
Why is the TiVo remote so
much better designed?
Peanut shaped to fit in hand
Logical layout and color-coded,
distinctive buttons
Easy to locate buttons

[www.baddesigns.com]
Good & Bad Design
What is wrong with the remote
controller on the right?

Why is the TiVo remote so

much better designed?
Peanut shaped to fit in hand
Logical layout and color-coded,
distinctive buttons
Easy to locate buttons
 What to Design?
Need to take into account:
Who the users are
What activities are being carried out
Where the interaction is taking place

Need to optimize the interactions users have with a

product
So that they match the users activities and needs
 Core Characteristics of
Interaction Design
Users should be involved through the
development of the project
Specific usability and user experience goals
need to be identified, clearly documented
and agreed at the beginning of the project
Iteration is needed through the core
activities
 Understanding Users Needs
Need to take into account what people are
good and bad at
Consider what might help people in the way
they currently do things
Think through what might provide quality
user experiences
Listen to what people want and get them
involved
Use tried and tested user-centered methods
 Working in
Multidisciplinary Teams
Many people from different
backgrounds involved

Different perspectives
and ways of seeing
and talking about things
Benefits
more ideas and designs
generated
Disadvantages
difficult to communicate and
progress forward the designs being create
 PART 4

Theories of Human Computer

Interaction
 What is a Model?
Model = simplification of reality
Goal: to be useful!
Abstraction of reality: omit non-relevant details
Conflict between precision and generality: choose the
level of abstraction
Power of a model
Descriptive: ability to represent (aspects of) a
phenomenon
Predictive: ability to anticipate behavior
Generative : ability to imagine new solutions to a problem
 What is a Theory?
Theory = (attempt to) explain reality

Often based on a model

Validity not only of the predictions of the
model, but also of the model itself
 Levels-of-Analysis Theory (1)
4 levels of analysis:
Conceptual: describes the users mental model.
(Text Processing with Word/Latex/Page Maker)
Semantic: meanings of user actions (e.g. delete a
paragraph)
Syntactic: select paragraph with mouse, select
delete from menu
Lexical: move mouse cursor, click, press function
key, etc.
 Levels-of-Analysis Theory (2)
Advantage:
Clean top-down-approach
Good for designers

Disadvantage:
Less relevant today, as systems are
very complex
 Stages-of-Action Theory (1)
Explanatory thesis of HCI, Norman (1988)
7 Stages (executed in a cyclic way by the user):
1. Forming the goal
2. Forming the intention
3. Specifying the action
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the outcome
 Stages-of-Action Theory (2)
Norman suggests four principles of good design:
1. State and action alternatives should be visible
2. Good conceptual model with consistent system image
3. The interface should include good mapping that reveal
the relationships between the stages
4. Users should receive continuous feedback
 GOMS (1)
Decompose user actions into INPUT
[detailed description of task(s)]
small measurable steps
GOMS stands for Task
Task
3
Goals 2
Task
Operators 1
Methods
Selection rules
OUTPUT
[qualitative & quantitative measures]
 GOMS (2)

1. Goals and sub-goals

Edit text, delete paragraph
2. Operators
Move mouse, press mouse button, check if mouse cursor is at the
end of a paragraph but also: recall le name, search for menu option
3. Methods To reach the goal
Move mouse, click button, press delete to delete a paragraph
4. Selection rules Select one of many methods
Delete Paragraph with delete key, use delete menu entry, use
multiple backspace to delete paragraph
 Widget-Level Theory
Instead of decomposing along elementary tasks, use
decomposition of high-level UI toolkits
Create model based on widgets and predict user
performance based on widgets used
Interface model emerges from implementation task,
estimates of perceptual complexity and motoric skills
needed emerges as well
Goal: develop well-established UI patterns (with
predictive model of user performance attached)
 Context-of-Use Theory
Suchman (1987): Plans and Situated Action
Actions situated in place and time
User behavior responsive to other people
and environment
Actions depend on situation: time pressure,
safety-critical etc.
Mobile (and wearable!) computing: physical
space becomes relevant
Dourish (2002): social/psychological space
also has to be considered
 Object Action Interface Theory
Descriptive and explanatory model
Can also be used to guide design
Observation: syntax becomes simpler in
modern GUI systems
Object Action Design: decompose objects and
actions
Objects may include real world objects,
Tasks may include common activities