HUMAN COMPUTER

INTERACTION
(MMG 3033)
Chapter 2: Human as Users
 Chapter Outline
O What is Cognition?

O The Human Senses

O Vision (Eye)
O Touch (Skin)
O Hearing (Ear)
O Smell (Nose)
O Taste (Mouth – Tongue)
 Why Do We Need To Understand
Users?
Interacting with technology is cognitive
cognitive processes involved cognitive limitations of users

Provide knowledge – the expectation of what users can

and cannot do – what is easy for them

Identify and explain the nature and causes of problems

users encounter – difficult or unable to do

Supply theories, modelling tools, guidance and

methods that can lead to the design of better
interactive products
 What is Cognition?
O What is goes on in our heads when we carry out our
everyday activities → involves cognitive processes.
 What is Cognition?
O Cognitive psychology – the study of how information is
processed and represented in the mind.

O It is a term used to describe the interpretation of

information in the human mind.

O Provide knowledge about the capabilities and

limitations of the users.

O Interpret = to understand the likely meaning of a

statement, action.
 What is Cognition?
O Cognition can also be described in terms of cognitive
processes such as:
O Attention
Most relevant to
O Perception and recognition
interaction
O Memory
design
O Learning
O Reading, speaking and listening
O Problem-solving, planning, reasoning and decision-
making
 What is Cognition?
O Norman (1993) distinguishes between 2 general
modes:

O experiential cognition
O reflective cognition
 What is Cognition?
O Experiential cognition is a state of mind in which we
perceive, act, and react to events around us effectively
and effortlessly (Norman, 1993).

O Example: riding a bicycle, driving a car, reading a book.

What is Cognition?
What is Cognition?
 What is Cognition?
O Reflective cognition involves thinking, comparing, and
decision making.

O Example: learning, writing, lab activities.

 Attention
Selecting things to concentrate on at a point in time from the mass
of stimuli around us

Allows us to focus on information that is relevant to what we are

doing

Involves audio and/or visual senses

Focussed and divided attention:

enables us to be selective in terms of the
limits our ability to keep track of all events
mass of competing stimuli

Information at the interface should be structured to capture users’

attention, e.g. use perceptual boundaries (windows), colour,
reverse video, sound and flashing lights
Attention Examples
Attention Examples
Attention Examples
Attention Examples
Attention Examples
Attention Examples
 Activity 1

MMG3033 Human Computer Interaction 19

First screen
Attention Second screen

Find the price of a double room at the Holiday Inn in Bradley

 Attention
Tullis (1987) found that the
two screens produced quite
different results Why, since both displays
• 1st screen - took an average of 5.5 have the same density of
seconds to search information (31%)?
• 2nd screen - took 3.2 seconds to
search

Spacing
• In the 1st screen the information is
bunched up together, making it
hard to search
• In the 2nd screen the characters
are grouped into vertical categories
of information making it easier
Attention
Design Implications for Attention
Use techniques like
Make information salient animated graphics, color,
(important) when it needs underlining, ordering of
attending to at a given items, sequencing of
stage of task. different information and
spacing of items

Plain interfaces are much Avoid cluttering the

easier to use, like the interface with too much
Google search engine. information.
Design Implications for Attention
Use techniques like
Make information salient animated graphics, color,
(important) when it needs underlining, ordering of
attending to at a given items, sequencing of
stage of task. different information and
spacing of items

Plain interfaces are much Avoid cluttering the

easier to use, like the interface with too much
Google search engine. information.
 Perception and Recognition
How information is acquired
from the environment, via
different sense organs and
transformed into
experiences of objects,
events, sound and tastes.

Obvious implication is to
design representations that
are readily perceivable
•Text should be legible
•Icons should be easy to distinguish
and read
Perception and Recognition
 Perception and Recognition

Is colour contrast good? Are borders and white space better?

 Perception and Recognition
O Weller (2004) found people took less time to
locate items for information that was grouped
O Using border compared with colour contrast

O Some argue that too much white space on web

pages is detrimental to search
O Makes it hard to find information

O Do you agree?
 Activity

What is the time? What is the time?

