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