pre-conference course: designing with the mind in mind: the psychological basis for ui design...

1

Designing With the Mind in Mind:The Psychological Basis for UI Design Guidelines

Jeff JohnsonUI Wizards, Inc.

2

UI Design Guidelines(Shneiderman, 1987, 1998, …, 2010)

Strive for consistencyCater to universal usabilityOffer informative feedbackDesign task-flows to yield closurePrevent errorsPermit easy reversal of actionsMake users feel they are in controlMinimize short-term memory load

3

UI Design Guidelines(Nielsen & Molich, 1993)

Visibility of system status Match between system & real world User control & freedom Consistency & standards Error prevention Recognition rather than recall Flexibility & efficiency of use Aesthetic & minimalist design Help users recognize, diagnose, & recover from errors Provide online documentation & help

4

UI Design Guidelines(Stone et al, 2005)

Visibility: First step to goal should be clear Affordance: Control suggests how to use it Feedback: Should be clear what happened or is

happening Simplicity: as simple as possible & task-focused Structure: content organized sensibly Consistency: similarity for predictability Tolerance: prevent errors, help recovery Accessibility: usable by all intended users, despite

handicap, access device, or environmental conditions

5

Applying Usability Guidelines

UI guidelines are based on how people perceive, think, learn, act

UI guidelines are not rote recipes E.g., “minimize short-term memory load”

Applying them effectively requires understanding their scientific basis Determining rule applicability & precedence Balancing trade-offs between competing rules

6

Facts about HumanPerception & Cognition

PerceptionOur perception is biasedOur vision is optimized to see structureWe seek and use visual structureOur color vision is limitedOur peripheral vision is poorVisual search is linear unless target “pops”Reading is unnatural

7

Facts about HumanPerception & Cognition (cont.)

Cognition Our attention is limited; Our memory is imperfect Limits on attention shape our thought & action Recognition is easy; recall is hard Learning from experience & learned actions are easy;

problem-solving & calculation are hard Many factors affect learning Our hand-eye coordination follows rules Human decision-making is rarely rational We have real-time requirements

8

Our perception is biased by:Our experienceThe contextOur goals

Our Perception is Biased

9


10


11


Page 1

Back Next

Page 2

Back Next

Page 3

Back Next

Page 4

Next Back

12


T E C T

13


Müller-Lyer illusion

14


All lines in this image are straight!

15


Red vertical lines are parallel!

16


Gray lines are horizontal, straight, and parallel!

17


Triangle sides are not bent inward!

18


Checkerboard does not bulge in middle!

19

We Perceive What We Expect

Video by Mark Mitton & Josh Aviner

20


Adults’ perception & attention focuses almost totally on our goals

Tend not to notice things unrelated to goal

21


22

Our Vision is Optimizedto See Structure

Gestalt Principles of Visual PerceptionProximitySimilarityContinuityClosureSymmetryFigure/groundCommon fate

23

Gestalt Principle: Proximity

Items that are closer appear grouped

Left: rows Right: columns

24


Outlook dialog boxuses group boxesto separate items

25


Good: Mozilla Thunderbird dialog box

26


Googlesearch-results

27


Bad:FakeGooglesearch-resultswithoutblankspace

28


Bad: Discreet Software Installer

29

Gestalt Principle: Closure

We tend to see whole, closed objects, not collections of fragments

Overlapping circles & triangles,not odd fragments

30

Gestalt Principle: Closure

We tend to see whole, closed objects, not collections of fragments

Stacked letters, not odd bits of images

31

We tend to see simple figures rather than complex ones

E.g., two overlapping diamonds;not other, more complex combinations

Gestalt Principle: Symmetry

32

Gestalt Principle: Symmetry

Thagard: Coherence in Thought & Action

33

Gestalt Principle: Figure/Ground

When objects overlap, we see smaller as figure on ground (larger)

Escher exploited figure/ground ambiguity

34

Gestalt Principle: Figure/Ground

35

Gestalt Principle: Common Fate

Items that move together appear grouped

36

Gestalt Principle: Common Fate

37

We Seek & Use Visual Structure

Structured info is easier to perceiveUnstructured:

You are booked on United flight 237, which departs from Auckland at 14:30 and arrives at San Francisco at 11:40 Tuesday 15 Oct.

Structured:Flight: UA 237, Auckland => San Francisco

