Design 4: Human Capabilities
& Design Patterns
Objectives
By the end of this class, you will be able
to…
• Explain several design guidelines based
on human capabilities
• Apply the guidelines to design & critique
user interfaces
2
1. Bringing cognitive
What goes on in the mind?
psychology knowledge to HCI
perceiving..
thinking..
remembering..
learning..
planning a meal
imagining a trip
painting
writing
composing
3
3
understanding others
talking with others
manipulating others
making decisions
solving problems
daydreaming...
Core cognitive aspects
• Attention
• Perception and recognition
• Memory
• Reading, speaking and listening
• Problem-solving, planning, reasoning and
decision-making, learning
Here we focus on the first 3, plus a bit about
reasoning / problem solving
4
Attention
• Selecting things to concentrate on
• Can be focused or divided
• Spotlight model: visual attention is like a
spotlight directed towards targets
5
Attention
• We are more likely to notice something if
– We are attending to it
– It is salient (bright, loud, or otherwise noticeable)
• We have a limited ability to keep track of
events (limited number of spotlights)
6
Change Blindness
• We can LOOK but not SEE
– E.g. drivers running into pedestrians
• To see something, we need to attend to
it
• A ‘mud splash’ or other disruption can
make changes especially hard to see
Attention: Design implications
• Make information stand out when it needs
attending to or is important
– Use colour, ordering, spacing, underlining,
sequencing and animation
• Avoid cluttering the interface - follow
google.com example of crisp, simple design
– Group features together
– Show icons for group headings and commonly
used functions
– Allow users to customize
8
Too many icons
Over-use of graphics
10
Clean, simple design
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
– Information should be organized
• We discussed perception quite a lot last
lecture (e.g. colour perception,
12 grouping)
Perceptual Grouping
• We group objects that are…
Close to each
other (proximity)
13
Similar
Connected
Memory
• Involves encoding and recalling knowledge
– Short term and long term
– We don’t remember everything - involves filtering and
processing
• Context affects memory
• Recognition easier than recall
– Benefit of GUI over command-based interfaces
• We are better at remembering…
– Images rather than words
– Familiar things
14
Example: Setting a Font
• Type in font name:
– Hard to remember
Menus gone crazy!
16
Better choice
Memory Excercise
• Int heb ack oft heb oxi sat oy
• In the back of the box is a toy
18
Classic ‘72’
• George Miller’s theory of how much
information people can remember
– 72 chunks of information (e.g. 7 digit
phone numbers)
– Short-term memory
• People’s immediate memory capacity is
very limited
• Useful finding for interaction design?
19
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?
20
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
• Often a small number of items is good design
• But it depends on task and available screen
estate
21
More appropriate application
of memory research
• File management and retrieval is a real
problem to most users
• Memory involves 2 processes
– recall-directed and recognition-based scanning
• File management systems should be
designed to optimize both kinds of memory
processes
22
Properties / functions of a
good file browser?
• Facilitate existing memory strategies and try
to assist users when they get stuck
– Flexible search (partial name, date, type, suggest
alternates…)
– Enable file browsing
• Help users encode files in richer ways
– Provide them with ways of saving files using
colour, flagging, image, flexible text, time
stamping, etc
23
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
24
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?
25
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
26
User & Design Models
• User model – a user’s conceptual
model
• Design model – a designer’s
conceptual model
• How is the design model conveyed to
the user?
– Through the system image (interface)
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
28
Make the system model
visible through the interface.
Why?
• Experiment by Halasz & Moran:
– Task: solve problems using a ‘stack calculator’
– 2 groups of participants: both groups were taught
step-by-step procedures
– One group was also given a model of how the
calculator works
– Both groups did well on routine problems, but the
group with the model did better on novel problems
29
External cognition
• Concerned with explaining how we interact
with external representations (e.g. maps,
notes, diagrams)
• Q: How do maps / notes / diagrams help us?
Why not just keep them in our head? Think of
some examples.
30
Externalizing to reduce
memory load
• Diaries, reminders, calendars, notes, shopping
lists, to-do lists, Post-its, piles, marked emails
• Location may indicate priority & type of reminder
• External representations:
– Remind us that we need to do something (e.g. to buy
something for Father’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)
31
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
32
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
33
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
» Offload cognitive operations
to the perceptual system
34
Interface Design Patterns
• Many interface problems crop up again
and again
• Use existing patterns when possible
– E.g.
http://www.cs.helsinki.fi/u/salaakso/pattern
s/index.html
Key Points
• When designing interfaces…
– Support recognition rather than recall
– Make important items stand out from the rest
– Make system functionality transparent, via the
interface
– Represent information visually so the user does
not need to remember it or think about it, they can
just see it
– Re-use existing interface design patterns
36