![Page 1: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/1.jpg)
1
Designing With the Mind in Mind:The Psychological Basis for UI Design Guidelines
Jeff JohnsonUI Wizards, Inc.
![Page 2: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/2.jpg)
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
![Page 3: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/3.jpg)
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
![Page 4: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/4.jpg)
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
![Page 5: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/5.jpg)
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
![Page 6: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/6.jpg)
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
![Page 7: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/7.jpg)
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
![Page 8: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/8.jpg)
8
Our perception is biased by:Our experienceThe contextOur goals
Our Perception is Biased
![Page 9: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/9.jpg)
9
Our Perception is Biased
![Page 10: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/10.jpg)
10
Our Perception is Biased
![Page 11: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/11.jpg)
11
Our Perception is Biased
Page 1
Back Next
Page 2
Back Next
Page 3
Back Next
Page 4
Next Back
![Page 12: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/12.jpg)
12
Our Perception is Biased
T E C T
![Page 13: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/13.jpg)
13
Our Perception is Biased
Müller-Lyer illusion
![Page 14: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/14.jpg)
14
Our Perception is Biased
All lines in this image are straight!
![Page 15: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/15.jpg)
15
Our Perception is Biased
Red vertical lines are parallel!
![Page 16: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/16.jpg)
16
Our Perception is Biased
Gray lines are horizontal, straight, and parallel!
![Page 17: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/17.jpg)
17
Our Perception is Biased
Triangle sides are not bent inward!
![Page 18: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/18.jpg)
18
Our Perception is Biased
Checkerboard does not bulge in middle!
![Page 19: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/19.jpg)
19
We Perceive What We Expect
Video by Mark Mitton & Josh Aviner
![Page 20: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/20.jpg)
20
Our Perception is Biased
Adults’ perception & attention focuses almost totally on our goals
Tend not to notice things unrelated to goal
![Page 21: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/21.jpg)
21
Our Perception is Biased
![Page 22: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/22.jpg)
22
Our Vision is Optimizedto See Structure
Gestalt Principles of Visual PerceptionProximitySimilarityContinuityClosureSymmetryFigure/groundCommon fate
![Page 23: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/23.jpg)
23
Gestalt Principle: Proximity
Items that are closer appear grouped
Left: rows Right: columns
![Page 24: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/24.jpg)
24
Gestalt Principle: Proximity
Outlook dialog boxuses group boxesto separate items
![Page 25: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/25.jpg)
25
Gestalt Principle: Proximity
Good: Mozilla Thunderbird dialog box
![Page 26: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/26.jpg)
26
Gestalt Principle: Proximity
Googlesearch-results
![Page 27: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/27.jpg)
27
Gestalt Principle: Proximity
Bad:FakeGooglesearch-resultswithoutblankspace
![Page 28: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/28.jpg)
28
Gestalt Principle: Proximity
Bad: Discreet Software Installer
![Page 29: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/29.jpg)
29
Gestalt Principle: Closure
We tend to see whole, closed objects, not collections of fragments
Overlapping circles & triangles,not odd fragments
![Page 30: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/30.jpg)
30
Gestalt Principle: Closure
We tend to see whole, closed objects, not collections of fragments
Stacked letters, not odd bits of images
![Page 31: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/31.jpg)
31
We tend to see simple figures rather than complex ones
E.g., two overlapping diamonds;not other, more complex combinations
Gestalt Principle: Symmetry
![Page 32: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/32.jpg)
32
Gestalt Principle: Symmetry
Thagard: Coherence in Thought & Action
![Page 33: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/33.jpg)
33
Gestalt Principle: Figure/Ground
When objects overlap, we see smaller as figure on ground (larger)
Escher exploited figure/ground ambiguity
![Page 34: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/34.jpg)
34
Gestalt Principle: Figure/Ground
![Page 35: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/35.jpg)
35
Gestalt Principle: Common Fate
Items that move together appear grouped
![Page 36: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/36.jpg)
36
Gestalt Principle: Common Fate
![Page 37: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/37.jpg)
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
![Page 38: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/38.jpg)
38
We Seek & Use Structure
Visual hierarchy gets people to goal faster
![Page 39: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/39.jpg)
39
We Seek & Use Structure
Structured info is easier to perceive
![Page 40: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/40.jpg)
40
Structured NumbersAre Easier to Scan and Read
Easy: (415) 123-4567Hard: 4151234567
Easy: 1234 5678 9012 3456Hard: 1234567890123456
![Page 41: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/41.jpg)
41
Structured NumbersAre Easier to Scan and Read
Bad: SFGov.org
Good: Democrats.org
![Page 42: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/42.jpg)
42
Questions?
![Page 43: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/43.jpg)
43
Our Color Vision is Limited
Our color vision is based on differences
![Page 44: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/44.jpg)
44
Our Color Vision is Limited
Our vision is optimized to see contrasts -- edges & changes, not absolute levels
The inner bar is all one solid grey!
![Page 45: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/45.jpg)
45
Our Color Vision Is Limited
Our vision is optimized to see contrasts -- edges & changes, not absolute levels
A:
B:
![Page 46: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/46.jpg)
![Page 47: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/47.jpg)
47
Our Color Vision is Limited
We have trouble discriminating: pale colors small color patches separated patches
![Page 48: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/48.jpg)
48
Our Color Vision is Limited
Federal Reserve Bank (Minn)
ITN.net
![Page 49: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/49.jpg)
49
Our Color Vision is Limited
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
![Page 50: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/50.jpg)
Our Color Vision is Limited
Google: normal
Google: deuteranopia
50
![Page 51: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/51.jpg)
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:
![Page 52: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/52.jpg)
52
Our Color Vision is Limited, so
Avoid subtle color differences Make colors differ in saturation as well as hue Should still look different in gray scale
E.g., FRB.org
![Page 53: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/53.jpg)
53
Our Color Vision is Limited, so
Most distinctive colors:
Other distinctive colors:
![Page 54: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/54.jpg)
54
Our Peripheral Vision is Poor
Client internal Web-app
![Page 55: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/55.jpg)
55
Our Peripheral Vision is Poor
Reason 1. Pixels much denser in fovea
![Page 56: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/56.jpg)
56
Our Peripheral Vision is Poor
Reason 2. Data from fovea uncompressed; Data from periphery is compressed
![Page 57: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/57.jpg)
57
Our Peripheral Vision is Poor
Reason 3. Half of visual cortex serves fovea
![Page 58: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/58.jpg)
58
Our Peripheral Vision is Poor
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?
![Page 59: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/59.jpg)
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!
![Page 60: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/60.jpg)
60
Airborne.com
Our Peripheral Vision is Poor
![Page 61: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/61.jpg)
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
![Page 62: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/62.jpg)
62
Our Peripheral Vision is Poor, so
Place error msg where users are looking
![Page 63: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/63.jpg)
63
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
Heavy artillery: use sparingly Popup in error dialog box Audio: beep Flash or wiggle briefly (not continuously)
![Page 64: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/64.jpg)
64
Our Peripheral Vision is Poor, so
Client internal web-app, improved
![Page 65: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/65.jpg)
65
Our Peripheral Vision is Poor, so
iCloud, when login info is invalid
![Page 66: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/66.jpg)
Visual Search is LinearUnless Target “Pops”
Where’sWaldo?
66
![Page 67: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/67.jpg)
Visual Search is LinearUnless Target “Pops”
67
![Page 68: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/68.jpg)
Visual Search is LinearUnless Target “Pops”
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
![Page 69: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/69.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Find font-style in pile of letters
G T H U J L U 9 J V Y I A
L Q R B T J P L F B M R W S
3 L C T V B H U S E M U K
F R N Q S P D C H K U T
W Q E L F G H B Y I K D 9
G V N G R Y J G Z S T 6 S
E X C F T Y N H T D O L L 869
![Page 70: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/70.jpg)
Visual Search is LinearUnless Target “Pops”
Linear: Counting letters in pile of letters
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
3 L C T V B H U S E M U K
G V N G R Y J G Z S T 6 S
W Q E L F G H U Y I K D 970
![Page 71: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/71.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Counting colored symbols
W Q E L F G H U Y I K D 9
F R N Q S P D C H K U T
3 L C T V B H U S E M U K
G T H U J L U 9 J V Y I A
L Q R B T J P L F B M R W S
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 S71
![Page 72: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/72.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Color “pops out”
72
![Page 73: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/73.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Color “pops out”
73
![Page 74: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/74.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Color “pops out”
74
![Page 75: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/75.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Color “pops out”
75
![Page 76: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/76.jpg)
Visual Search is LinearUnless Target “Pops”
Nonlinear: Color “pops out”
76
![Page 77: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/77.jpg)
Visual Search is LinearUnless Target “Pops”
Non-linear: headings & bullets pop-out
77
• Prominence
![Page 78: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/78.jpg)
Using Visual “Pop” to Help User Spot Faulty Servers
78
![Page 79: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/79.jpg)
Visual Search is LinearUnless Target “Pops”
Linear: find item inunfamiliar menu
With experience, peoplelearn item-positions, sosearch becomesnon-linear
79
![Page 80: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/80.jpg)
Visual Search is LinearUnless Target “Pops”
Non-linear: alphabetical & some pop-out
80
![Page 81: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/81.jpg)
Visual Search Slows with Age
81
![Page 82: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/82.jpg)
Our Attention is Limited;Our Memory is Imperfect
Short-term memory (STM or WM)Long-term memory (LTM)
82
![Page 83: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/83.jpg)
Our Attention is Limited;Our Memory is Imperfect
Short-term memory (STM or WM)Long-term memory (LTM)
83
![Page 84: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/84.jpg)
84
Our Attention is Limited;Our Memory is Imperfect
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
![Page 85: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/85.jpg)
85
Our Attention is Limited;Our Memory is Imperfect
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
![Page 86: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/86.jpg)
86
Our Attention is Limited;Our Memory is Imperfect
Slate.com
Blooper:Search termsnot shown(short-termmemory)
![Page 87: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/87.jpg)
87
Our Attention is Limited;Our Memory is Imperfect
Microsoft Windows
Blooper: Instructions go away too soon
![Page 88: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/88.jpg)
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.
![Page 89: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/89.jpg)
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?
![Page 90: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/90.jpg)
90
Our Memory is Imperfect, so…
Don’t burden long-term memory
![Page 91: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/91.jpg)
91
Our Memory is Imperfect, so…
Provide external memory aids
![Page 92: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/92.jpg)
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
![Page 93: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/93.jpg)
93
Limits on Attention Shape Our Thought & Action
![Page 94: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/94.jpg)
Limits on Attention Shape Our Thought & Action
Keeping track of features in STM is workWe track only features crucial to task We are often “blind” to changes
94
![Page 95: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/95.jpg)
95
Limits on Attention Shape Our Thought & Action
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
![Page 96: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/96.jpg)
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
![Page 97: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/97.jpg)
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>
![Page 98: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/98.jpg)
98
Questions?
![Page 99: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/99.jpg)
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
![Page 100: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/100.jpg)
Example: System 1 vs. System 2
100
Copyright © Getty Images
Copyright © Getty Images
![Page 101: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/101.jpg)
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
![Page 102: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/102.jpg)
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
![Page 103: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/103.jpg)
Test: System 1 vs System 2
103
![Page 104: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/104.jpg)
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
![Page 105: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/105.jpg)
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
![Page 106: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/106.jpg)
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
![Page 107: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/107.jpg)
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
![Page 108: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/108.jpg)
Human Decisionmaking isRarely Rational
108
Kahneman & Tversky: Fourfold Pattern
![Page 109: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/109.jpg)
Human Decisionmaking isRarely Rational
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
![Page 110: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/110.jpg)
Decision-support: helping System 2 override System 1
110
![Page 111: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/111.jpg)
Decision-support: helping System 2 override System 1
111
![Page 112: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/112.jpg)
Decision-support: helping System 2 override System 1
112
![Page 113: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/113.jpg)
Data visualization: harness System 1 to support System 2
London Metro
113
![Page 114: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/114.jpg)
Data visualization: harness System 1 to support System 2
114
![Page 115: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/115.jpg)
Persuasion: seducing System 1 and bypassing System 2
115
![Page 116: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/116.jpg)
Persuasion: seducing System 1 and bypassing System 2
116
![Page 117: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/117.jpg)
Our Hand-Eye Coordination Follows Laws
Fitts’ LawSteering Law
117
![Page 118: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/118.jpg)
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
![Page 119: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/119.jpg)
Fitts’s Law:Time to hit a target w/pointer
Movement starts fast; slows near targetSlows more at target if target is small
119
![Page 120: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/120.jpg)
Fitts’s Law:Time to hit a target w/pointer
120
![Page 121: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/121.jpg)
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
![Page 122: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/122.jpg)
Pointing Slows with Age
122
![Page 123: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/123.jpg)
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
![Page 124: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/124.jpg)
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
![Page 125: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/125.jpg)
Steering Law
125
Blooper
![Page 126: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/126.jpg)
Steering Law
126
Road Scholar Menus: 2012 vs. 2013
![Page 127: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/127.jpg)
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
![Page 128: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/128.jpg)
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
![Page 129: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/129.jpg)
129
Clicks Need Immediate Feedback
Controls must react immediately (0.1 sec) to clicks or we assume we missed
Click Me!Click Me!
![Page 130: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/130.jpg)
130
Display “Whole” QuicklyFill in Detail Later
![Page 131: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/131.jpg)
131
Display “Whole” QuicklyFill in Detail Later
![Page 132: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/132.jpg)
132
Animation:Preserve 16 frames/sec
InXight Cone Tree
![Page 133: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/133.jpg)
133
Questions?
![Page 134: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/134.jpg)
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
![Page 135: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/135.jpg)
135
Now, Maybe those UI Design Rules Make More Sense
![Page 136: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/136.jpg)
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
![Page 137: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/137.jpg)
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
![Page 138: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/138.jpg)
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
![Page 139: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/139.jpg)
Designing with The Mind in Mind, 2nd Edition
139
![Page 140: Pre-Conference Course: Designing with the Mind in Mind: The Psychological Basis for UI Design Guidelines - Jeff Johnson](https://reader030.vdocuments.us/reader030/viewer/2022032506/55cde4b3bb61eb953b8b45e0/html5/thumbnails/140.jpg)
140
The End
Questions?