Scientific Underpinnings of Usability Engineering

R. G. Bias | School of Information | UTA 5.424 | Phone: 512 471 7046 | [email protected]

i

1

Scientific Underpinnings of Usability Engineering

Intro Usability

Week 4


i

2

Objectives

After this class you will be able to (it is my hope!):

• Describe some eye physiology• Explain how the visual system works (somewhat)• Identify visual cues to depth• Explain some aspects of the psychology of reading• Explain how perceptual and cognitive psychology

influence HCI designs• Have an excellent memory for “VAM”• Discuss the importance of designing systems to match

the human.


i

3

Designing Stuff

• In Week 1, I asked the question “What would a system look like if we were designing it for dogs?”– Wouldn’t be a lot of text.– Wouldn’t require a lot of dexterity.– Might code information in smells and tastes.

• But we’re designing systems for humans (usually!). So it will behoove us to know something about how human beings take in and process information.


i

4

Whole point . . .

• Let’s design systems to fit people instead of the other way around.


i

5

Human Information Processing

• How do human beings take in and process information?– Sensory psychology – how humans transform physical

energy (e.g., light and sound waves) into sensory signals to and in the brain.

– Perceptual psychology – how humans interpret these sensory signals as perceptions.

– Cognitive psychology – how humans think about these perceptions, and previous experiences, and their own mental creations, and . . .

– Psycholinguistics – The psychology of language -- what goes on between the time I have a thought and you have the same (or similar!) thought, whether I say it or write it.


i

6

Eye Physiology


i

7

Eye Muscles


i

8

Visual Field


i

9

Retinal Physiology


i

10

Distribution of Rods and Cones


i

11

Visible Spectrum


i

12

Visual Sensitivity


i

13

Neural Pathways


i

14

Aftereffect


i

15

Ambiguous Figure


i

16

Sensation/Perception

• POINT: Perceptions are made up of more than just a collection of sensations!

• OTHER things influence our perceptions, e.g.,– Our experiences– Our biases– The context– Our current emotional state– Etc.

• So, what does that have to say about designing human-computer interfaces???


i

17

Perceptual Psy – Color Vision

• Color perception – 3 types of cones (RGB)


i

18

Perceptual Psy -- Depth

• Different visual cues to depth– Oculomotor vs. Visual

• Oculomotor – Lens accommodation and extraocular muscle convergence are “read” by the brain

• Visual: Binocular vs. Monocular– Binocular – Stereopsis (retinal disparity)– Monocular (next screen)

» Static» Motion parallax


i

19

More Depth Cues

• Monocular– Static

• Interposition• Size• Perspective

– Linear perspective– Texture gradient– Aerial perspective– Shading

– Motion parallax


i

20

Monocular Cues -- Interposition


i

21

Monocular Cues -- Size


i

22


i

23


i

24

Monocular Cues – Linear Perspective


i

25

Monocular Cues – Texture Gradient


i

26

Sooooo . . .

The grass really

IS

greener on the other side of the fence!!!


i

27

Monocular Cues – Aerial Perspective


i

28

Monocular Cues -- Shading


i

29

Monocular Cues – Motion Parallax


i

30

More visual perception

• Illusions – and what they tell us about vision• Ponzo illusion• Muller-Lyer illusion


i

31

Ponzo Illusion


i

32

Muller-Lyer Illusion


i

33

Psycholinguistics

• The psychology of language.

• What goes on from the time I get an idea until you have the same idea,– Whether I speak my idea (speech

production, auditory science, speech perception)

– Or write my idea (motor movements, visual system, reading)


i

34

The Psychology of Reading

• Except for fairly rare cases of “phonetic symbolism” (onomatopoeia) words have no inherent meaning.– (And rarer cases of “orthographic

symbolism”!!)

• So, READING is the interpreting of words, the acts that go on to impose meaning, from within, on external visual stimuli.


i

35

Some facts about reading

• Eyes of the mature reader move rhythmically across the page (from left to right).

• Eye movement consists of fixations, saccades, regressions, and return sweeps.

• No information is taken in during saccades (10-25 msec), regressions (same duration), or return sweeps (40 msec).

• During fixation (250 msec) a visual pattern is reflected onto the retina.