Depart: 14:30 Tue 15 Oct

Arrive: 11:40 Tue 15 Oct

38

We Seek & Use Structure

Visual hierarchy gets people to goal faster

39

We Seek & Use Structure

Structured info is easier to perceive

40

Structured NumbersAre Easier to Scan and Read

Easy: (415) 123-4567Hard: 4151234567

Easy: 1234 5678 9012 3456Hard: 1234567890123456

41

Structured NumbersAre Easier to Scan and Read

Bad: SFGov.org

Good: Democrats.org

42

Questions?

43

Our Color Vision is Limited

Our color vision is based on differences

44


Our vision is optimized to see contrasts -- edges & changes, not absolute levels

The inner bar is all one solid grey!

45

Our Color Vision Is Limited

Our vision is optimized to see contrasts -- edges & changes, not absolute levels

A:

B:

47


We have trouble discriminating: pale colors small color patches separated patches

48


Federal Reserve Bank (Minn)

ITN.net

49


Some people have color-blindness ~ 8% of males ~ 0.5% of females

E.g., colors that would be hard for red-green colorblind people to distinguish


Google: normal

Google: deuteranopia

50

51

Our Color Vision is Limited, so

Don’t rely solely on color Use redundantly with other cues

E.g., Let’s improve ITN.net

How they improved it:

52


Avoid subtle color differences Make colors differ in saturation as well as hue Should still look different in gray scale

E.g., FRB.org

53


Most distinctive colors:

Other distinctive colors:

54

Our Peripheral Vision is Poor

Client internal Web-app

55


Reason 1. Pixels much denser in fovea

56


Reason 2. Data from fovea uncompressed; Data from periphery is compressed

57


Reason 3. Half of visual cortex serves fovea

58


Reason 1. Pixels much denser in foveaReason 2. Data from fovea uncompressed;

Data from periphery is compressedReason 3. Half of visual cortex serves fovea

Resolution at center is 300 dots/inchWhat is resolution at vision’s edge?

59

Exercise: See Blind Spot in Retina

Draw this on a piece of paper:

+ @

Cover left eye.

Focus right eye on +.

Adjust distance of paper from eye.

Voila: the @ disappears!

60

Airborne.com


61

Our Peripheral Vision is Poor, so

Common methods of getting seen Put where users are looking Put near the error Use red for errors Use error symbol

62


Place error msg where users are looking

63


Common methods of getting seen Put where users are looking Put near the error Use red for errors Use error symbol

Heavy artillery: use sparingly Popup in error dialog box Audio: beep Flash or wiggle briefly (not continuously)

64


Client internal web-app, improved

65


iCloud, when login info is invalid

Visual Search is LinearUnless Target “Pops”

Where’sWaldo?

66


67


Linear: Find letter in pile of characters

L Q R B T J P L F B M R W S

F R N Q S P D C H K U T

G T H U J L U 9 J V Y I A

E X C F T Y N H T D O L L 8

G V N G R Y J G Z S T 6 S

3 L C T V B H U S E M U K

W Q E L F G H U Y I K D 968


Nonlinear: Find font-style in pile of letters





W Q E L F G H B Y I K D 9




Linear: Counting letters in pile of letters









Nonlinear: Counting colored symbols







G V N G R Y J G Z S T 6 S71


Nonlinear: Color “pops out”

72



73



74



75



76


Non-linear: headings & bullets pop-out

77

• Prominence

Using Visual “Pop” to Help User Spot Faulty Servers

78


Linear: find item inunfamiliar menu

With experience, peoplelearn item-positions, sosearch becomesnon-linear

79


Non-linear: alphabetical & some pop-out

80

Visual Search Slows with Age

81

Our Attention is Limited;Our Memory is Imperfect

Short-term memory (STM or WM)Long-term memory (LTM)

82


Short-term memory (STM or WM)Long-term memory (LTM)

83

84


Short-term memory (STM)Represents conscious mind

Attention: what we’re attending to NOW Not a separate store; Foci of attention in LTM

Capacity: 3-5 unrelated items “Magical number 7” was over-estimate

New items can “grab” attention from oldEasy to forget goals or info

85


Short-term memory (STM) test:Memorize: 3 8 4 7 5 3 9Say your phone number backwardsMemorize: 3 1 4 1 5 9 2Memorize: 1 3 5 7 9 11 13Memorize: town river corn string car shovelMemorize: what is the meaning of life

