1

Human-Computer Interaction

Introduction to HCI

Aida Azmila Azmi

JTMK

FROM THE ORIGINAL VERSION OF :

Alexiei Dingli

adingli@stmartins.edu

2

What is HCI?

The study of how people interact with

computers and to what extent computers

are or are not developed for successful

interaction with human beings.

3

What is 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 definition of HCI).

4

Creating usable systems (1)

• HCI investigates interaction between

• Human (1 user, a group, sequence of users)

• Computer (any computer big or small, process

control, embedded, etc)

• used to perform various tasks

• in particular environments.

5

Creating usable systems (2)

• The human factors …

• different users

• different conceptions or mental models about

their interactions

• different ways of learning, keeping knowledge

and skills

• cultural and national differences

• user preferences change as they gradually

master new interfaces

6

Creating usable systems (3)

• The computer factor …

• different devices

• Smart phones, Touch Screen Kiosks, …

• different capabilities and limitations

• Computing power, Input/output devices, …

• different operating systems

• user interface technology is changing rapidly

• it offers new interaction possibilities to which

previous research findings may not apply

• Visual, Tactile, Gesture based, …

7

Creating usable systems (4)

• What about the interaction?

• Communication between user and computer

• Direct interaction

• Dialogue with feedback

• Control throughout performance of the task

• Indirect interaction

• Batch processing

• Intelligent sensors controlling the environment

8

Creating usable systems (5)

• It aims to achieve

1. Usability (Useful, Usable, Used)

2. Safe

3. Effective

4. Efficient

5. Enjoyable system

9

Creating usable systems (6)

• User compatibility

• Product compatibility

• Task compatibility

• Work flow

compatibility

• Consistency

• Familiarity

• Simplicity

• Control

• WYSIWYG

• Flexibility

• Responsiveness

• Invisible

Technology

• Robustness

• Protection

• Ease of Learning

and Use

10

Creating usable systems (7)

• HCI focuses on user needs by assessing

interface design & implementation

according to usability criteria.

• Makes use of new, novel techniques &

technologies.

• It applies usability design principles to

achieve more productive & usable systems

and more satisfied users.

11

Creating usable systems (8)

• EC Directive 90/270/EEC

• Requires employers to ensure the following

when designing, selecting, commissioning or

modifying software:

• suitable for the task

• easy to use

• where appropriate, adaptable to user’s knowledge

& experiences

12

Creating usable systems (9)

• provides feedback on performance

• displays information in a format & at a pace that is

adapted to the user

• It must conform to the principles of software

ergonomics • (Ergonomics is the science that deals with the interaction between

people/work/environment/psychology. It considers the functions of the human body in the

design of tools, equipment, etc.)

• Designers & employers can no longer afford to

ignore the user!!

13

Question …

• Have you ever used a system that exhibit good

HCI with the users?

• Give a few examples …

• What systems have you used that exhibit bad

HCI with the users?

• Name a few … and why do you think they were

bad?

14

Historical basis of HCI (1)

• Second World War …

• Study of interaction between humans & machines in order to produce more effective weapons (Bletchley Park, Enigma, Colossus)

• Ergonomic Research Society formed (1949)

• Research in Man-Machine Interaction began to spread

15

Historical basis of HCI (2)

16

Historical basis of HCI (3)

17

Historical basis of HCI (4)

18

Basic Interaction (1)

• Graphical Objects

• 1963 (MIT)

• Graphical Objects manipulated by a pointing device (light

pen)

• Objects could be selected, moved, resized, etc.

• 1966 (Imperial College, London)

• Icons, Gesture Recognition, Dynamic Menus, etc.

• 1970 (XEROX PARC)

• Object selection and manipulation

• WYSIWYG

19

Basic Interaction (2)

• Mouse

• 1965 (Stanford Research Lab [SRI])

• Created to be a cheap replacement for light pens

• 1970

• Adopted at Xerox PARC

• First appeared commercially as part of

• The Xerox Star (1981),

