Notes Fp511 Chapter1 Intro to Hci

40
1 Human-Computer Interaction Introduction to HCI Aida Azmila Azmi JTMK FROM THE ORIGINAL VERSION OF : Alexiei Dingli [email protected]

description

nota nota

Transcript of Notes Fp511 Chapter1 Intro to Hci

Page 1: Notes Fp511 Chapter1 Intro to Hci

1

Human-Computer Interaction

Introduction to HCI

Aida Azmila Azmi

JTMK

FROM THE ORIGINAL VERSION OF :

Alexiei Dingli

[email protected]

Page 2: Notes Fp511 Chapter1 Intro to Hci

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.

Page 3: Notes Fp511 Chapter1 Intro to Hci

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).

Page 4: Notes Fp511 Chapter1 Intro to 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.

Page 5: Notes Fp511 Chapter1 Intro to Hci

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

Page 6: Notes Fp511 Chapter1 Intro to Hci

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, …

Page 7: Notes Fp511 Chapter1 Intro to Hci

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

Page 8: Notes Fp511 Chapter1 Intro to Hci

8

Creating usable systems (5)

• It aims to achieve

1. Usability (Useful, Usable, Used)

2. Safe

3. Effective

4. Efficient

5. Enjoyable system

Page 9: Notes Fp511 Chapter1 Intro to Hci

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

Page 10: Notes Fp511 Chapter1 Intro to Hci

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.

Page 11: Notes Fp511 Chapter1 Intro to Hci

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

Page 12: Notes Fp511 Chapter1 Intro to Hci

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!!

Page 13: Notes Fp511 Chapter1 Intro to Hci

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?

Page 14: Notes Fp511 Chapter1 Intro to Hci

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

Page 15: Notes Fp511 Chapter1 Intro to Hci

15

Historical basis of HCI (2)

Page 16: Notes Fp511 Chapter1 Intro to Hci

16

Historical basis of HCI (3)

Page 17: Notes Fp511 Chapter1 Intro to Hci

17

Historical basis of HCI (4)

Page 18: Notes Fp511 Chapter1 Intro to Hci

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

Page 19: Notes Fp511 Chapter1 Intro to Hci

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).

Page 20: Notes Fp511 Chapter1 Intro to Hci

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.

Page 21: Notes Fp511 Chapter1 Intro to Hci

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)

Page 22: Notes Fp511 Chapter1 Intro to Hci

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

Page 23: Notes Fp511 Chapter1 Intro to Hci

23

Eg: Cosmic Book

Page 24: Notes Fp511 Chapter1 Intro to Hci

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).

Page 25: Notes Fp511 Chapter1 Intro to Hci

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)

Page 26: Notes Fp511 Chapter1 Intro to Hci

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)

Page 27: Notes Fp511 Chapter1 Intro to Hci

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

Page 28: Notes Fp511 Chapter1 Intro to Hci

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

Page 29: Notes Fp511 Chapter1 Intro to Hci

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?

Page 30: Notes Fp511 Chapter1 Intro to Hci

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!!

Page 31: Notes Fp511 Chapter1 Intro to Hci

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)

Page 32: Notes Fp511 Chapter1 Intro to Hci

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!

Page 33: Notes Fp511 Chapter1 Intro to Hci

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.

Page 34: Notes Fp511 Chapter1 Intro to Hci

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.

Page 35: Notes Fp511 Chapter1 Intro to Hci

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.

Page 36: Notes Fp511 Chapter1 Intro to Hci

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

Page 37: Notes Fp511 Chapter1 Intro to Hci

37

Who studies HCI? (2)

Ergonomics User’s physical capabilities

Graphic Design Produce effective interaction

presentation

Technical Writing Produce the manuals and

documentations

Page 38: Notes Fp511 Chapter1 Intro to Hci

38

Conclusion (1)

• HCI studies

• Interaction between users & computer systems

• In order to build systems which are:

• Usable

• Safe

• Efficient

• Effective

• Enjoyable

Page 39: Notes Fp511 Chapter1 Intro to Hci

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

Page 40: Notes Fp511 Chapter1 Intro to Hci

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 ...