What is the time? What is the time?

What is the time?

Which one is the easiest to read and why?

 Design Implications: Perception
Representations of information need to be designed to be
perceptible and recognizable

Icons and other graphical representations should enable users to

readily distinguish their meaning

Bordering and spacing are effective visual ways of grouping

information

Sounds should be audible and distinguishable

Speech output should enable users to distinguish between the set

of spoken words

Text should be legible and distinguishable from the background

 Memory
O Involves first encoding and then retrieving
knowledge
O We don’t remember everything - involves filtering
and processing what is attended to
O Context is important in affecting our memory
(i.e., where, when)
O Well known fact that we recognize things much
better than being able to recall things
O Better at remembering images than words
O Why interfaces are largely visual?
 Memory

Encoding is first stage The more attention When learning about HCI, it
of memory paid to something, is much better to reflect
•determines which and the more it is upon it, carry out exercises,
processed in terms have discussions with
information is others about it, and write
attended to in the of thinking about it notes than just passively
environment and and comparing it read a book, listen to a
how it is interpreted with other lecture or watch a video
about it
knowledge
 Activity
Try to remember all of your subject codes for this semester? How many
can you remember?

Try to remember the latest Pepsi logo?

Which was the easiest? Why?

People are very good at remembering visual cues about things

the colour of items, the location of objects and marks on an object

They find it more difficult to learn and remember arbitrary material

Birthdays, phone numbers, subject codes
 Design Implications: Memory

Don’t overload users’ memories with

complicated procedures for carrying out
tasks.

Design interfaces that promote recognition

rather than recall by using menus, icons
and consistently placed objects.

Provide users with a variety of ways of

encoding digital information to help them
remember where they have stored them
• categories, colour, flagging, time stamping
 Human Senses

1) Eyes : 83% 2) Ear : 10%

3) Nose: 4% 4) Haptic : 2%
5) Tongue: 1%
Human Senses: Vision
• Light → retina → Change
shape (accommodation)
→ rods & cones → fovea
→ colour detection →
electric impulse → brain
→ interpretation

• Fovea (area of highest

resolution): about 2 degrees
of arc
• 75% of the human visual
operations are related to the
fovea.
 Human Senses: Vision
O Light reception takes place in the retina, which
contains 2 types of photoreceptors:
Cones Rods
Mediated visual impression Colors degrees of brightness
Distribution over retina Fovea only not in the fovea
Sensitivity for brightness Low High

O Three types of cones:

red-sensitive: 64%, high concentration in fovea area
green-sensitive: 32%, high concentration in fovea area
blue-sensitive: 2%, evenly distributed over retina; none
in the center of the fovea.
 Human Senses: Vision
O Certain cell in the eye’s retina produce the
sensation of shades of gray and other cells
produce the sensation of color using receptors of
red, green and blue.

O These receptors are located in different areas of

the retina, so some color especially blue are
perceived to be deeper than red.
 Human Senses: Vision
O When light enters the eye it has two main
characteristics:
O Brightness (intensity)
O Colour (wavelength)

O In software development, avoid creating any

confusing effects→ called optical
illusion/Stroop Effect
O This can occur with certain types of 3D icons
such as misused of colour.
Human Senses: Vision
Human Senses: Vision
Human Senses: Vision
Human Senses: Vision
Human Senses: Vision
Human Senses: Vision
Eye Exercise 1
Eye Exercise 1
Eye Exercise 2
 Human Senses: Vision
(Gestalt Theories)
Gestalt means “organized whole” when
parts identified individually have different
characteristics to the whole. Example:
describing a tree
• It's parts are trunk, branches, leaves, perhaps
blossoms or fruit
• But when you look at an entire tree, you are not
conscious of the parts, you are aware of the overall
object - the tree.
• Parts are of secondary importance even though they
can be clearly seen.
Human Senses: Vision
(Gestalt Theories)
Human Senses: Vision
(Gestalt Theories)
 Human Senses: Vision
(Gestalt Theories)

Here twelve dots have been

