0% found this document useful (0 votes)
138 views65 pages

Lesson 1 3 - Human Computer Interaction

The document provides an introduction to human-computer interaction. It discusses the human, computer, and interaction components of HCI. It explains that understanding human cognition, capabilities, and limitations is important for designing effective interactive systems. Vision is identified as the primary human sense and input channel for interaction. The structure of human memory and Norman's model of the execution-evaluation cycle are also summarized to illustrate how users interact with computer systems.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
138 views65 pages

Lesson 1 3 - Human Computer Interaction

The document provides an introduction to human-computer interaction. It discusses the human, computer, and interaction components of HCI. It explains that understanding human cognition, capabilities, and limitations is important for designing effective interactive systems. Vision is identified as the primary human sense and input channel for interaction. The structure of human memory and Norman's model of the execution-evaluation cycle are also summarized to illustrate how users interact with computer systems.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 65

1

INTRODUCTION TO
HUMAN COMPUTER
INTERACTION
Lecture II ( The HUMAN, COMPUTER and INTERACTION)
Prepared by:
Paulo Salvador Perez
[email protected]
2

Human Computer Interaction

1. HUMAN - is the user.


2. COMPUTER - it means any technology
ranging from desktop or portable to
large scale computer.
3. INTERACTION - it means any
communication between a user and
computer, be it direct or indirect.
3

HUMAN

WHY DO WE NEED TO
UNDERSTAND HUMAN?
4

Why do we need to understand Human?

1. Interacting with technology is


cognitive.

2. Human cognition process is


involved when interacting with
system.
5

Why do we need to understand Human?

3. Human capabilities are


limited.

4. Provide knowledge about what


user can and can not be
expected to do
6

Why do we need to understand Human?

5. Identifies and explain the root


cause of the problems users
encounter.
6. Supply theories, modelling,
guidance and methods for
improved interactive systems.
7

Why do we need to understand Human?

In short, these 6 factors sum up


in human cognition processes
such as attention, perception,
recognition, memory, learning ,
reasoning, problem solving and
decision making.
8

Input – Output Channels

• A person’s interaction with


the outside world occurs
through information being
received and sent: input
and output.
9

Input – Output Channels

• In an interaction with
computer, a user receives
information from the output
of computer, user’s output
becomes computer’s input
and vice versa.
10

Input – Output Channels

• Input in human (sight, hearing,


touch, taste and smell).

• output through control of the


effectors (limb, eyes, fingers,
head and vocal system).
11

Input – Output Channels

In relation to
Human senses, What do
you think is the primary
source of information?
12

Input-output channels - VISION

Human vision is a highly complex


activity with a range of physical
and perceptual limitations. It is
the primary source of information.
13

Role of Vision

Visual perception

a) perception of size and


depth

b) perceiving brightness
(measured in luminance)

c) perceiving color.
14

Limitation of vision

If you look at the dot, which side of the alphabets are more easy to read?
15

Limitation of vision
Is this an ambiguous shape?
16

Design Focus

Always remember, In interface


design we need to be aware
that we will not always
perceive things exactly as they
are.
17

Design Focus

Optical illusions highlight the


differences between the way
things are and the way we
perceive them.
18

Design Focus
We tend to see the center of a
page as being a little above the
actual center – so if a page is
arranged symmetrically around the
actual center, we will see it as too
low down. In graphic design this is
known as optical center.
19

Other example
20

Other Information - VISION

a) Adult reads approximately 250 words a minute.


b) Words can be recognized as quickly as single
characters.
c) Familiar words are recognized using shape.
d) Fonts size 9 – 12 are easiest to read.
e) Line length between 2.3-5.2 inches are equally legible.
f) A negative contrast (dark characters in light screen)
provides higher luminance.
21

Input-output channels - HEARING

- It is secondary to sight.

- It provides enormous
amount of information.
22

Other Information - HEARING


a) a) Human ear can hear frequencies from 20Hz to 15kHz.
b) It can distinguish frequency changes of 1.5Hz.
c) Different frequencies trigger activity in neurons in different parts of the
auditory system.
d) The auditory system performs some filtering of the sounds received,
allowing us to ignore background noise and concentrate on important
information.
e) Sound could be used more extensively in interface design, to convey
information about the system state.
23

Input-output channels - TOUCH

Considered as less important


compare to vision and hearing,
but could you imagine life without
it?
24

Input-output channels - TOUCH

• Touch provides us with vital


information about our environment.
• It tells us when we touch something
hot or cold, and can therefore act as a
warning.
• It also provides us with feedback when
we attempt to lift an object.
25

Structure of human memory


26

Structure of human memory

Our minds have a tendency to flush