86


Slate.com

Blooper:Search termsnot shown(short-termmemory)

87


Microsoft Windows

Blooper: Instructions go away too soon

88

Our Memory is Imperfect

Long-term memory (LTM)Memories = broad patterns of neural activity

Experiences trigger patterns corresponding to features Similar experience triggers same pattern recognition Internal neural activity triggers pattern recall

Stores a lifetime of experience, but… error-prone, impressionist, free-associative, easily biased Memories change when features are dropped or added

See whale-shark, remember whale

Seldom-followed routines hard to recall Reason for written food recipes, pilot checklists, etc.

89

Our Memory is Imperfect

Long-term memory (LTM) test:

Was there a roll of tape in the toolbox?What was your previous phone number?Pollack painting

or dalmatian?

90

Our Memory is Imperfect, so…

Don’t burden long-term memory

91

Our Memory is Imperfect, so…

Provide external memory aids

92

Limits on Attention Shape Our Thought & Action

We barely pay attention to computer tools Focus attention on own goals, data

Think about computer, UI very superficially Krug: Don’t Make Me Think (about your software)

Focused on achieving goal Prefer familiar paths over exploration User: “I’m in a hurry, so I’ll do it the long way.”

Very literal in following “scent” toward goal

93



Keeping track of features in STM is workWe track only features crucial to task We are often “blind” to changes

94

95


Keeping track of things in STM is workWhen we reach goal, we often let everything

related to it fall out of STM We often forget “loose ends” of tasks:

Removing last page of document from copier Turning car headlights OFF Switching device or software back to normal mode

Therefore: Systems should remind users of loose ends Modes should revert to “normal” automatically

96

Recognition is Easy;Recall is Hard

We evolved to recognize things quickly We assess situations very fast We recognize faces blindingly fast We recognize complex patterns

97

Recognition is Easy;Recall is Hard

We did not evolve to recall arbitrary facts Tricks for memorizing use recognition to stimulate

recall, e.g., Greek “method of loci” Developed writing to avoid memorizing We rely on external memory aids, e.g., PDAs

Implication for UI design: See & choose easier to learn than remember & type

Remove>

98

Questions?

System 1 and System 2

System 1: old brain + midbrain Collection of automatic “zombie” processes Can run many processes in parallel Fast but approximate, “satisficing” Doesn’t use working memory Unconscious; governs most of our behavior

System 2: cerebral cortex (mainly frontal) Slow but precise Uses working memory One serial processor; cannot multi-task Conscious, self-aware; believes it governs our behavior

99

Example: System 1 vs System 2

A baseball and a bat together cost $110. The bat costs $100 more than the ball.How much does the ball cost?

System 1’s instant answer: $10 (wrong)System 2 may reject that answer. Or not.System 2 can calculate correct answer;

System 1 cannot.

101

Example: System 1 vs System 2

System 1’s perception of the dogs’ size is biased by the lines; System 2’s is not.

102

Test: System 1 vs System 2

103

104

Easy: Performing Learned Routines

Examples: Riding a bicycle after months of practice Driving to same workplace after many years Using a touchpad after a few days of practice Reading & deleting message from your phone

Automatic: doesn’t use up STM / attention System 1: “zombie” or “robotic” processes Compiled mode, parallel processing Many processors: Can multi-task

Hard: Performing Novel Actions

Examples: Following a new cooking recipe Driving somewhere you’ve never been Writing with your non-dominant hand Switching from Mac to Windows PC (or vice-versa)

Controlled: consumes STM / attention System 2: Runs mainly in cerebral cortex Interpreted mode, serial processing Only one processor: Cannot multi-task

105

106

Test: Exercising Systems 1 vs. 2;Learned vs. Novel Actions

Recite alphabet, A – MRecite alphabet backwards, M – A

Countdown from 10 to 1Countdown from 21 to 1 by 3s

Hum first measure of “Twinkle, twinkle,little star”

Hum it backwards

Human Decisionmaking isRarely Rational

System 1 usually controls decisions,but is biased (Kahneman & Tversky): Losses mean more than gains Recent history & strong memories affect us

more than distant history & weak memories Experiences of family & close friends more

influential than mountains of statistics How choice is worded (framed) affects

decision People avoid risk for potential gains;

take risks for potential losses 107


108

Kahneman & Tversky: Fourfold Pattern


