�ݺ�ߣ

Chapter 2 :
Human as the User
Contents :
 What is Cognition
 The Senses
 Human Sense : Vision
 Human Sense : Hearing
 Human Sense : Smell
 Human Sense : Touch
 Human Sense : Taste
1
MMG3033 Human Computer Interaction

Chapter 2 : Human As The User

Objectives
 Explain

what is cognition and why it is
important for interaction design.
 Understand on how the processing of human
memory.
 Explain what are the human 5 senses and
why it is important in interaction design.

2


Overview
 What

is cognition?
 What are users good and bad at?
 Describe how cognition has been applied to
interaction design
 Theories of cognition




Mental models, theory of action
Information processing
External cognition, distributed cognition
3



Why do we need to understand
users?


Interacting with technology is cognitive



We need to take into account cognitive processes
involved and cognitive limitations of users



We can provide knowledge about what users can and
cannot be expected to do



Identify and explain the nature and causes of
problems users encounter



Supply theories, modelling tools, guidance and
methods that can lead to the design of better
interactive products
4



What is Cognition?
 What

is goes on in our heads when we carry
out our everyday activities.
 It involves cognitive processes, like thinking,
remembering, learning, daydreaming,
decision making, seeing, reading, writing and
talking.
 Norman (1993) distinguishes between 2
general modes; experiential and reflective
cognition
5


What goes on in the mind?

6


Core cognitive aspects







Attention
Perception and recognition
Memory
Learning
Reading, speaking and listening
Problem-solving, planning, reasoning and decisionmaking
Most relevant to interaction design are attention,
perception and recognition, and memory
7



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 mass of competing stimuli but limits our
ability to keep track of all events
Information at the interface should be structured to capture
users’ attention, e.g. use perceptual boundaries (windows),
colour, reverse video, sound and flashing lights
8



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

First screen


Second screen

9


Activity 1


Tullis (1987) found that the two screens produced quite
different results






1st screen - took an average of 5.5 seconds to search
2nd screen - took 3.2 seconds to search

Why, since both displays have the same density of
information (31%)?
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
10



Design implications for attention








Make information salient when it needs attending to
at a given stage of task.
Use techniques like animated graphics, color,
underlining, ordering of items, sequencing of
different information and spacing of items
Avoid cluttering the interface with too much
information.
Interfaces that are plain are much easier to use, like
the Google search Engine.
11



An example of over-use of
graphics
Our Situation
 State

the bad news
 Be clear, don’t try to obscure the
situation

12


Perception and recognition
How information is acquired from the
environment, via different sense organs, e.g :
eyes, ears, fingers and transformed into
experiences of objects, events, sound and
tastes.
 Obvious implication is to design representations
that are readily perceivable, e.g.
 Text should be legible
 Icons should be easy to distinguish and read


13


Is color contrast good?
Find italian

14


Are borders and white space
better? Find french

15


Activity 2


Weller (2004) found people took less time to locate
items for information that was grouped




Some argue that too much white space on web
pages is detrimental to search




using a border (2nd screen) compared with using
color contrast (1st screen)

Makes it hard to find information

Do you agree?

16


Which is easiest to read and
why?
What is the time?

What is the time?

What is the time?

What is the time?

What is the time?

17


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
18



Memory







Involves first encoding and then retrieving knowledge
We don’t remember everything - involves filtering and
processing what is attended to
Context is important in affecting our memory (i.e.,
where, when)
Well known fact that we recognize things much better
than being able to recall things



Better at remembering images than words
Why interfaces are largely visual

19


Processing in memory


Encoding is first stage of memory






determines which information is attended to in the
environment and how it is interpreted

The more attention paid to something, and the more it
is processed in terms of thinking about it and
comparing it with other knowledge, and
The more likely it is to be remembered


e.g., when learning about HCI, it is much better to reflect upon
it, carry out exercises, have discussions with others about it,
and write notes than just passively read a book, listen to a
lecture or watch a video about it
20



Activity 3








Try to remember the dates of all the members of your
family’s and your closest friends’ birthdays. How many can
you remember?
Try to remember the cover of the last two magazines you
bought or rented
Which was easiest? Why?
People are very good at remembering visual cues about
things
 e.g., the color of items, the location of objects and
marks on an object
They find it more difficult to learn and remember arbitrary
material
 e.g., birthdays and phone numbers
21



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


e.g., categories, color, flagging, time stamping

22


The Senses


Human and the 5 senses :

1)
2)
3)
4)
5)

Eyes
Ear
Nose
Haptic
Tongue

:
:
:
:
:

83%
10%
4%
2%
1%
23



The Human Eye
•

Light → retina →
Change shape
(accommodation) →
rods & cones → fovea
→ colour detection →
electric impluse → brain
→ interpretation

•

Fovea (area of highest
resolution): about 2
degrees of arc
75% of the human
visual operations are
related to the fovea.
24



Human Vision


Light reception takes place in the retina, which contains
2 types of photoreceptors:
Cones

Rods

Mediated visual impression

degrees of brightness

Distribution over retina

Fovea only

not in the fovea

Sensitivity for brightness


Colors

Low

High

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



Human Vision


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.



These receptors are located in different areas of the
retina, so some color especially blue are perceived
to be deeper than red.

26


Vision : Main Characteristic