• The Apple Lisa (1982),

• The Apple Macintosh (1984).

20

Basic Interaction (3)

• Windows • 1968 (Stanford Research Lab [SRI])

• 1969 - 1974 (Xerox PARC)

• Smalltalk System

• 1974 (MIT)

• EMACS Text Editor

• 1981 (Xerox PARC)

• The Cedar Window Manager

• 1981 Xerox Star

• 1982 Apple Lisa

• 1983 (Carnegie Mellon University funded by IBM))

• Andrew window manager

• 1984 Apple Macintosh

• The early versions of the Star and Microsoft Windows were tiled, but eventually they supported overlapping windows like the Lisa and Macintosh.

21

Applications (1)

• Drawing programs

• uses a mouse for graphics (1965)

• uses a tablet (1971)

• handling of lines and curves (1975)

• Text Editing

• first word processor with automatic word wrap, search &

replace, user-definable macros, scrolling text, & commands

to move, copy, and delete characters, words, or blocks of

text (1962)

• screen editing & formatting of arbitrary-sized strings with a

lightpen (1967)

• mouse-based editing (1968)

• first WYSIWYG editor-formatter (1974)

22

Applications (2)

• Spreadsheets • initial spreadsheet was VisiCalc (1977-8) for the Apple II

• HyperText • the idea where documents are linked to related documents

(1945)

• Ted Nelson coined the term "hypertext" (1965)

• NLS system was one of the first on-line journals, and it included full linking of articles (1970)

• HyperCard from Apple (1988) significantly helped to bring the idea to a wide audience

• Tim Berners-Lee used the hypertext idea to create the World Wide Web in 1990 at the government-funded European Particle Physics Laboratory (CERN)

• Mosaic, the first popular hypertext browser for the World-Wide Web

23

Eg: Cosmic Book

24

Applications (3)

• Computer Aided Design (CAD)

• first CAD systems similar to drawing programs (1963)

• pioneering work on interactive 3D CAD system (1963)

• first CAD/CAM (manufacture) system in industry was

probably General Motor's DAC-1 (about 1963)

• Video Games

• first graphical video game was probably SpaceWar (1962)

• the first computer joysticks (1962)

• early computer adventure game was created (1966)

• first popular commercial game was Pong (about 1976).

25

Up & Coming Areas (1)

• Gesture Recognition • first pen-based input device used light-pen gestures (1963)

• first trainable gesture recognizer (1964)

• a gesture-based text editor using proof-reading symbols (1969)

• gesture recognition has been used in commercial CAD systems since the 1970s

• came to universal notice with the Apple Newton (1992)

• Multi-Media • multiple windows with integrated text and graphics (1968)

• Interactive Graphical Documents project was the first hypermedia system which used raster graphics and text (1979-1983)

• Diamond project explored combining multimedia (text, spreadsheets, graphics, speech) (1982)

26

Up & Coming Areas (2)

• 3-D

• first system 3-D CAD system (1963)

• first interactive 3-D system used for molecular modelling

(1966)

• the late 60's and early 70's saw the flowering of 3D raster

graphics funded by the government

• the military-industrial flight simulation work of the 60's - 70's

led the way to making 3-D real-time

• Virtual Reality

• original work on VR funded by Air Force (1965-1968)

• study of force feedback, early research on head-mounted

displays and on the DataGlove (1971)

27

Up & Coming Areas (3)

• Computer Supported Cooperative Work

• remote participation of multiple people at various

sites (1968)

• Electronic mail, still the most widespread multi-user

software, was enabled by the ARPAnet (1969)

• and by the Ethernet from Xerox PARC (1973)

• an early computer conferencing system (1975)

• Natural language and speech

• Speech synthesis

• Speech recognition

28

HCI as a business necessity

• Can the users be ignored? (Linux, Windows,…)

• NO

• HCI + Usability engineering are a crucial business necessity

• Good Interface & Interaction Design should not • Be added after system is built

