TH6204

Advanced User Interface

Topic 1
Overview of HCI

5/20/15

Why Systems Fail?

Inadequate requirements 13%

Lack of user participation 12%
Inadequate resources
11%
Unrealistic expectations
10%
Lack of support at senior level 9%
Changing specification
8%
Lack of planning
8%

5/20/15

User Interface and Human-Computer

Interaction (HCI)
User interface is the space where
interaction between users (humans) and
machines (computers) occurs.
Contributions or findings in HumanComputer Interaction (HCI) field lead to
better and more advanced user
interface.
5/20/15

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

5/20/15

Definition of Human-Computer Interaction (HCI)

Human-Computer Interaction is a discipline

concerned with the design, evaluation and
implementation of interactive computing
systems for human use and with the study of
major phenomena surrounding them
(ACM SIGCHI, 1992, p.6)

5/20/15

Definition of Human-Computer Interaction (HCI)

Human

The end user

How human perceive and process information,
strengths and weaknesses
Computer

The machine
The technology used to receive, process and
display information, strengths and weaknesses
Interaction

The user tells the computer what he/she wants

The computer gives feedback
5/20/15

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

5/20/15

Historical Roots of HCI (ACM SIGCHI

1992)
Computer Graphics
CRT & pen devices Interactive Graphics
Sketchpad(Sutherland, 1963)

Human Factors
Problems of designing equipment operable by
humans during WW2 ( Eg. flight displays & controls)

Ergonomics
Relationship of work setting and the effects of stress
factors

Cognitive Psychology
Human information processing & performance
5/20/15

HCI-

Evolution

Human Computer Interaction - Past,

Present, Future
http://
www.youtube.com/watch?v=J_FvdyhtVH
g

5/20/15

History of Basic
Interactions
(Myers, 1996)

5/20/15

History of Basic Interactions (Myers,

1996)
Direct Manipulation of graphical
object

5/20/15

Sketchpad (Sutherland, I. E., 1963) manipulation of objects using a light-pen

The term Icons was first coined in
Pygmalion (Smith, D. C. 1977)
Extensive use of Direct Manipulation in
Xerox Star (Smith, D. C. 1982)
This approach was followed by Apple in
Apple Lisa (1982) and Apple Macintosh
(1984)

History of Basic Interactions (Myers,

1996)
Direct Manipulation of graphical
object

5/20/15

Sketchpad (Sutherland, I. E., 1963) manipulation of objects using a light-pen

The term Icons was first coined in
Pygmalion (Smith, D. C. 1977)
Extensive use of Direct Manipulation in
Xerox Star (Smith, D. C. 1982)
This approach was followed by Apple in
Apple Lisa (1982) and Apple Macintosh
(1984)

Contents of HCI Field (ACM SIGCHI 1992)

5/20/15

Contents of HCI Field (ACM SIGCHI 1992)

U1 Social Organization
and Work

U2 Application Areas

Relates to the human as

an interacting social
being
Classes of application
domains and particular
application areas where
characteristic interfaces
have developed

U3 Human-Machine Fit
and Adaptations

5/20/15

Fit between the

designed object and its
use through adaptations

Contents of HCI Field (ACM SIGCHI 1992)

H1 Human Information
Processing
Characteristics of the
human as a processor
of information
H2 Language,
Communication and
Interaction
Language as a
communication and
interface medium
Communication
phenomena
H3 Ergonomics
Anthropometric and
physiological
characteristics of
people and their
relationship to
workspace and
environmental
parameters
5/20/15

Contents of HCI Field (ACM SIGCHI 1992)

C1 Computer and Output Devices

The technical construction of
devices for mediating between
humans and machines
C2 Dialogue Techniques
The basic software architecture
and techniques for interacting
with humans
C3 Dialogue Genre
The conceptual uses to which the
technical means are put. Such
concepts arise in any media
discipline (e.g., film, graphic
design, etc.)
C4 Computer Graphics
Basic concepts from computer
graphics that are especially useful
to know for HCI
C5 Dialogue Architecture
Software architectures and
standards for user interfaces

5/20/15

Contents of HCI Field (ACM SIGCHI 1992)

D1 Design Approaches
The process of design
Relevant topics from other
design disciplines
D2 Implementation Techniques
and Tools
Tactics and tools for
implementation
D3 Evaluation Techniques
Philosophy and specific
methods for evaluations
D4 Example Systems and Case
Studies
Classic designs to serve as
extended examples of
human interface design

5/20/15

New and Active Sub Areas in HCI

5/20/15

Wearable & Eyeware Computing

Pervasive & Ubiquitous Computing
User Experience (UX)
Accessibility
Social Computing
Child-Computer Interaction
Brain-Computer Interaction
Games & Entertainment
Sustainability
HCI for Development (HCI4D)