When light enters the eye it has two main
characteristics:



Brightness (intensity)
Colour (wavelength)

 In software development,

avoid creating any
confusing effects.
 This can occur with
certain types of 3D icons,
example : can be caused by
the misuse of colour.
27


Vision
This effects are called optical illusion.

28


http://www.at-bristol.org.uk/Optical/default.htm


Gestalt Theories

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.


Here twelve dots have
been 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.

29


Vision : Visual Field


Definition of Visual Field is the size of a
display screen, the layout of the display and of
any controls.



Too much movement of the head can cause
discomfort and also increase the chances of
eye strain if re-focusing needs to occur.



Usually movement is allowed for and thus
provides a range of about 100-120º from the
straight-ahead position (periphery of vision).
30



Vision : Color







Color is particularly effective in calling attention to
specific information on a display, differentiating
information types and grouping similar items.
Color is an important component in design.
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.
Children like bright colours – catch the
imagination.

31


Psychological Implications
Color
Red

Implications
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
32



Vision : Color


Color is classified to:
 Hue
 Brightness
 Saturation

Red

Green

Blue

33


Color : Hue






Hue is an aspect of chromatic colors such as red
and green. Achromatic colors such as black, white
and neutral grey, do not have hue.
Hue corresponds to the
normal meaning color –
changes in wavelength.
Hue is located along the
border of the color wheel.
These are spectral colors.

34


Color : Brightness


Brightness (intensity or luminance) refers to the
shades of gray going from white (very high
brightness) through gray (medium brightness) to
black (very low brightness).



Brightness varies amongst
the chromatic and
achromatic colors.



Area of dark and light meet
it is possible to see strange
effects – optical illusion.
Example : Hermann Grid
35



Color : Saturation


Saturation (or chromatic) is the relative amount of
pure light that must be mixed with the white light to
produce the perceived color.



The more black, white or grey that is mixed with the
color then the less saturated it becomes.



When the color is entirely
white, saturation is said
to be zero.

36


Color : Saturation

37


Colour : Design

38


Colour : Design

39


Colour : Design

40


Colour : Design
Classification of colour in physically and culturally
have to be determined. Societies classify colour
differently.

41


Color : The Implication










Do not use blue for small objects (since human sensitivity for
blue is very low, particularly in the fovea)
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)
Neighboring objects should not merely differ by their amount
of blue. a a a (red, red with 50% blue, red with 100% blue)
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).
If red and green are used as signals (warnings) in the
periphery, they should have additional emphasis (like blinking
or change in size).
Black, white, yellow and blue can be used in the periphery
since the sensitivity of the retina is roughly the same.
42



Font : Design
1.

Some people argue that san serif fonts are easier to
read than serif fonts. But anyway, it is a bad practice to
mix too many fonts. (san serif ; without extra strokes, serif
fonts ; have extra strokes)

2.

The size of the screen will dictate how much
information can be comfortably contained. A cluttered
screen is difficult to interpret because it is a lot for the
eye and brain to absorb.

3.

The important items should be displayed according to
their priority and should be occupy the same place on
the screen.
43



Font : Design

44


Font : Types

45


Font : Design
Sometimes the type of fonts can also means
expression of human feeling.
Mode

Font

Aggresive

Traditional
Classic
46


Hearing


In HCI, the second most important means of
communication is sound.



Hearing or audition is a response to pressure. It tells
us about changes that occur at various distance
away from us.



When these sound waves reach the ears, they cause
a series of mechanical pressure changes which
trigger the auditory receptors

47


Hearing



This causes responses in the brain and the
sensation of hearing.
48



Hearing : Sound Waves


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



Hearing : Pitch & Loudness


Frequency is measured in hertz (Hz) while the loudness
of sound is decribed in decibles.



Sensitivity to frequency and loudness varied between
individuals and can be different for the same person at
different time.

50


The use of the Sound


Sound is used as a locator i.e. locating things.



“You cannot decide not to listen whereas you can decide
not to look”.



Use sound for feedback and attracting attention when :
 The information is short and simple.
 The information will not be referred later.
 For alerts and warnings when an immediate
response is needed.
 The visual system is already overburdened.
 The user is moving about from place to place.
 A verbal response is needed.
 Poor illumination makes vision unreliable.0


51


Touch


Touch or haptic channel is a very important sense for the blinds.



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



Tactile feedback is important in the use of keyboard – spongy or
heavy touch



Touch is important in the
development of devices such
as keyboards.



The speed at which a typist
can type will be affected
by the feel of the keyboard
and how it responds to key
press.


52


Taste


The sense of taste provides information about what
should or should not be eaten.



The receptors are the taste buds which respond to
chemicals that are dissolved in water.



On average, a human being has about 10,000 taste buds
mostly on the tongue and some other regions of the
mouth.



Messages are passed from these receptors to the brain.

53


Taste


There are 4 basic tastes :
1.
2.
3.
4.

Bitter
Salty
Sour
Sweet

54


Smell


Smell or olfaction provides information about chemicals in
the air. These excite receptors located at the top of the
nasal cavity.



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.

55


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


56

�ݺ�ߣ

20130220100249chap2 human

Recommended

More Related Content

What's hot (6)

Viewers also liked (6)

Similar to 20130220100249chap2 human (20)

20130220100249chap2 human

Editor's Notes