MMG3033 Human Computer Interaction1
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
Chapter 2 : Human As The User
2
MMG3033 Human Computer Interaction
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.
Objectives
Chapter 2 : Human As The User
3
MMG3033 Human Computer Interaction
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
Overview
Chapter 2 : Human As The User
4
MMG3033 Human Computer Interaction
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
Why do we need to understand users?
Chapter 2 : Human As The User
5
MMG3033 Human Computer Interaction
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
What is Cognition?
Chapter 2 : Human As The User
6
MMG3033 Human Computer Interaction
What goes on in the mind?
Chapter 2 : Human As The User
7
MMG3033 Human Computer Interaction
Attention Perception and recognition Memory Learning Reading, speaking and listening Problem-solving, planning, reasoning and decision-
making
Most relevant to interaction design are attention, perception and recognition, and memory
Core cognitive aspects
Chapter 2 : Human As The User
8
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
9
MMG3033 Human Computer Interaction
Activity 1
Find the price of a double room at the Holiday Inn in Bradley
First screen
Second screen
Chapter 2 : Human As The User
10
MMG3033 Human Computer Interaction
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
Activity 1
Chapter 2 : Human As The User
11
MMG3033 Human Computer Interaction
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.
Chapter 2 : Human As The User
12
MMG3033 Human Computer Interaction
An example of over-use of graphics
Our Situation
State the bad news
Be clear, don’t try to obscure thesituation
Chapter 2 : Human As The User
13
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
14
MMG3033 Human Computer Interaction
Is color contrast good? Find italian
Chapter 2 : Human As The User
15
MMG3033 Human Computer Interaction
Are borders and white space better? Find french
Chapter 2 : Human As The User
16
MMG3033 Human Computer Interaction
Activity 2
Weller (2004) found people took less time to locate items for information that was grouped using a border (2nd screen) compared with using
color contrast (1st screen) Some argue that too much white space on web
pages is detrimental to search Makes it hard to find information
Do you agree?
Chapter 2 : Human As The User
17
MMG3033 Human Computer Interaction
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?
Chapter 2 : Human As The User
18
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
19
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
20
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
21
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
22
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
23
MMG3033 Human Computer Interaction
The Senses
Human and the 5 senses :
1) Eyes :83%
2) Ear :10%
3) Nose : 4%
4) Haptic : 2%
5) Tongue : 1%
Chapter 2 : Human As The User
24
MMG3033 Human Computer Interaction
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.
Chapter 2 : Human As The User
25
MMG3033 Human Computer Interaction
Human Vision
Light reception takes place in the retina, which contains 2 types of photoreceptors:
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.
Cones Rods
Mediated visual impression Colors degrees of brightness
Distribution over retina Fovea only not in the fovea
Sensitivity for brightness Low High
Chapter 2 : Human As The User
26
MMG3033 Human Computer Interaction
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.
Human Vision
Chapter 2 : Human As The User
27
MMG3033 Human Computer Interaction
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.
Chapter 2 : Human As The User
28
MMG3033 Human Computer Interaction
VisionThis effects are called optical illusion.
http://www.at-bristol.org.uk/Optical/default.htm
Chapter 2 : Human As The User
29
MMG3033 Human Computer Interaction
Gestalt Theories
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.
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.
Chapter 2 : Human As The User
30
MMG3033 Human Computer Interaction
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).
Vision : Visual Field
Chapter 2 : Human As The User
31
MMG3033 Human Computer Interaction
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.
Vision : Color
Chapter 2 : Human As The User
32
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
33
MMG3033 Human Computer Interaction
Color is classified to: Hue Brightness Saturation
Red Green Blue
Vision : Color
Chapter 2 : Human As The User
34
MMG3033 Human Computer Interaction
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.
Color : Hue
Chapter 2 : Human As The User
35
MMG3033 Human Computer Interaction
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 meetit is possible to see strangeeffects – optical illusion. Example : Hermann Grid
Color : Brightness
Chapter 2 : Human As The User
36
MMG3033 Human Computer Interaction
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.
Color : Saturation
Chapter 2 : Human As The User
37
MMG3033 Human Computer Interaction
Color : Saturation
Chapter 2 : Human As The User
38
MMG3033 Human Computer Interaction
Colour : Design
Chapter 2 : Human As The User
39
MMG3033 Human Computer Interaction
Colour : Design
Chapter 2 : Human As The User
40
MMG3033 Human Computer Interaction
Colour : Design
Chapter 2 : Human As The User
41
MMG3033 Human Computer Interaction
Classification of colour in physically and culturallyhave to be determined. Societies classify colourdifferently.
Colour : Design
Chapter 2 : Human As The User
42
MMG3033 Human Computer Interaction
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.
Color : The Implication
Chapter 2 : Human As The User
43
MMG3033 Human Computer Interaction
Font : Design1. 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.
Chapter 2 : Human As The User
44
MMG3033 Human Computer Interaction
Font : Design
Chapter 2 : Human As The User
45
MMG3033 Human Computer Interaction
Font : Types
Chapter 2 : Human As The User
46
MMG3033 Human Computer Interaction
Classic
Traditional
Aggresive
Mode Font
Sometimes the type of fonts can also means expression of human feeling.
Font : Design
Chapter 2 : Human As The User
47
MMG3033 Human Computer Interaction
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
Chapter 2 : Human As The User
48
MMG3033 Human Computer Interaction
This causes responses in the brain and the sensation of hearing.
Hearing
Chapter 2 : Human As The User
49
MMG3033 Human Computer Interaction
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.
Hearing : Sound Waves
Chapter 2 : Human As The User
50
MMG3033 Human Computer Interaction
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.
Hearing : Pitch & Loudness
Chapter 2 : Human As The User
51
MMG3033 Human Computer Interaction
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
The use of the Sound
Chapter 2 : Human As The User
52
MMG3033 Human Computer Interaction
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.
Touch
Chapter 2 : Human As The User
53
MMG3033 Human Computer Interaction
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.
Taste
Chapter 2 : Human As The User
54
MMG3033 Human Computer Interaction
There are 4 basic tastes :
1. Bitter2. Salty3. Sour4. Sweet
Taste
Chapter 2 : Human As The User
55
MMG3033 Human Computer Interaction
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.
Smell
Chapter 2 : Human As The User
56
MMG3033 Human Computer Interaction
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.
Summary
Top Related