• Span of perception = amount of print seen during a single fixation.

• Span of perception = 12 letter spaces for good readers, 6 for poor readers.


i

36

More facts

• Span of recognition – 1.21 words for senior high, 1.33 words for college readers.

• So, 7 to 8 fixations per line of print.• As content gets tougher, duration of fixations, not number,

changes (increases).• Regressive movements aren’t systematic. Used when attention

is faltering.• College readers have 1 regressive movement per 3 or 4 lines of

print. Immature readers have 3 or 4 regressions per line.


i

37

Iconic Memory

• Remember in Week 1 I mentioned a two-stage memory process – STM and LTM.

• A third stage, Iconic Memory: The unidentified, “pre-categorical” pattern of lines, curves and angles; formed in about 100 msec.

• Icon can hold up to 20 letter spaces.• Pattern recognition routines are applied to the lines, curves.• It takes about 10 – 20 msec to read each letter out of the iconic

memory.• Neural signal takes about 30 msec to go from the retina to the

visual cortex.


i

38

Iconic Memory (cont’d.)

• At some point, thanks to pattern recognition routines, letters are read out.

• Letters are transformed into abstract phonemic representations.• The abstract phonemes are used to search the mental lexicon.• About 300 msec after the eye has fallen upon the page, the first

word is “understood,” i.e., placed in Primary Memory (STM, Working Memory).

• Syntactic and semantic rules are applied to gain the meaning of the sentence.


i

39

How do you know, Randolph?

• Psycholinguists employ a variety of methods to acquire this data about human behavior.

• One question: Why do we think readers routinely transform the visual representation into a phonological representation?– Cognitive economy – all (healthy) new readers

come to the task as skilled hearers.– “I thought you said something about data?”


i

40

Rubenstein et al. (1971)

• Used a lexical decision task (word/nonword?).• Two types of nonwords – homophonous (with real

words), like burd and nonhomophonous like rolt. Equally “wordlike.”

• Longer latencies for burd.• Similarly, longer for real homophones like meat.• Pointed to “false matches” in the mental lexicon.


i

41

More Data

• McCusker et al. (1977) proofreading experiment– Homophonous typos (e.g., furst) went undetected

more often than nonhomophonous typos (e.g., farst).

• Gough and Cosky (1977) used the Stroop task.– Nonwords homophonous with color words (e.g,. bloo) led to

more interference than control words (e.g., blot) or nonwords nonhomophonous with color words (e.g., blop).

• I found readers took longer to process words with irregular “spelling-to-sound rules” (e.g., pint) than words with regular rules (e.g., hint) (Bias, 1978).


i

42

The Point

• The reasons for this somewhat esoteric discourse on the psychology of reading are:– To communicate the complexity that is

human information processing– The illustrate the ways scientists go about

answering questions about info processing– To sensitize you to the sorts of things

known about human behavior


i

43

In week 1, we were talking about Perception and Cognition

•What do we know about humans?– In the physical realm: Anthropometry.– These days we’re more interested in the cognitive realm.– Question: Can you remember a 30-digit number?– I say that you can, right now, without practice, seeing it

only once, for 1 second, with no time to rehearse.


i

44

3333333333333333333333333333333


i

45

Experiment 1

Instead of numbers, I’ll present CVC (consonant-vowel-consonant) strings -- like “NEH”.

10 CVCs, one at a time.

Presented visually.

Don’t have to remember them in order.

Pencils down.

Ready?


i

46

BOVNAZTOLRIJDIHRENWUKCAQGOCMEB


i

47

BOVNAZTOLRIJDIHRENWUKCAQGOCMEB


i

48

Experiment 2

•Now, 10 new CVCs. •Same task -- recall them.•This time, after we read the 10th item, we’ll all count backwards from 100 by 3s, aloud, together.•Then when I say “Go,” write down as many of the 10 CVCs as you can.•Pencils down.•Ready?


i

49

VAMLUNXOPREHWIVCITJEGKUCZOBYAD


i

50

VAMLUNXOPREHWIVCITJEGKUCZOBYAD


i

51

Experiment 3

• Same as Experiment 2.

• Yet 10 more CVCs.

• Backwards counting.

• Don’t have to recall them in order.