short-term memory in order to get on
with the next job. Early automatic teller
machines (ATMs) gave the customer
money before returning their bank
card. On receiving the money the
customer would reach closure and
hence often forget to take the card.
Modern ATMs return the card first!
27

THANKS!
Any questions?
28

How do you think the physical


human limitation will impact the
interactive system design?
29

INPUT DEVICES

Input devices for interactive


use, allowing text entry,
drawing and selection from
the screen.
30

OUTPUT DEVICES

Output devices are devices


that receives data from a
computer, usually for
display, projection, or
physical reproduction.
31

MEMORY

Short term Memory ( RAM )

Long term Memory ( Discs )


32

Input-memory-output

Users should understand


different devices, in particular,
with the functions, to have a
better interaction with the
computer.
33

THE
INTERACTION
Lecture III ( The HUMAN, COMPUTER and INTERACTION)
Prepared by:
Paulo Salvador Perez
[email protected]
34

INTERACTION

Interaction defines the


communication between user
and system. It translates
between what users want and
how system delivers it.
35

INTERACTION
▪ Interaction Model
Translation between user and system

▪ Ergonomics
Physical characteristics of interaction.
▪ Interaction Style
The nature of user/system dialog
▪ Context
Social, organization, motivational
36

INTERACTION MODELS

▪ Terms of Interaction
▪ Donald Norman’s Model
▪ Interaction Framework
37

INTERACTION

Some terms of interaction


domain – the area of work under study
e.g. graphic design
goal – what you want to achieve
e.g. create a solid red triangle
task – how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle
38

INTERACTION – Interaction Models


Donald Norman’s execution-evaluation cycle

■ User establish the goal.


■ Forming the intention.
■ Specifies the actions sequence.
■ Executes the action.
■ Perceive system state.
■ Interprets system state.
■ Evaluate system state with respect to goal
39

INTERACTION – Interaction Models


Donald Norman’s execution-evaluation cycle

■ User establish the goal.


■ Forming the intention.
■ Specifies the actions sequence.
■ Executes the action.
■ Perceive system state.
■ Interprets system state.
■ Evaluate system state with respect to goal
40

INTERACTION – Interaction Models


Donald Norman’s execution-evaluation cycle

■ User establish the goal.


■ Forming the intention.
■ Specifies the actions sequence.
■ Executes the action.
■ Perceive system state.
■ Interprets system state.
■ Evaluate system state with respect to goal
41

INTERACTION – Interaction Models


Donald Norman’s execution-evaluation cycle

■ User establish the goal.


■ Forming the intention.
■ Specifies the actions sequence.
■ Executes the action.
■ Perceive system state.
■ Interprets system state.
■ Evaluate system state with respect to goal
42

INTERACTION - DONALD NORMAN’S MODEL

GULF OF EXECUTION
is the degree of ease with which a user can understand the
current state of a system. It is the difference between the intentions of
the users and what the system allows them to do.

GULF OF EVALUATION
is the degree of ease with which a user can perceive and
interpret whether or not the action they performed was successful. The
gulf is small when the system provides information about its state in a
form that is easy to receive, interpret, and matches the way the person
thinks of the system.
43

INTERACTION - DONALD NORMAN’S MODEL


44

INTERACTION-NORMAN’S Execution-Evaluation Cycle


45

INTERACTION - HUMAN ERRORS


Slips and Mistake

SLIP
• understand system and goal
• correct formulation of action
• incorrect action

MISTAKE
• may not even have right goal!

Fixing things?
slip – better interface design
mistake – better understanding of system
46

INTERACTION - ABOWD and BEALE’S MODEL

There are four main translations


involved in the interaction:
• Articulation
• Performance
• Presentation
• Observation
47

INTERACTION - ABOWD and BEALE’S MODEL

• Articulation
INPUT
• Performance
Execution
Evaluation
• Presentation
OUTPUT
• Observation
48

ERGONOMICS

■ Study of the physical characteristics


of interaction.

■ It defines standards and guidelines


for constraining the way system is
designed.
49

INTERACTION – Ergonomics

▪ Arrangement of controls and displays - controls


grouped according to function or frequency of use, or
sequentially
▪ Surrounding environment - seating arrangements
adaptable to cope with all sizes of user.
▪ Health issues - physical position, environmental
conditions (temperature, humidity), lighting, noise.
▪ Use of color - use of red for warning, green for go,
awareness of color-blindness etc.
50

INTERACTION – Interfaces
Direct manipulation – user being the
primary control, interaction with
artificial world. Such as office system.

Indirect manipulation – user interacts


with the machines through interface.
Problem with feedback and delays.
51

INTERACTION – Common Interaction Styles


