Lecture 3
Understanding users
and Social Aspects of
HCI
1
Overview

What is cognition?
• What goes on in our heads when we
carry out our daily activities.




What are users good and bad at?
Mental models
External cognition
Using this understanding to inform
system design
2
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
3
1. Bringing cognitive psychology
knowledge to HCI
What goes on in the mind?
perceiving..
thinking..
remembering..
learning..
planning a meal
imagining a trip
painting
writing
composing
understanding others
talking with others
manipulating others
making decisions
solving problems
daydreaming...
4
Core cognitive aspects

Attention

Perception and recognition

Memory

Reading, speaking and listening


Problem-solving, planning, reasoning and
decision-making, learning
Here we focus on attention, perception &
recognition, & memory
5
Attention



Selecting things to concentrate on from the
mass around us, at a point in time
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
6
Design implications for attention




Make information salient when it needs attending
to
Use techniques that make things stand out like
colour, ordering, spacing, underlining, sequencing
and animation
Avoid cluttering the interface - follow the
google.com example of crisp, simple design
Avoid using too much because the software
allows it
7
An example of over-use of
graphics
8
Perception and recognition


How information is acquired from the
world and transformed into experiences
Obvious implication is to design
representations that are readily
perceivable, e.g.
• Text should be legible
• Icons should be easy to distinguish and
read
9
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?
10
Memory




Involves encoding and recalling knowledge and
acting appropriately
We don’t remember everything - involves filtering
and processing
Context is important in affecting our memory
We recognize things much better than being able to
recall things
• The rise of the GUI over command-based interfaces

Better at remembering images than words
• The use of icons rather than names
11
The problem with the classic
‘72’



George Miller’s theory of how much
information people can remember
People’s immediate memory capacity is very
limited
Many designers have been led to believe that
this is useful finding for interaction design
12
What some designers get up to…





Present only 7 options on a menu
Display only 7 icons on a tool bar
Have no more than 7 bullets in a list
Place only 7 items on a pull down menu
Place only 7 tabs on the top of a website
page
• But this is wrong? Why?
13
Why?





Inappropriate application of the theory
People can scan lists of bullets, tabs, menu
items till they see the one they want
They don’t have to recall them from memory
having only briefly heard or seen them
Sometimes a small number of items is good
design
But it depends on task and available screen
estate
14
More appropriate application of
memory research



File management and retrieval is a real problem
to most users
Research on information retrieval can be usefully
applied
Memory involves 2 processes
• recall-directed: using memorized information
• recognition-based scanning: by searching and
recognition

File management systems should be designed to
optimize both kinds of memory processes
15
File management


Facilitate existing memory strategies
and try to assist users when they get
stuck
Help users encode files in richer ways
• Provide them with ways of saving files using
colour, flagging, image, flexible text, time
stamping, etc
16
Mental models


Users develop an understanding of a
system through learning & using it
Knowledge is often described as a mental
model
• How to use the system (what to do next)
• What to do with unfamiliar systems or
unexpected situations (how the system works)

People make inferences using mental
models of how to carry out tasks
17
Mental models



Craik (1943) described mental models
as internal constructions of some aspect
of the external world enabling
predictions to be made
Involves unconscious and conscious
processes, where images and analogies
are activated
Deep versus shallow models (e.g. how
to drive a car and how it works)
18
Everyday reasoning & mental
models
(a)
You arrive home on a cold winter’s night to a cold
house. How do you get the house to warm up as
quickly as possible? Set the thermostat to be at
its highest or to the desired temperature?
(b) You arrive home starving hungry. You look in the
fridge and find all that is left is an uncooked pizza.
You have an electric oven. Do you warm it up to
375 degrees first and then put it in (as specified
by the instructions) or turn the oven up higher to
try to warm it up quicker?
19
Heating up a room or oven that is
thermostat-controlled


Many people have erroneous mental
models (Kempton, 1996)
Why?
• General valve theory, where ‘more is more’
principle is generalised to different settings
(e.g. gas pedal, gas cooker, tap, radio volume)
• Thermostats based on model of on-off switch
model
20
Heating up a room or oven that is
thermostat-controlled

Same is often true for understanding how
interactive devices and computers work:
• Poor, often incomplete, easily confusable,
based on inappropriate analogies and
superstition (Norman, 1983)
• e.g. frozen cursor/screen - most people will
bash all manner of keys
21
Exercise: ATMs

Write down how an ATM works
• How much money are you allowed to take out?
• What denominations?
• If you went to another machine and tried the same what
would happen?
• What information is on the strip on your card? How is
this used?
• What happens if you enter the wrong number?
• Why are there pauses between the steps of a
transaction? What happens if you try to type during
them?
• Why does the card stay inside the machine?
• Do you count the money? Why?
22
How did you fare?