• Pencils down.

• Ready?


i

52

GEPTIV

WOHLUPMAZSEXKOLRUCNIDBIR


i

53

GEPTIV

WOHLUPMAZSEXKOLRUCNIDBIR


i

54

So?

• So, the answer to “Can you remember a 30-digit number?”, is . . . It depends. On what?– Whether you hear or see the number.– Whether the number is masked.– Whether you have time to rehearse.– Whether you can “chunk” the numbers.– If there are any intervening tasks.– How meaningful the number is.– WHAT the number is.

So, what’s a usable interface?It depends.


i

55

SO WHAT?

• Given that we’re so all-fired complex, what does this have to say about how we design computer interfaces?– Depth cues.– Color perception.– Effects of context on perception.– What’s easy to read? – Recognition vs. recall.


i

56

People Differ• Some of your

users/visitors may be:– Non-native English

speakers– Left handed– Capricorns– Republicans– Heterosexuals– Poor visual

processors– In a hurry– Alabamans

– In a public library– Blind– Mostly blind– Color blind– Geniuses– Drunk– Visitors to your earlier

site– First-time web visitors!– On a subway– Using an iPhone


i

57

Situations Differ

• Cognitive Set – Context influences perception. – A series of events can “set” a person to

perceive things a certain way.


i

58

Guess what frequent error was made on this form, on an IBM Service site:

• Name: ___________________• Street Address: ___________________• City: ___________________• State/ZIP: ___________________• County: ___________________


i

59

Design of Everyday Things• It ain’t rocket science.

• You’ve already read the book.

• Let me hit just the high points from my point of view

• While I’m presenting this, see if you can characterize your good and bad designs that you’ve discovered this week in Norman’s terms.


i

60

Chapter 1

• The PsychoPATHOLOGY of everyday things

• Assumption: We blame ourselves for errors, but the real culprit is faulty design.

• Assumption: There’s nothing special about computers. They have the same sorts of design problems as simpler, everyday things.


i

61

Good Design

• Well designed objects . . .– are easy for the mind to understand– contain visible cues to their operation

• Poorly designed objects . . .– provide no clues, or– provide false clues.


i

62

Natural Signals

• Natural signals lead to natural design.

• A metal plate “naturally” is to be pushed.

• Visible hinges “naturally” indicate attachment, and that the other side swings open. (And swings open TOWARD me?)


i

63

Mapping

• Mapping is a relationship between two things (e.g., between what you want to do and what appears possible).

• Good design allows for a clear (visible) mapping between . . .– intended actions and– actual operations.

• Now -- think of what this might mean in a web site.


i

64

Good Design• Principles of good design

– the importance of visibility– appropriate clues– feedback of ones actions.

• Just so you’ll know -- others have proposed OTHER principles of good design. Go check out the web site of Bruce Tognazzini:

http://www.asktog.com/basics/firstPrinciples.html


i

65

Affordance• Affordance is the perceived and actual properties of a

thing.– Primarily those fundamental properties that determine

how a thing could possibly be used.– “Affords” means, basically, “is for.”– A chair affords support, therefore affords sitting.

• Affordances provide strong clues to things’ operations.• When affordances are taken advantage of, the user

knows what to do just by looking.– No label, picture, or instruction (“Push”) is required.

• - When simple things need pictures, labels, or instructions, the design has failed.


i

66

The Paradox of Technology

– Added functionality generally comes along at the price of added complexity.

– The same technology that simplifies life by providing more functions also complicates life by making the device harder to learn and use.

– The Paradox of Technology should never be used as an excuse for poor design.

– Added complexity cannot be avoided when functions are added, but with clever design they can be minimized.


i

67

Chapter 2 -- Psy of Everyday Actions

• Norman’s credo on errors -- if an error is possible, someone will make it.

• The designer must design so as to:– minimize the chance of errors in the first

place– minimize the effects of an error– make errors easy to detect– make errors reversible, if possible.


i

68

Models• Mental Models = our conceptual models of the way . . .

– objects work

– events take place

– people behave• Mental models result from our tendency to form

explanation of things.• Models are essential in helping us . . .

– understand our experiences

– predict the outcomes of our actions

– handle unexpected occurrences.