• Supporting users is an integral part of the design. To do this one must consider … • International Standards in HCI and Ergonomics

• User population is growing (size, diversity, etc.)

• Expanding awareness amongst users of what can be achieved

29

Safety-critical systems (1)

• Poor designs

• Very common in

• Safety

• Life-critical

• Which all depend on computer-control

• We need to understand why

• Disasters

• Accidents

• Frustrations

• happen?

• Can you mention some examples?

30

Safety-critical systems (3)

• Air-traffic control

• Aircraft crash due to problems pilot had to interpret

information on cockpit display

• Manned spacecraft

• On June 4, 1996, the maiden flight of the European

Ariane 5 launcher crashed about 40 seconds after

takeoff. Media reports indicated that the amount lost

was half a billion dollars. The error came from a

piece of the software that was not needed during

the crash!!

31

Safety-critical systems (4)

• Nuclear power plant (The Meltdown at Three

Mile Island 1979)

• “As alarms rang and warning lights flashed, the

operators did not realize that the plant was

experiencing a loss-of-coolant accident. They took

a series of actions that made conditions worse by

simply reducing the flow of coolant through the

core.”

• Medical Institutions

• Break down in the scheduling system led to delays

in reaching seriously ill patients. (UK)

32

Disaster examples

• 1988

• USS Vincennes shot down an Iran Air A300 Airbus

with 290 people aboard

• Aegis weapon system had

• Sophisticated software to identify potential threats

• BUT

• Was unable to provide up-to-date altitude information on

its large display (this could be read from other screens)

• In the confusion, the Airbus which leveled off at

12,500 feet was taken to be an F-14 fighter

descending to attack!

33

‘User Hostile’ example

• Poor HCI can lead to User Hostile systems rather than User Friendly ones …

• John has a stereo system with a matched set of

components made by the same manufacturer: a receiver, a CD player, and a cassette deck, stacked in that order. They all have the on/off button on the left side. Every time John goes to turn off all three components, he presses the top left button on the receiver, which turns it off; then he presses the top left button on the CD player, which turns it off; then, naturally, he presses the top left button on the cassette deck -- which pops open the cassette door.

34

It’s obvious …

• It seems "obvious" that the manufacturer could have improved the interface • putting all three buttons in the same location

• But it clearly wasn't obvious to the system's designers!!

• Most actions used to accomplish tasks with an interface are quite obvious to people who know them, including, of course, the software designer. But the actions are often not obvious to the first-time user.

35

Another example …

• Imagine a first-time user of a computer 1. he has been shown how to login to the system

2. has done some work

3. is now finished with the computer for the day

• Experienced computer users will find it obvious that a logout command is needed.

• But it may not occur to first-time users that a special action is required to end the session. • People don't "log out" of typewriters or televisions or video games, so

why should they log out of computers?

• Learning to predict problems like these by taking the user's point of view is a skill that requires practice.

36

Who studies HCI? (1)

• Multi-discipline field …

Psychology +

Cognitive Science

Knowledge of user’s

perceptual, cognitive &

problem-solving skills

Sociology Understand Interaction

Computer Science +

Engineering

Build the necessary

technology

Business Market the product

37

Who studies HCI? (2)

Ergonomics User’s physical capabilities

Graphic Design Produce effective interaction

presentation

Technical Writing Produce the manuals and

documentations

38

Conclusion (1)

• HCI studies

• Interaction between users & computer systems

• In order to build systems which are:

• Usable

• Safe

• Efficient

• Effective

• Enjoyable

39

Conclusion (2)

• Important points to keep in mind …

1. You need a lot of common sense

2. You must be ready to accept criticism

3. Think ‘user’

4. Try it out (They know what they want!)

5. Involve the users

6. Iterate

40

Exercise

• If we take a toaster ...

• Describe:

• the users the machine seems to be designed for;

• the tasks and subtasks the machine was evidently

designed to support;

• the "interface" part of the machine;

• the part of the machine that is NOT the interface.

• What about an electric drill ...