■ CLI (Command Line Interface)
■ Menus
■ Natural language
■ Query dialog
■ Form fills & spreadsheets
■ WIMP
■ 3D interface
■ Point and Click
52

INTERACTION – Common Interaction Styles

CLI (Command Line Interface)


✓ Way of expressing instructions to the computer
directly
- function keys, single characters, short
abbreviations, whole words, or a
combination

✓ suitable for repetitive tasks


✓ better for expert users than novices
✓ offers direct access to system functionality
✓ command names/abbreviations should be
meaningful!

Typical example: the Unix system


53

INTERACTION – Common Interaction Styles

MENUS
✓ Set of options displayed on the screen
✓ Options visible
-less recall - easier to use
-rely on recognition so names should
be meaningful
✓ Selection by:
-numbers, letters, arrow keys, mouse
-combination (e.g. mouse plus
accelerators)
✓ Often options hierarchically grouped
-sensible grouping is needed
✓ Restricted form of full WIMP system
54

INTERACTION – Common Interaction Styles

NATURAL LANGUAGE
✓ Familiar to user
✓ Speech recognition or typed natural language
✓ Problems
-vague
-ambiguous
-hard to do well
✓ Solutions
-try to understand a subset
-pick on keywords
55

INTERACTION – Common Interaction Styles

QUERY INTERFACE
✓ Question/answer interfaces
-user led through interaction via series of
questions
-suitable for novice users but restricted
functionality
-often used in information systems
✓ Query languages (e.g. SQL)
-used to retrieve information from
database
-requires understanding of database
structure and language syntax, hence
requires some expertise
56

INTERACTION – Common Interaction Styles

FORM FILLS
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires
-good design
-obvious correction
-facilities
57

INTERACTION – Common Interaction Styles

WIMP
• Windows
• Icons
• Menus
• Pointers

-default style for majority of interactive


computer systems, especially PCs and desktop
machines
58

INTERACTION – Common Interaction Styles

WINDOWS
▸ Areas of the screen that behave as if they
were independent
▹ can contain text or graphics
▹ can be moved or resized
▹ can overlap and obscure each other, or
can be laid out next to one another (tiled)

▸ scrollbars
▹ allow the user to move the contents of
the window up and down or from side to
side
▸ title bars
▹ describe the name of the window
59

INTERACTION – Common Interaction Styles

ICONS
▸ small picture or image
▸ represents some object in the interface
▹ often a window or action
▸ windows can be closed down (iconised)
▹ small representation fi many
accessible windows
▸ icons can be many and various
▹ highly stylized
▹ realistic representations.
60

INTERACTION – Common Interaction Styles

POINTERS
▸ small picture or image
▸ represents some object in the interface
▹ often a window or action
▸ windows can be closed down (iconised)
▹ small representation fi many
accessible windows
▸ icons can be many and various
▹ highly stylized
▹ realistic representations.
61

INTERACTION

To sum it up, this focuses to define


and facilitate interaction between
human beings by means of a
product or a service. It focuses on
the possibilities to create and
encourage behavior facilitating an
exchange between people.
62
1.Dollar Shave Club: "Shave Time. Shave Money."
2.MasterCard: "There are some things money can't buy. For everything else, there's
MasterCard."
3.M&M: "Melts in Your Mouth, Not in Your Hands"
4.De Beers: "A Diamond Is Forever"
5.Meow Mix: "Tastes So Good, Cats Ask for It By Name"
6.Verizon: "Can You Hear Me Now? Good."
7.The U.S. Marine Corps: "Semper Fi"
8.Ronseal: "It Does Exactly What It Says on the Tin."
9.The Mosaic Company: "We Help the World Grow the Food It Needs"
10.Pitney Bowes: "We Power Transactions That Drive Commerce"
11.Nike: "There Is No Finish Line"
12.Nike: "Just Do It."
13.Apple: "Think Different."
1.L'Oréal Paris: "Because You're Worth It."
2.California Milk Processor Board: "Got Milk?"
3.BMW: "Designed for Driving Pleasure."
4.Tesco: "Every Little Helps"
5.Bounty: "The Quicker Picker Upper"
6.Lay's: "Betcha Can't Eat Just One."
7.Audi: "Advancement Through Technology"
8.Dunkin' Donuts: "America Runs on Dunkin'"
9.McDonald's: "I'm Lovin' It"
10.The New York Times: "All the News That's Fit to Print"
11.General Electric: "Imagination at Work."
12.State Farm: "Like a Good Neighbor, State Farm is There"
13.Maybelline: "Maybe she's born with it. Maybe it's Maybelline."
14.The U.S. Marine Corps: "The Few. The Proud. The Marines"
65

THANK YOU FOR LISTENING!


Any questions?

You might also like