Goals of HCI
The goals of HCI are to develop or improve the
safety, utility and effectiveness of systems that
include computers, often through improving
usability
Develop usable products
Usability means easy to learn, effective to
use and provide an enjoyable experience
How ?
Involve users in the design process

5/20/15

Importance of HCI
Marketing aspect
People use computers everyday and
want to learn using them fast
If a product (software) is difficult to
use, people will turn into another
product

5/20/15

Importance of HCI
Human aspect
Human make errors and have
weaknesses
Errors will lead to

5/20/15

Loss
Loss
Loss
Loss

of
of
of
of

time
money
life (for critical systems)
motivation

Designing for Users

Need to take into account:

Who the users are

What activities are being carried out
Where the interaction is taking place
Need to optimise the interactions users have with
a product

Such that they match the users

activities and needs

5/20/15

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
Listen to what people want and get
them involved
5/20/15

Use tried and tested user-based methods

The Costs of Bad User Interface Design

Imagine being stuck in a room with no visible way to get

out

Imagine being lost in a foreign country and being unable to

communicate with anyone. When you finally find someone
who speaks your language, he forces you to listen to his life
story before giving you the directions you need

Imagine being forced to make a decision with serious

consequences when you dont understand the choices

Imagine being on a highway with so many signs competing

for your attention that you cant possibly pick out the one
you need to follow

5/20/15

The Costs of Bad User Interface Design

Imagine having to reintroduce yourself every time you saw

your friends

Imagine having to walk around the block every time you

want to move from one room to another in your house

Imagine being incredibly hungry, but unable to figure out

how to open the refrigerator

Imagine hiring an employee who refuses to do what you

ask him and makes you feel stupid for asking.

5/20/15

Example 1
What is the handle for?

5/20/15

 To move the whole cabinet !!

5/20/15

Example 2
Which design is easier to use ?

5/20/15

Example 3

What is wrong with the design?

5/20/15

More Bad Designs .

Check out this website:
http://www.baddesigns.com/

5/20/15

Human error ?
Time : 20 December 1995 (night time)
Flight : American Airlines Flight 965 from Miami, USA
Destination : Cali, Columbia (south bound)

Chain of events :
1.

During preparation for landing, a decision has been made to change the approach to a more direct
runway.

2.

The pilot has mistakenly cleared the approach waypoints from their navigation computer.

3.

Attempting to program the navigation, the pilot needed to select the next radio beacon, ROZO
NDB.

4.

He entered an R into the flight navigation system (as R is listed as the identifier for ROZO NDB
in their chart) into his navigation computer.

5.

Unknown to the pilots, Columbia uses R for another radio beacon ROMEO NDB which is near
Bogota, and ROZO is used for ROZO NDB

6.

The autopilot caused the plane to make a wide semicircle turn towards east.

7.

The plane slammed into a granite peak at 10,000 feet

8.

Only 4 passengers survived without serious injuries.

5/20/15

Human error ?
Time : 20 January 1992 (night time)
Flight : Air Inter Flight 148 from Lyon to Strasbourg, France
Chain of events :
1.

Upon landing, the pilots were instructed to use a different runway, and due to heavy traffic on
the runway, the Air Traffic Controller (ATC) had to guide the approach.

2.

Unfortunately, the ATC had given an incorrect vector, causing the plane undershoot the turn.

3.

There are two modes of flight descend that the pilots can choose; Plane Vertical Speed (V/S) or
Flight Path Angle (FPA), both are displayed on the same window, and controlled by the same knob

4.

The captain calculated the required descend angle which is -3.3 degrees, and entered the
number, not realising that the current mode was the Plane Vertical Speed

5.

This would instruct the autopilot to descend at the rate of -3300 feet per minute (displayed as
-33), which is equivalent to -11 degrees.

6.

Coincidently, an air turbulence that occurred just half a second earlier causes the plane to
ascend slightly, and when the captain instructed the autopilot to descend, it was interpreted as
an emergency landing (security procedure)

7.

The plane descended 3 times much faster at a very steep angle, causing it to slam on the side of
a mountain.

8.

87 out of 96 people died.

5/20/15

References

5/20/15

Hewett, et al. 1992, ACM SIGCHI Curricula for Human-Computer

Interaction
Myers, B. A. "A Brief History of Human Computer Interaction
Technology." ACM interactions. Vol. 5, no. 2, March, 1998. pp. 44-54
Sutherland, I.E. "SketchPad: A Man-Machine Graphical
Communication System," in AFIPS Spring Joint Computer
Conference. 1963. 23. pp. 329-346
Smith, D.C., Pygmalion: A Computer Program to Model and
Stimulate Creative Thought. 1977, Basel, Stuttgart: Birkhauser
Verlag. PhD Thesis, Stanford University Computer Science
Department, 1975.
Smith, D.C., et al. "The Star User Interface: an Overview," in
Proceedings of the 1982 National Computer Conference. 1982.
AFIPS. pp. 515-528.