Human Computer Interaction

Design

2. Understanding users

1
 Before we start…

• What is a good user interface? (Or what makes an

interface good or bad?)
• Give three reasons why it is difficult to design
good user interfaces.
• You’re designing information presentation for an
online shopping application. Name and briefly
explain one human factor to consider. Describe
an appropriate technique which may be
implemented to accommodate this human factor.
2
 Before we start…

• Why is this not a good user interface

3
 Before we start…

• The effect of a poor interface

4
 Agenda

1. Introduction
2. Physical abilities
3. Cognitive processes
4. Personality differences
5. Cultural diversity
6. Users with disabilities
7. Older adult users
8. Children
9. 4 to 9 (see Shneiderman et. al., 2018, Chapter 2).
5
 Part I

1. Introduction
2. Physical abilities
3. Cognitive processes
4. Personality differences

6
 References

◼ References
1. Rogers, Preece & Sharp (2015). Interaction Design:
Beyond Human-Computer Interaction. John Wiley
o Chapter 3
2. Shneiderman, Plaisant, Cohen, Jacobs & Elmqvist (2018).
Designing the User Interface: Strategies for Effective
Human-Computer Interaction. Pearson
o Chapter 2
3. Reading:
a. Chueng et. al. (2017)
b. Hui and Sherratt (2017

7
 Introduction
• Good design requires an understanding:
– Human
– Use and context
– Technology
– Computer

8
 Introduction

◼ The primary goal of User Interface Design (UID) is

to produce interfaces which address the needs of
all users
◼ The huge market for interactive systems has
increased the need for designs which are
universally usable
◼ Interaction involves:
1. Physical processes
2. Cognitive processes
3. Emotions
4. Context
9
 Introduction

◼ To design good interfaces requires understanding

1. Physical abilities
2. Cognitive abilities
3. Personality differences
4. Cultural and international diversity

10
 -The human body for interaction
-(Physical Abilities).
◼ The human body (for input and output)
1. Vision
2. Hearing
3. Touch
4. Taste
5. Smell
6. Body movement
7. Body temperature
8. Body smell (odour)
◼ Note: what is the difference between 1 to 5 and 6 to 8

11
 The human body for interaction

(Hui & Sherratt, 2017)

12
 Differences in Physical abilities

◼ The study of human features: anthropometry

(the study of the measurements and proportions
of the of the human body.
◼ Various human features have been documented
for various populations, e.g.
1. Gender
2. Age group
3. Race
4. Weight, height
5. Head, mouth, nose, shoulder, hand, finger, legs, etc.

13
 Differences in Physical abilities

◼ There is no “average user”; each person is

different.
o Either make compromise to cater for all users or
create multiple versions of the same interface.
o Example: design of cellphones keyboard and screen
brightness
o What is the design implication?
◼ Give an example of “compromise” or “multiple
version” in design.

14
 Differences in Physical abilities
◼ Static physical measure are not enough; measures of
dynamic actions are also necessary
◼ Work involves cognitive and physical processes
◼ Physical abilities can affect cognitive processes and
our senses; e.g.,
o Vision can affect motion sensitivity and, thereby, response
time to stimuli
◼ Other senses are also important
o Touch: keyboard and touch screen sensitivity
o Hearing: audio cues
◼ Physical abilities, therefore, affect elements of
interactive systems.
15
 -Cognitive Abilities

◼ An understanding of cognitive abilities is the

foundation User Interface Design.

◼ Cognition: involves how we gain, organize and

use (i.e., rational rather emotional)

◼ An understanding of cognitive abilities is the

foundation User Interface Design
o Cognitive processes influence user interface design

16
 What is cognition?
• There are many different kinds of cognition, such as thinking, remembering,
learning, daydreaming, decision making, seeing, reading, writing, and talking.

• Norman (1993) distinguishes between two general modes: experiential and

reflective cognition.
• Kahneman (2011) describes them in terms of fast and slow thinking.

• The former is a state of mind in which we perceive, act, and react to events around us
intuitively and effortlessly. It requires reaching a certain level of expertise & engagement.

Examples include driving a car, reading a book, having a conversation, & playing a video game

• In contrast, reflective cognition and slow thinking involve mental effort, attention,
judgment, and decision making. This kind of cognition is what leads to new ideas and
creativity.
Examples include designing, learning, and writing a book.

• Both modes are essential for everyday life. It is useful to think of how the mind works in
this way as it provides a basis from which to consider how each can be supported by
different kinds of technologies.
17
 Cognitive Abilities
◼ Cognitive processes are (mental processes), including:
1. Attention : selecting things to concentrate on (AudioVisual)
2. Perception and recognition: how information is acquired
3. Memory: recalling various kinds of knowledge for responses
4. Learning: selecting applicable learning interfaces, GUIs &direct manipulations
5. Problem solving and reasoning
6. Decision making
7. Language, communication and comprehension
8. Search
◼ Exercise: how many cognitive processes are involved
reading WhatsApp message?
◼ In general, cognition involves more than one process.

18
 Design Implications for Attention
• Make information salient when it needs attending
to at a given stage of a task.
– Use techniques like animated graphics, color,
underlining, ordering of items, sequencing of different
information, and spacing of items to achieve this.
• Avoid cluttering the interface with too much
information.
– This especially applies to the use of color, sound, and
graphics:
– it is tempting to use lots, resulting in a mishmash of
media that is distracting and annoying rather than
helping the user attend to relevant information.
• Search engines and form fill-ins that have simple
and clean interfaces are easier to use.
19
 Design Implications for Perception
Representations of information need to be designed to be perceptible and
recognizable across different media:
• Icons and other graphical representations should enable users to readily
distinguish their meaning.
• Bordering and spacing are effective visual ways of grouping information
that makes it easier to perceive and locate items.
• Sounds should be audible and distinguishable so users understand what
they represent.
• Speech output should enable users to distinguish between the set of
spoken words and also be able to understand their meaning.
• Text should be legible and distinguishable from the background
– (e.g. it is okay to use yellow text on a black or blue background but not on a
white or green background).
• Tactile feedback used in virtual environments should allow users to
recognize the meaning of the various touch sensations being emulated.
– The feedback should be distinguishable so that, for example, the sensation
of squeezing is represented in a tactile form that is different from the
sensation of pushing.

20
 Design Implications for Memory
• Do not 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
– (e.g. files, emails, images) to help them access them
again easily, through the use of categories, color,
tagging, time stamping, icons,etc.

21
 Design Implications Learning
• Design interfaces that encourage exploration.

• Design interfaces that constrain and guide

users to select appropriate actions when
initially learning.
– E.g GUIs and Direct manipulations.

• Dynamically link concrete representations

and abstract concepts to facilitate the
learning of complex material.

22
 Cognition and human senses
◼ Cognition involves human senses, so our sense
are important for interaction, e.g.,

o Hui & Sterratt (2017) 23

 Cognition and human senses
◼ How we make ‘sense’ of the world around us….
o … Inputs (stimuli), process and output (response)

1. Sensing: physical reception (stimuli is received)

2. Perceiving: processing and interpretation
3. Response
◼ The von Neumann machine
24
 Cognition and human senses
◼ Information processing
o Information input and output (visual, auditory,
haptic, movement, etc.)

◼ Information stored in memory

o Sensory memory, short-term memory, long-term
memory

◼ Information processed and used

o Reasoning, problems solving, skill, error

◼ Emotion influence human abilities

25
 Cognition and human senses

◼ Each sense has:

1. A tool (eye, ear, skin, etc.)
2. A process
3. Limitation
◼ There is the added complexity of individual
differences in sensory perception. (functionality)
◼ Implications for design understand the tool:
1. How it works, strengths and limitations
2. Design for optimum interaction and universal access

26
 Cognition and human senses
◼ Individual differences

27
 Cognitive processes
◼ The following are discussed:
1. Attention
2. Perception and recognition
3. Memory
4. Learning
◼ Your own work
1. Problem solving and reasoning
2. Decision making
3. Language, communication and comprehension
4. Search
◼ Most relevant for interaction design are
attention and memory, so we shall elaborate
more on these two cognitive processes.
28
 Cognitive Processes: Attention
◼ Attention:
o Selecting from things to concentrate on at a point in time
from a variety of stimuli
o Allows us to focus on information that is relevant to what
we are doing
o Can be focused or divided, depending on the competing
stimuli
o Competing stimuli limit our ability to keep track of all
events
o Involves audio and/or visual senses
o Influenced by goals and available information
o Information at the interface should be structured to
capture users’ attention
✓ Layout, colour, sound, animation, etc.
29
 Cognitive Processes: Attention
◼ Attention: find the price of a double room at the
Holiday Inn in Bradley

30
 Cognitive Processes: Attention
◼ Attention: find the price for a double room at the
Quality Inn in Columbia

31
 Cognitive Processes: Attention
◼ Multitasking and attention
◼ Does multitasking affect attention? How? What is
the implication for design?
o Read Chueng et. al. (2017)

32
 Cognitive Processes: Attention
◼ What’s wrong?

33
 Cognitive Processes: Attention
◼ What’s wrong?

34
 Cognitive Processes: Perception
◼ Perception
o This is how information is acquired from the world and
transformed into experiences (see slide #
o Obvious implication is to design: reduce perceptual
load
o Use representations that are quick to perceive e.g.,
legible text, easy to distinguish icons
o Relies on context, e.g., past experiences, motivation
and development

35
 Cognitive Processes: Perception
◼ Perception: questions to ask
o What are the perceptual skills of the target users?
o Do the symbols/icons make sense to the target users?
o Do the symbols/icons/colours convey the same
nuances/meanings to all the target users?
◼ Avoid perceptual overload
o Examples

36
 Cognitive Processes: Perception
◼ Perception: avoid perceptual overload

o How easy is it to name the colours below

37
 Cognitive Processes: Perception

• Perception: which is easiest to read?

What is the time? What is the time?

What is the time? What is the time?

What is the time?

 Cognitive Processes: Memory
◼ Memory first encodes and then retrieves
knowledge
o There are three types of memory function:
1. Sensory memories
Attention
2. Short-term memory or working memory
Rehearsal
3. Long-term memory

o Selection of stimuli depends on arousal

o Attention, context, etc. affect encoding and what we
remember
39
 Cognitive Processes: Memory
◼ Memory
o Sensory memory
1. Buffers for stimuli received through senses (e.g., iconic
memory: visual stimuli)
2. Continuously overwritten
o Short term memory holds information that is actively
being used
1. Rapid access: 70ms
2. Short term storage (volatile): 200ms (10-20 sec decay time)
3. Limited capacity - 7± 2 chunks (Miller’s law)
4. Recency effect
5. Maintained with rehearsal, chunking
6. Called “Working memory” these days
40
 Cognitive Processes: Memory
◼ Memory
o Long term memory: stores what we “know”
1. Slow access
2. Slow decay
3. Unlimited capacity
4. Organized by events, experiences, facts, skills acquired over
the years
5. Storage and retrieval improved by chunking (7± 2 chunks)
and familiarity
6. Decay: forgetting, interference
o Important consideration: recognition over recall

41
 Questions for Long-term memory
• Are the metaphors used intuitive?
• Does the interface offer support to remember things?
• Does the interface offer different levels of support for remembering?
• Does the interface offer different ways of retrieving knowledge?

• Erickson (1990) suggests a three-step process for choosing a good interface metaphor.
• The first step is to understand what the system will do, i.e. identifying the functional requirements.
Developing partial conceptual models and trying them out may be part of the process.
• The second step is to understand which bits of the product are likely to cause users problems, i.e. which
tasks or subtasks cause problems, are complicated, or are critical. A metaphor is only a partial mapping
between the software and the real thing upon which the metaphor is based. Understanding areas in
which users are likely to have difficulties means that the metaphor can be chosen to support those
aspects.
• The third step is to generate metaphors. Looking for metaphors in the users’ description of the tasks is a
good starting point. Also, any metaphors used in the application domain with which the users may be
familiar may be suitable.

42
 Vision
◼ Eye receives stimuli (as light) from object
◼ Stimuli is converted to electric signals and
transmitted to the brain
◼ Perception depends on:
1. Visual angle: how much “view” the object occupies.
Humans can only see objects in their view (within
lateral angle and vertical angle)
2. Visual acuity: ability to see details
3. Brightness (which is affected by levels of light)
4. Colour
• Eyes respond differently to colours
• Blue acuity is lowest
• 8% males and 1% females colour blind
5. Context is used to resolve ambiguity
43
 Vision

5. Context is used to resolve ambiguity

44
 Vision

Question:
1. Discuss any three implications of sight for
interface design

45
 Hearing

◼ Provides information about environment:

◼ Physical apparatus: ear
o outer ear, middle ear, inner ear
◼ Sound variations
1. Pitch: sound frequency
2. Loudness: amplitude
3. Timbre: type or quality
◼ Humans can hear frequencies from 20Hz to
15kHz
o Less accurate distinguishing high frequencies than
low
46
 Hearing

◼ Discuss any three implications of hearing

for user interface design
◼ Compare the effects of visual and auditory
interactions on cognitive load. What is the
implication for interface design?

47
 Touch
◼ Provides important feedback about environment
◼ May be key sense for someone who is visually impaired
◼ Stimulus received by receptors for heat and cold, pain,
pressure in the skin
◼ Some areas (e.g. fingers) more sensitive than others
◼ Kinesthesis (i.e., perception or detection of body
movement) is an important aspect of touch
o Affects comfort and performance

48
 Movement
◼ Important issue: time taken to respond to stimulus
o Reaction time + Movement time
◼ Reaction time depends on type of stimulus
1. visual ~ 200ms
2. auditory ~ 150ms
3. pain ~ 700ms
◼ What is the implication for design?
◼ We will discuss Fitt’s law

49
 Taste
• Not much work has gone on in this area taste or gustatory
interaction

– Digital taste interface: stimulates sensation of taste through

electrical and thermal simulation (Obrits et. al. 2017)
– Also see Narumi et. al. (2011)

51
 Smell

• Not much work has gone on in this area smell or

olfactory interaction

– Scentee balloon attached to a phone; releases scents as air

freshener (Obrits et. al., 2017)

52
 Summary
◼ End of Part I: Physical abilities; cognitive abilities
1. A good design requires an understanding of the
users, their tasks and context
2. Interaction involves physical and cognitive
processes. Therefore, there is a need to understand
physical and cognitive abilities of uses
3. Cognitive processes involve human senses; Vision:
hearing and touch, their strengths and limitations,
and implications for research were discussed
4. Cognitive processes discussed include,
i. Attention
ii. Perception and recognition
iii. Memory

54
 Summary
◼ End of Part I: Physical abilities; cognitive
abilities
o To do
a. Articles to read
b. Chueng et. al. (2017)
c. Hui and Sherratt (2017
o Shneiderman et. al. (2018) to complete
a. Personality differences
b. Cultural diversity
c. Users with disabilities
d. Older adult users
e. Children
f. Read the two journal articles provided
55
Questions and Feedback

?
56
End of Session

57