Implications for Design: Decision-support: helping System 2 override

System 1Data visualization: harness System 1

(perception) to support System 2Persuasion: seducing System 1 and

bypassing System 2

109

Decision-support: helping System 2 override System 1

110


111


112

Data visualization: harness System 1 to support System 2

London Metro

113

Data visualization: harness System 1 to support System 2

114

Persuasion: seducing System 1 and bypassing System 2

115

Persuasion: seducing System 1 and bypassing System 2

116

Our Hand-Eye Coordination Follows Laws

Fitts’ LawSteering Law

117

Fitts’s Law [Fitts, 1954]:Time to hit a target w/pointer

T = time (duration) to move to targetD = distance from pointer to targetW = width of target (on axis of movement)a = start/stop time of pointer/userb = maximum speed of device/user

Formula:

Simpler: T = a + bI118

Fitts’s Law:Time to hit a target w/pointer

Movement starts fast; slows near targetSlows more at target if target is small

119

Fitts’s Law:Time to hit a target w/pointer

120

Fitts’s Law:Applies to almost all pointing

All pointing devicesHuman hands, feet, even head movement!All people: all ages, abilities, even if druggedJust change parameters: a & b

T = a + bI

121

Pointing Slows with Age

122

Fitts’s Law:Implications for Design

Make click-targets (e.g., buttons, links) bigTargets at top & edge of screen fast to hit

Essentially have infinite sizeMenus: pop-up & pie menus faster than

pull-down Less movement required All faster than pull-right menus

123

Steering Law [Accot & Zhai, 1997]

Derived from Fitts’s Law: T = a + b(L/W)Wider paths allow faster movement

Implications: allow wide paths for scrollbars & pull-right menus

124

Steering Law

125

Blooper

Steering Law

126

Road Scholar Menus: 2012 vs. 2013

127

Human Real-Time Characteristics

Shortest audible silent gap in sound: 0.001 secBriefest visual stimulus that affects us: 0.005 sec

Threshold for auditory fusion of clicks: 0.02 secThreshold for visual fusion of images: 0.05 secSpeed of (involuntary) flinch reflex: 0.08 sec

Lag in full awareness of visual event: 0.1 secLimit on perception of cause/effect: 0.14 sec

128

Human Real-Time Characteristics

Time for skilled reader to comprehend a word: 0.15 sec Time to subitize 1-5 items: 0.2 sec

Time to identify (name) visual object: 0.25 sec Time to count items in visual field: 0.5 sec/item

Minimum visual-motor reaction time: 0.7 sec

Average conversational gap: 1 sec Length of unbroken attention to task: 5-30 sec

129

Clicks Need Immediate Feedback

Controls must react immediately (0.1 sec) to clicks or we assume we missed

Click Me!Click Me!

130

Display “Whole” QuicklyFill in Detail Later

131

Display “Whole” QuicklyFill in Detail Later

132

Animation:Preserve 16 frames/sec

InXight Cone Tree

133

Questions?

134

Conclusion: Applying Design Rules in UI Designs is Not Simple & Mindless

UI design is a skill; not something anyone can do by following guidelines

Knowing cognitive basis helps us prioritize Recognize which rules to follow in each

design situation

135

Now, Maybe those UI Design Rules Make More Sense

136

UI Design Guidelines(Shneiderman, 1987, 1998, …, 2010)

Strive for consistencyCater to universal usabilityOffer informative feedbackDesign task-flows to yield closurePrevent errorsPermit easy reversal of actionsMake users feel they are in controlMinimize short-term memory load

137

UI Design Guidelines(Nielsen & Molich, 1993)

Visibility of system status Match between system & real world User control & freedom Consistency & standards Error prevention Recognition rather than recall Flexibility & efficiency of use Aesthetic & minimalist design Help users recognize, diagnose, & recover from errors Provide online documentation & help

138

UI Design Guidelines(Stone et al, 2005)

Visibility: First step to goal should be clear Affordance: Control suggests how to use itFeedback: Should be clear what happened or is

happeningSimplicity: as simple as possible & task-focusedStructure: content organized sensiblyConsistency: similarity for predictabilityTolerance: prevent errors, help recoveryAccessibility: usable by all intended users,

despite handicap, access device, or environmental conditions

Designing with The Mind in Mind, 2nd Edition

139

140

The End

Questions?