i

69

Models (cont’d.)

• We base our models on whatever knowledge we have:– real or imaginary– naïve or sophisticated– even fragmentary evidence.

• Everyone forms theories (mental models) to explain what they have observed.

• In the absence of feedback to the contrary, people are free to let their imaginations run free.

• More on models in Chapter 3.


i

70

7 Stages of Action

• On p. 47 is a series of four figures that illustrate Norman’s view of the structure of action.

• Actions have two major aspects:

1. Doing something (execution)

2. Checking (evaluation)


i

71

Chapter 3 - Knowledge in the Head and in the World

• Not all knowledge required for precise behavior must be in the head. It can be distributed:– partly in the head– partly in the world– partly in the constraints of the world.


i

72

Constraints• The power of constraints -- the “memory” for epic poetry

is found to be mostly reconstruction, with the aid of the constraints of rhyme, meter, etc.

• We use constraints to simplify what we must remember.• For example, putting mechanical parts together.

– Some are constrained by what will and will not fit together.

– Also cultural constraints -- screws tighten clockwise.


i

73

Memory

• . . . is knowledge in the head.

• Think of all you can remember. Phone numbers, postal codes, passwords, SSN, birthdays, etc., etc.

• It’s tough!– So, we put memory in the world.

(Daytimers. Smart phones. Address books. Stickies.)


i

74

Tradeoff . . .

• . . . between info in the world and in the head.– Knowledge in the world acts as its own

reminder.– Knowledge in the head is efficient. (You can

travel light.)– Knowledge in the world is easier (no learn

time), but often difficult to use. Relies heavily on the physical presence of info.

• See Fig. 3.6, p. 79.


i

75

Ch. 4 -- Knowing what to do

• When we encounter a novel object, either – We’ve dealt with something similar before,

and we transfer old knowledge, or– We get instruction.

• Thus, information in the head.


i

76

Design• How can the design of an object (NOTE:

info in the world) signal the appropriate actions?– Natural (physical) constraints– Affordances, that convey messages about the

item’s possible uses, actions, and functions

• “The thoughtful uses of affordances and constraints together in design lets a user determine readily the proper course of action even in a novel situation.”


i

77

Ch. 5 - To err is human

• Errors come in several forms– Slips -- result from automatic behavior,

when subconscious actions get waylaid en route (“performance errors”)

– Mistakes -- result from conscious deliberations (“competence errors”)


i

78

Ch. 6 -- The Design Challenge

• Norman talks about what forces work against evolutionary, or natural design (pp. 142-143).– The demands of time (quick product cycles)– The pressure to be distinctive (related to the

curse of individuality)


i

79

Pitfalls

• Three reasons why designers go astray:

1. Putting aesthetics first

2. Designers aren’t typical users

3. Designers’ clients may not be the users


i

80

Ch. 7 - UCD

• Chapter 7 is the “punch line” of the whole book.

• User-Centered Design

• Most of the chapter is given over to describing “seven principles for transforming difficult tasks into simple ones.”


i

81

Etc.

• He goes on to offer a section on why you might want to design something to be hard to use ON PURPOSE.

• And he ends with a few sections on writing, the home of the future, and a concluding section.


i

82

Now . . .

• Let’s try to put it in Norman’s terms why the good designs were good and the bad designs were bad. (“Some important feature was, or was not, visible.”)


i

83

. . . your homework

• Bad designs.• Good designs.

Famous quote: “No one ever raised a statue to a critic.” Sibelius

I want us all to remember that it is easier to criticize another design than it is to design something.


i

84

For next week

• More reading -- Carroll (1997), Olson and Olson (2003).

• For next week, come with one good and one bad example of web usability. Actually, send ‘em to the TA by Friday noon.


i• In fact, by Friday noon, please send to the TA:

– Two URLs (one good and one bad design)– The name of the book you’re reviewing. (Book reviews due 2

weeks from today – and be prepared to give a 4 or 5 minute summary, with or without ppt.)

– Your white paper topics. Due 3 weeks from today.

• Usability test plan (for your final project) due in 5 weeks. Will help with pointers to templates.– (Randolph – hand out some project suggestions.)

85

Documents

Scientific Underpinnings of Usability Engineering