In this illustration you can
test your natural tendency to
organize visual patterns. See
how you group the titled
squares and see a cross plus.
arranged to form a
directional symbol. We can
“see” each dot separately but
the arrow is greater than the
sum of the dots and becomes
the collective Gestalt.
 Human Senses: Vision
(Visual Field)
O Visual field is the size of a display screen, the layout
of the display and of any controls.

O Too much movement of the head can cause

discomfort and also increase the chances of eye
strain if re-focusing needs to occur.

O Usually movement is allowed for and thus provides a

range of about 100-120º from the straight-ahead
position (periphery of vision).
Human Senses: Vision
(Visual Field)
 Human Senses: Vision
(Colour)
O Color is an important component in design and
particularly effective in:
O calling attention to specific information on a display
O differentiating information types
O grouping similar items.

O Some people are unaware of their colour blindness

– about 8% of men and 1% of women. The most
common form of colour blindness is red-green.

O Children like bright colours – catch the

imagination.
 Human Senses: Vision
(Psychological Implications)
Color Implications
Red associated with blood, and with feelings that
are energetic, exciting, passionate or erotic
Orange color of flesh, or the friendly warmth of the
hearth fire
Green positive mode, nature (plant life, forests), life,
stability, restfulness, naturalness.
Blue coolness, distance, spirituality, or perhaps
reserved elegance
Violet fantasy, playfulness, impulsiveness, and
dream states
 Human Senses: Vision