Your mental model
• How accurate?
• How similar?
• How shallow?


Payne (1991) did a similar study and
found that people frequently resort to
analogies to explain how they work
People’s accounts greatly varied and
were often ad hoc
23
External cognition




Concerned with explaining how we
interact with external representations
(e.g. maps, notes, diagrams)
What are the cognitive benefits and
what processes involved
How they extend our cognition
What computer-based representations
can we develop to help even more?
24
Externalizing to reduce
memory load



Diaries, reminders,calendars, notes, shopping
lists, to-do lists - written to remind us of what to
do
Post-its, piles, marked emails - where placed
indicates priority of what to do
External representations:
• Remind us that we need to do something (e.g. to buy
something for mother’s day)
• Remind us of what to do (e.g. buy a card)
• Remind us when to do something (e.g. send a card by a
certain date)
25
Computational offloading


When a tool is used in conjunction with an
external representation to carry out a
computation (e.g. pen and paper)
Try doing the two sums below (a) in your
head, (b) on a piece of paper and c) with a
calculator.
• 234 x 456 =??
• CCXXXIIII x CCCCXXXXXVI = ???

Which is easiest and why? Both are identical
sums
26
Annotation and cognitive
tracing

Annotation involves modifying existing
representations through making marks
• e.g. crossing off, ticking, underlining

Cognitive tracing involves externally
manipulating items into different orders or
structures
• e.g. playing scrabble, playing cards
27
Design implication

Provide external representations at the
interface that reduce memory load and
facilitate computational offloading
e.g. Information
visualizations have
been designed to
allow people to make
sense and rapid
decisions about
masses of data
28
Informing design based on our
understanding of users


How can we use knowledge about users to
inform system design?
Provide guidance and tools
• Design principles and concepts
• Design rules

Provide analytic tools
• Methods for evaluating usability
29
Mental models & system
design



Notion of mental models has been used as a basis
for conceptual models
Assumption is that if you can understand how
people develop mental models then can help them
develop more appropriate mental models of
system functionality
For example, a design principle is to try to make
systems transparent so people can understand
them better and know what to do
30
The design principle of
transparency
• NOT to be understood as literal
• useful feedback
• easy to understand
• intuitive to use
• clear & easy to follow instructions
• appropriate online help
• context sensitive guidance of
how to proceed when stuck
31
Key points



Cognition involves many processes including
attention, memory, perception and learning
The way an interface is designed can greatly affect
how well users can perceive, attend, learn and
remember how to do their tasks
The conceptual framework of ‘mental models’ and
‘external cognition’ provide ways of understanding
how and why people interact with products, which
can lead to thinking about how to design better
products
32
Social aspects of
HCI:
designing for collaboration
and communication
33
Overview



Conversation with others
Awareness of others
How to support people to be able
to:
• talk and socialise
• work together
• play and learn together
34
Conversation with others

Various mechanisms and ‘rules’ we
follow to hold a conversation
• mutual greetings
A:
B:
C:
A:
C:
A:
C:
B:
Hi there
Hi!
Hi
All right?
Good, How’s it going?
Fine, how are you?
OK
So-so. How’s life treating you?
35
Conversational rules

turn-taking to coordinate conversation
• A: Shall we meet at 8?
• B: Um, can we meet a bit later?
•
•
•
•

A:
B:
A:
B:
Shall we meet at 8?
Wow, look at him?
Yes what a funny hairdo!
Um, can we meet a bit later?
Back channeling to signal to continue
and following
• Uh-uh, umm, ahh
36
More conversational rules

farewell rituals
• Bye then, see you, good-bye, see
you later….

implicit and explicit cues
• e.g. looking at watch, fidgeting
with coat and bags
• explicitly saying “Oh dear, must go,
look at the time, I’m late…”
37
Breakdowns in conversation

When someone says something
that is misunderstood
• Speaker will repeat with emphasis:
A: “this one?”
B: “no, I meant that one!”
• Also use tokens:
Eh? Quoi? Huh? What?
38
What happens in technologymediated conversations?



Do same conversational rules
apply?
Are there more breakdowns?
How do people repair them?
• Phone?
• Email?
• Instant messaging
• SMS texting?
39
Design implications


How to support conversations when
people are ‘at a distance’ from each
other
Many applications have been developed
• Email, videoconferencing, videophones,
computer conferencing, instant messaging,
chatrooms, collaborative virtual
environments, media spaces
• How effective are they?

