SENG 310 Lectures 4,5.
- Personas - Human centered design
Objectives
• By the end of this lecture, you should be able to: – Create a user description by using
personas (user-centered design) – Understand the main perceptual and
cognitive principles that we need to consider when designing human-computer interactions (human-centered design)
2
From our last lecture
• User analysis is iterative • We can gather data using a variety
of techniques • If we are using interviews
– We develop an initial user profile – We conduct the interview – We update the user profile according to
the findings of the interview – How do we represent the user profile?
3
• “What do people do after they collect a lot of data? They analyze it, extract information, and write reports – big, long reports. Such reports are full of incredibly useful information. Shouldn’t this be enough to establish a company-wide detailed understanding of users and their environments and activities?”
• “Raw data isn’t inherently helpful, and neither are most reports”
From “The Persona Lifecycle: Keeping People in Mind Throughout Product Design” by Pruitt and Adlin
4
Personas help make user-centered design possible
“How do you get the people who are designing and making decisions about your product and those who are actually building it to embrace information about users?[…] How do you get them to empathize with user perspectives and take them […] seriously?[…] Enter personas.”
5 From “The Persona Lifecycle: Keeping People in Mind Throughout Product Design” by Pruitt and Adlin
6
Personas
• Hypothetical user • What are personas used for?
– To represent a user (a real one) throughout the design process (functionality as well as usability)
– To guard against designers and programmers making unreasonable assumptions about user needs, desires, skills
– To provide context for discussing differences in design opinions
– To make it possible to consider user skills in a rich, differential way
7
What does a persona look like?
• A specific, detailed, and precise description of a person, with a name and picture, within the context of home and work
• Personas put a face on the user, a memorable, engaging and actionable image that serves as a design aid.
• How many personas? – Cooper: cast of characters and primary
persona
8
An example persona for a banking application
Frances Miller • Sixty-seven year-old Frances is the mother of four
children and the grandmother of twelve. She lives in her own home and has two cats. She likes to knit and do needlework, which she either gives away as presents to her family or donates to the annual sale to raise money for the church she belongs to.
• Every morning she goes for a one hour walk along the lake front when the weather is good. On bad days she’ll go with her neighbor to the local mall where a group of senior citizens “Mall Stroll” each morning before sitting down at one of the restaurants for coffee.
• She is a middle-class retiree living on a fixed income. Her mortgage has been paid off and she has one credit card which she seldom uses. She has been a customer of the bank for 57 years although has never used an automated teller machine (ATM) and never intends to. She has no patience for phone banking and does not own a computer. Every Monday at 10:30 am she will visit her local bank branch to withdraw enough cash for the week. She prefers to talk with Selma the branch manager or with Robert, a CSR who was a high-school friend of her oldest son.
from http://www.agilemodeling.com/artifacts/personas.htm
Example persona for eBook
Mary is an 18 year old first year English major. She has limited computer experience, but regularly uses a PC to contact friends using email or Facebook. Mary reads many novels, often on the bus or in bed. She often writes notes in the margins. Although she really likes the format of paper books, Mary would like to use an eBook device because many digital books are free.
9
10
Why identify a primary persona?
From Alan Cooper: “Design for pleasure”
11
Human-centred design
• Human information processing – Perception – Cognition, decision making – Motor skills – Memory – Attention – Vision
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2004.
12
Human information processing
The Model Human Processor (Card, Moran, and Newell)
13
Memories
Memory properties:
- Encoding: type of things stored
- Size: number of things stored
- Decay time: how long memory lasts
14
Short term sensory store • also called sensory memory • Visual information store (also called iconic
memory)
– Encodes physical features of the image (curvature, length, edges)
– Size ~ 17 [7-17 letters] – Decay ~ 200 ms [70-1000 ms]
Auditory information store (echoic memory)
Encodes physical sounds Size ~ 5 [4.4 – 6.2 letters]
Decay ~ 1500 ms [900-3500 ms]
15
Sensory memory and preattention
• Sensory memory happens in the preattention stage where a stimulus is briefly analyzed to determine if it will receive additional processing.
16
PreAttention to color
Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected in color-- a single feature
Parallel visual search: all items in the display are processed simultaneously-- the search time is independent of the number of distractors
17
PreAttention to form
Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected in form (curvature)
Parallel visual search: all items in the display are processed simultaneously-- the search time is independent of the number of distractors
18
Working memory
• Small capacity: 7±2”chunks” • Fast decay (7 [5-226] seconds) • Maintenance rehearsal fends off
decay • Interference causes faster decay
Design focus • Minimize use of short-term memory,
memorization (George Miller’s “7 + 2” rule)
19
Long-Term Memory
• Holds mass of knowledge – facts, procedures, skills, episodes
• Consists of a network of related chunks where edge in the network is an association
• Fast read, slow write • Infinite capacity, but you may “forget”
because: – cannot find effective retrieval cues – similar associations to other chunks interfere
with retrieval of the target chunk
20
Processors
• Processors have a cycle time – Tp~ 100 ms [50-200 ms] – Tc ~ 70 ms [30-100 ms] – Tm ~ 70 ms [25-170 ms]
• Fastman, Slowman, Middleman
21
Perceptual fusion
– Perceptual fusion: limits of distinguishability of two different perceptual events • Temporal fusion (events happen in same
temporal perceptual processing cycle) • Spatial fusion (e.g. sound / image come
from same direction) • Unimodal fusion (e.g. images in two eyes
fuse to create stereo vision) • Perceptual causality
22
Exercises
• Assume perceptual cycle time = 100ms
• If 20 clicks per second are played for 5 seconds, about how many clicks could a person hear?
• If 30 clicks per second are played for 5 seconds, about how many clicks could a person hear?
23
Exercises • How many frames per second must a video be played to
give illusion of motion?
• In a talking head video, how far off can the audio and video be before a person perceives the video as unsynchronized?
• In a driver’s instrument panel, would a digital or spatial display be faster for gauging speed?
24
Perception
• Many paradigms for visual perception : bottom-up versus top-down
• Marr’s theory of vision: strictly bottom-up, hierachical
• Bottom-up uses features of stimulus (brightness, colour, shape, velocity etc)
• Top-down uses context - temporal, spatial - draws on long term memory
25
Evidence of top-down processing
Visual illusions (Gregory)
(a) and (b) (black hat) show the front and side truly convex view; (d) (white hat) shows the inside of the mask; it appears convex although it is truly hollow; (c) is confusing as part of the hollow inside is seen as convex, combined with the truly convex face.
Top-down knowledge of faces is pitted against bottom-up visual information.
26
What is attention?
• The human information processing system is limited in terms of allocation of resources to process sensory and perceptual information
• The term attention is used to refer to this allocation of processing resources
• “Everyone knows what attention is. It is the taking possession of the mind, in clear and vivid form, of one out of what seem several simultaneously possible objects or trains of thought. It implies withdrawal from some things in order to deal effectively with others” (William James, 1890)
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
28
Attention and perception
• Spotlight metaphor - Spotlight moves serially from one
input channel to another - Visual dominance: easier to attend to
visual channels than auditory channels
29
Say the colour of these words aloud
30
Now do it again
31
Lessons learned
• Secondary characteristics of our displays (e.g. multiple dimensions of the stimulus, or context around the stimulus) must reinforce the message of the display, not interfere with it.
32
Cognitive processing • The cognitive processor uses the long-term
memory (LTM) and the working memory (WM) • Executive system
– solves problems, reasons, and make decisions – allocates attentional resources – schedules actions with motor system
Types of decision making - Skill-based: automatic processing (requires little or no attention) - Rule-based: controlled processing typically made by novices at a task - Knowledge-based: handle unfamiliar or unexpected problems (controlled processing as well)
Attention and cognition Automatic versus controlled processing
• automatic cognitive processes are identified as: – fast
– demand minimal attention
– unavailable to consciousness
– difficult to unlearn
– not affected by the limited capacity of the brain and do not require attention
• processes that are not automatic are known as controlled processes – they are affected by the limited processing capacity
of the brain and by limited attentional resources
34
Divided attention (multitasking)
• We’ll use now the resource metaphor for attention
The resource metaphor regards attention as a limited resource that can be subdivided, under conscious control, among different tasks simultaneously.
• Multitasking performance depends on: – Task structure (visual vs. auditory) – Encoding (spatial/graphical/sound vs words) – Mental Components: perceptual/cognitive vs
motor – Difficulty: easy or well-practiced tasks are easier
to share
– Demo for selective attention
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?
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)
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
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
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
40
Motor Processor
In open-loop control operation mode, it controls movements of body without feedback from the perceptual system – movement composed of discrete micro-
movements – micro-movement lasts about 70ms – cycle time of motor processor about 70ms
41
Motor Processor (cont’d)
• In closed-loop control operation mode, muscle movements (or their effect on the world) are perceived and compared with desired result
• The perceive-recognize-act cycle lasts
42
Exercise #1
Compute the reaction time for a simple matching task A user sits before a computer terminal. Whenever a symbol appears, s/he must press the space bar. What is the time between stimulus and response?
43
Exercise #2
Compute the reaction time for the symbol matching task
• Two symbols appear on the computer terminal. If the second symbol matches the first, the user presses “Y” and presses “N” otherwise. What is the time between the second signal and response?
44
Fitt’s Law • a formal relationship that models speed/accuracy
tradeoffs in rapid, aimed movement (not drawing or writing).
– MT = a + b log2(2A/W + c)
• MT is the movement time • a and b are empirically determined constants, that
are device dependent. c is a constant of 0, 0.5 or 1 • A is the distance (or amplitude) of movement from
start to target center • W is the width of the target (accuracy) • The term log2(2A/W + c) is called the index of
difficulty (ID).
45
Fitts’ Law: Physical interpretation
• Big targets at close distance are acquired faster than small targets at long range;
• ID provides a single combined measure of two main physical properties of movement tasks;
• ID increases by one unit for each doubling of amplitude and halving of width;
46
Applying Fitts’ Law to interface design
• Things done more often should be assigned a larger button.
• Things done more often should be closer to the average position of the user's cursor. The amplitude (A) of a widget allows more control from interface designers compared to the width (W).
• The top, bottom, and sides of the screen are infinitely targetable because of the boundary created by the edges of the screen.
47
Applying Fitts’ Law to interface design
• Explain why pie menus are faster to use than linear popup menus.
easyGestures for Mozilla Firefox
Human Visual Perception
49
Different photoreceptors in the retina: rods and cones
When excited, they produce nerve impulses which travel across the optical nerve
50
Sensors for colour perception in the human eye
Three types of cones having the ability to sense three different (but overlapping) spectral regions.
51
Using colour in interface design
• Colour vision does not simply detect the wavelength composition of light transmitted from the object;
• it analyses an object in relation to its background.
• Choose colours in context, not in isolation. Pastel colours (pale grey or blue) are best for background.
52
Using colour in interface design (cont’d)
• Be careful which colours you use together.
• Red and blue, for example, have very different wavelengths.
• The eye strains to provide sharp focus for both these saturated (pure) colours simultaneously.
53
Can Color Blind Users See Your Site?
• Robert Hess, Microsoft
Some colourful hats As seen by a person with red/green color
deficit
http://www.vischeck.com/examples/
54
For colour impaired users, this might look like
Solution: avoid using colour as the only indication of what to do, or the only cue to process
information
From Robert Hess
Visual perception: Gestalt Theory
• This theory deals with spatial arrangements of shapes
• Gestalt theorists support the thesis that the whole, in perception, is more than the sum of its parts
• Organizing laws of Gestalt Psychology enable us to perceive the patterns of stimuli as meaningful wholes
Gestalt Psychology and perceptual grouping
• The law of proximity states that elements that are closest together will be perceived as belonging together
• The law of similarity states that elements that look similar (shape or colour) will be perceived as part of the same form
• The law of closure states that we often supply missing information to close a figure and separate it from its background
• The law of continuity refers to predictability or simplicity
• The law of symmetry states that regions bounded by symmetrical borders tend to be perceived as coherent figures.
Perceptual Grouping
Law of proximity Law of similarity
Law of closure
Law of continuity
Law of symmetry
Implications of Gestalt Theory to graphic interface design
• Four basic design principles (we’ll come back to them) – Contrast: If elements are not the same, then make
them very different (similarity) – Repetition: repeat visual elements of design (colour,
shape, texture, lines, fonts etc). This strengthens the visual consistency of the page (similarity)
– Alignment: nothing should be placed on a page arbitrarily (continuity, closure, symmetry)
– Proximity: Items relating to each other should be grouped close together; grouping creates visual units; this helps organize information and reduces clutter (proximity)
58
Key points
59
• The Human Information Processing system is conveniently represented by different stages: perception of information (perceptual processor), central processing (cognitive processor), and response to that information (motor processor)
• Perception if achieved via a combination of top-down and bottom-up processing
• Cognition involves decision making processes. External cognition involves interaction with external data representations
• The motor processor generates the response to a stimulus: Fitz law
• Memories store data involved in information processing • Attention is a thread of control that governs our conscious
processing. Two metaphors: reservoir and spotlight • Visual perception specifics: colour perception, Gestalt
theory