(Colour)
O Colour is classified as:
O Hue – same as the word “colour” (varies according to
the wavelength of light (nm)
O Brightness/Intensity – brightness of the colour
O Saturation – amount of whiteness in the colour

Red Gree
Blue
n
Human Senses: Vision
(Colour)
Human Senses: Vision
(Colour)
Human Senses: Vision
(Colour)

Las Vegas Effect

Human Senses: Vision
(Colour)

Colour-blindness Tests
Human Senses: Vision
(Colour)
Human Senses: Vision
(Colour)
 Human Senses: Vision
(Colour - Hue)
O Hue is an aspect of chromatic colors such as red and
green.

O Achromatic colors such as black, white and neutral

grey, do not have hue.

O Hue corresponds to the normal meaning colour -

changes in wavelength.

O Hue is located along the border of the colour wheel.

These are spectral colours.
Human Senses: Vision
(Colour - Hue)
 Human Senses: Vision
(Colour - Brightness)
O Brightness (intensity or luminance) - shades of gray
going from white (very high brightness) through gray
(medium brightness) to black (very low brightness).

O Brightness varies amongst the chromatic and

achromatic colors.

O Area of dark and light made it is possible to see

strange effects – optical illusion.
Example : Hermann Grid
 Human Senses: Vision
(Colour - Saturation)
O Saturation (or chromatic) - the relative amount of
pure light that must be mixed with the white light to
produce the perceived color.
O The more black, white or grey that is mixed with the
color then the less saturated it becomes.
O When the color is entirely white, saturation = zero.
Human Senses: Vision
(Colour - Saturation)
Human Senses: Vision
(Colour)
Human Senses: Vision
(Colour)
Human Senses: Vision
(Colour)
 Human Senses: Vision
(Colour Design)
O Classification of colour in physically and culturally is
important – society see and classify colour differently
 Human Senses: Vision
(Colour Design)
O Do not use blue for small objects (since human
sensitivity for blue is very low, particularly in the
fovea)
O Blue is a good background color (since human
sensitivity for blue is very low and since receptors for
blue are roughly evenly distributed over the retina)

O Neighboring objects should not merely differ by their

amount of blue. a a a (red, red with 50% blue, red
with 100% blue)
 Human Senses: Vision
(Colour Design)
O If red and green are used for small objects, these
should be in the center (since the sensitivity for these
colors is far higher in the center).

O If red and green are used as signals (warnings) in the

periphery, they should have additional emphasis (like
blinking or change in size).

O Black, white, yellow and blue can be used in the

periphery since the sensitivity of the retina is roughly
the same.
 Human Senses: Vision
(Font)
O Some people argue that san serif fonts are easier to read
than serif fonts.

O Don’t mixed too many fonts (san serif; without extra

strokes, serif fonts; have extra strokes)

O The size of the screen will dictate how much information

can be comfortably contained.

O A cluttered screen is difficult to interpret because it is a lot

for the eye and brain to absorb.

O The important items should be displayed according to their

priority and should be occupy the same place on the
screen.
Human Senses: Vision
(Font)
Human Senses: Vision
(Font)
Human Senses: Vision
(Font)
 Human Senses: Vision
(Font)
Sometimes the type of fonts can also means expression of human feeling.

Mode Font
Aggresive

Traditional
Classic
 Human Senses: Vision
(Arrangement – Logical Way)
 Human Senses: Vision
(Arrangement – Alignment and Layout)
Human Senses: Vision
(Design Guidelines)
Eye Exercise 3
Eye Exercise 4
Eye Exercise 5
Eye Exercise 6
 Human Senses: Hearing

O In HCI, the second most important means of

communication is sound.

O Hearing or audition is a response to pressure.

O It tells us about changes that occur at various

distance away from us.

O When these sound waves reach the ears, they cause

a series of mechanical pressure changes which
trigger the auditory receptors
 Human Senses: Hearing

This causes responses in the brain and the sensation of hearing

 Human Senses: Hearing
(Sound Waves)
O Sound waves vary in :

1. Amplitude
▪ The height of the wave crest : ‘Loudness’
▪ Sound appears to be louder as its amplitude increase.

2. Wavelength
▪ The distance apart between each wave crest.

3. Frequency
▪ The number of waves per second : ‘Pitch’
▪ Pitch increases with the increase in frequency.
▪ Pitch is how high or how a sound is.
Human Senses: Hearing
(Sound Waves)
 Human Senses: Hearing
(Pitch and Loudness)
O Frequency is measured in hertz (Hz) while the loudness of
sound is decribed in decibles.

O Sensitivity to frequency and loudness varied between

individuals and can be different for the same person at
different time.
Human Senses: Hearing
(Pitch and Loudness)
 Human Senses: Hearing
(Pitch and Loudness)
O Sound is used as a locator (locating things).

O “You cannot decide not to listen whereas you can decide

not to look”.

O Use sound for feedback and attracting attention when:

O The information is short and simple.
O The information will not be referred later.
O For alerts and warnings when an immediate response
is needed.
O The visual system is already overburdened.
O The user is moving about from place to place.
O A verbal response is needed.
O Poor illumination makes vision unreliable.
Human Senses: Hearing
(Design Guidelines)
 Human Senses: Touch
O Touch or haptic channel is a very important sense for the
blinds.

O It is useful in noisy (either visual or audio) environments.

O Tactile feedback is important in the use of keyboard –

spongy or heavy touch.

O Touch is important in the development of devices such as

keyboards.

O The speed at which a typist can type will be affected by the

feel of the keyboard and how it responds to key press.
Human Senses: Touch
 Human Senses: Taste
O The sense of taste provides information about what
should or should not be eaten.

O The receptors are the taste buds which respond to

chemicals that are dissolved in water.

O On average, a human being has about 10,000 taste

buds mostly on the tongue and some other regions of
the mouth.

O Messages are passed from these receptors to the

brain.
 Human Senses: Taste
O There are 4 basic tastes :

1. Bitter
2. Salty
3. Sour
4. Sweet
 Human Senses: Smell
O Smell or olfaction provides information about
chemicals in the air. These excite receptors located at
the top of the nasal cavity.

O Taste and smell are not well developed in people. As

yet there are not real uses for either of these senses
though both can evoke strong emotional responses.
 Summary

Cognition comprises many processes including

thinking, attention, learning, memory, perception,
decision making, planning, reading, speaking and
listening.

The way an interface is designed can greatly

affect how well people can perceive, attend, learn
and remember how to carry out their tasks.
 Summary

Of the 5 sense, vision and hearing are the most

important for human computer systems at present,
though touch is being used for some systems and
has a part to play in input devices.

Too many colors can be confusing for the user.

Avoid color combinations like red and green which
may confusing for color-blind users.
Summary