Do they mimic or extend existing ways
of conversing?
40
Synchronous computer-mediated
communication



Conversations are supported in real-time through
voice and/or typing
Examples include video conferencing and
chatrooms
Benefits
• Can keep more informed of what is going on
• Video conferencing allows everyone to see each other
providing some support for non-verbal communication
• Chatrooms can provide a forum for shy people to talk
more

Problems:
• Video lacks bandwidth so judders and lots of shadows
• Difficult to establish eye contact with images of others
• People can behave badly when behind the mask of an
avatar
41
Will video be a success using
G3 mobile phones?
• Will the judder, sudden jerks and shadows
disappear?
• Will it be possible to establish eye contact
and read lips on such a small image?
• Will people find it socially acceptable to
talk to an image of someone in the palm of
their hands?
The VP-210" VisualPhone: a mobile video phone developed by the japanese
company Kyocera Corporation
Source: http://www.kyocera.co.jp/news/1999/9905/0003-e.asp
42
Asynchronous communication



Communication takes place remotely at different
times
Email, newsgroups, computer conferencing
Benefits include:
•
•
•
•

Read any place any time
Flexible as to how to deal with it
Powerful, can send to many people
Can make saying things easier
Problems include:
•
•
•
•
FLAMING!!!
Spamming
Message overload
False expectations as to when people will reply
43
New communication
technologies



Move beyond trying to support face-toface communication
Provide novel ways of interacting and
talking
Examples include:
•
•
•
•
SMS texting via mobile phones
Online chatting in chatrooms
Collaborative virtual environments
Media spaces
44
Collaborative virtual
environments
The rooftop garden in BowieWorld, a Collaborative Virtual environment
(CVE), supported by Worlds.com. Users take part by “dressing up” as
an avatar. There are 100s of avatars to choose from, including
penguins and real persons. Once an avatar has entered a world they
can explore it and chat to other avatars.
Source: www.worlds.com/bowie
45
VideoWindow system (Bellcore,
1989)



a shared space that allowed people
50 miles apart to carry on a
conversation as if in same room
drinking coffee together
3 x 8 ft ‘picture-window’ between
two sites with video and audio
People did interact via the window
but strange things happened (Kraut,
1990)
46
Findings of how VideoWindow
System was used




Talked constantly about the system
Spoke more to other people in the same
room rather than in other room
When tried to get closer to someone in
other place had opposite effect - went
out of range of camera and microphone
No way of monitoring this
47
Hypermirror (Morikawa and
Maesako, 1998)
• allows people to feel as if they are in
the same virtual place even though in
physically different spaces
People in different
places are superimposed
on the same screen
to make them appear as if
in same space
(woman in white
sweater is in a
different room to
the other three)
48
Creating personal space in
Hypermirror
2) Two in this room are invading
the ‘virtual’ personal space
of the other person by appearing to be
physically on top of them
3) Two in the room move
apart to allow person
in other space more ‘virtual’
personal space
49
Everyone happy
50
Awareness of others


Involves knowing who is around,
what is happening, and who is
talking with whom
Peripheral awareness
• keeping an eye on things happening in
the periphery of vision
• Overhearing and overseeing - allows
tracking of what others are doing
without explicit cues
51
Designing technologies to
support greater awareness


Provide awareness of others who
are in different locations
Media spaces - “extend the world
of desks, chairs, walls and ceilings”
(Harrison et al, 1997)
• Examples: Clearboard, Portholes and
Cruiser
52
Clearboard (Ishii et al, 1993)
• ClearBoard - transparent board
that shows other person’s facial
expression on your board as you
draw
53
Portholes (Xerox PARC)
Regularly updated digitized images of people in their
offices appeared on everyone’s desktop machines
throughout day and night
54
Notification systems


Users notify others as opposed to
being constantly monitored (cf
Portholes)
Provide information about shared
objects and progress of collaborative
tasks
• Examples: Tickertape, Babble
55
Tickertape (Segall and Arnold,
1997)


Tickertape is a scrolling one-line
window, going from left to right
Group name, sender’s name and
text message
56
Babble (IBM, Erickson et al, 1999)
Circle with
marbles
represents
people
taking part in
conversation in
a chatroom.
Those in the
middle
are doing the
most
chatting.
Those towards
the outside
are less
active in
the
conversation.
57
Key points



Social mechanisms, like turn-taking,
conventions, etc., enable us to collaborate
and coordinate our activities
Keeping aware of what others are doing
and letting others know what you are doing
are important aspects of collaborative
working and socialising
Many collaborative technologies
(groupware or CSCW) systems have been
built to support collaboration, especially
communication and awareness
58