psychological basis for ui design rules
DESCRIPTION
taken from Jeff Johnson's lecture at Stanford UTRANSCRIPT
![Page 1: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/1.jpg)
Psychological Basis forUI Design Rules
Thursday, January 5, 12
![Page 2: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/2.jpg)
We Perceive What We Expect
Thursday, January 5, 12
![Page 3: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/3.jpg)
We Perceive What We Expect
NextBack
Page 1
Thursday, January 5, 12
![Page 4: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/4.jpg)
We Perceive What We Expect
NextBack
Page 2
Thursday, January 5, 12
![Page 5: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/5.jpg)
We Perceive What We Expect
NextBack
Page 3
Thursday, January 5, 12
![Page 6: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/6.jpg)
We Perceive What We Expect
BackNext
Page 4
Thursday, January 5, 12
![Page 7: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/7.jpg)
We Perceive What We Expect
• Our perception & attention focuses almost totally on our goal
• Tend not to notice things unrelated to goal
Thursday, January 5, 12
![Page 8: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/8.jpg)
We Perceive What We Expect
• Can you spot a snake?
Thursday, January 5, 12
![Page 9: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/9.jpg)
We Perceive What We Expect
Thursday, January 5, 12
![Page 10: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/10.jpg)
We Perceive What We Expect
• Can you spot a tank?
Thursday, January 5, 12
![Page 11: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/11.jpg)
We Perceive What We Expect
Thursday, January 5, 12
![Page 12: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/12.jpg)
We Perceive What We Expect
• how do I get to Dept. of Industrial Design?
• Website
Thursday, January 5, 12
![Page 13: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/13.jpg)
Thursday, January 5, 12
![Page 14: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/14.jpg)
Our Vision is Optimized to See Structure
• Proximity
• Similarity
• Continuity
• Closure
• Symmetry
• Figure/ground
• Commond fate
Gestalt Principles of Visual Perception
Thursday, January 5, 12
![Page 15: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/15.jpg)
Gestalt Principle: Closure
• We tend to see whole, closed objects, not collection of fragments
• Overlapping circles & triangles, not odd fragments
Thursday, January 5, 12
![Page 16: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/16.jpg)
Gestalt Principle: Symmetry
• We tend to see simple figures rather than complex ones
• E.g., two overlapping diamonds; not other, more complex combination
Thursday, January 5, 12
![Page 17: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/17.jpg)
Gestalt Principle: Symmetry
Thursday, January 5, 12
![Page 18: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/18.jpg)
We Seek & Use Visual Structure
• You are booked on United flight 237, which departs from Auckland at 10:30 and arrives at San Francisco at 11:40 Tuesday Jan 11
Structured info is easier to perceive
Unstructured
• Flight: United 237
Aukland San Francisco
Depart: 10:30 Tue Jan 11
Arrive: 11:40 Tue Jan 11
Structured
Thursday, January 5, 12
![Page 19: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/19.jpg)
We Seek & Use Visual Structure
• Visual hierarchy gets people to goal faster
Thursday, January 5, 12
![Page 20: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/20.jpg)
Our Color Vision is Limited
• Our vision is optimized to see contrast -- edges & changes, not absolute levels
Thursday, January 5, 12
![Page 21: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/21.jpg)
Our Color Vision is Limited
Thursday, January 5, 12
![Page 22: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/22.jpg)
Our Color Vision is Limited
Thursday, January 5, 12
![Page 23: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/23.jpg)
Our Color Vision is Limited
• We have trouble discriminating:
• pale colors
• small color patches
• separated patches
Thursday, January 5, 12
![Page 24: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/24.jpg)
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
Thursday, January 5, 12
![Page 25: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/25.jpg)
Our Color Vision is Limited
Thursday, January 5, 12
![Page 26: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/26.jpg)
Our Color Vision is Limited
Thursday, January 5, 12
![Page 27: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/27.jpg)
Our Peripheral Vision is Poor
• Common methods of getting seen
• Put where users are looking
• Put near the error
• Use red for error
• Use error symbol
Thursday, January 5, 12
![Page 28: Psychological Basis for UI Design Rules](https://reader031.vdocuments.mx/reader031/viewer/2022020209/568bd8401a28ab2034a2af20/html5/thumbnails/28.jpg)
Our Peripheral Vision is Poor
• Heavy artillery: use sparingly
• Popup in error dialog box
• Audio: beep
• Flash or wiggle briefly
Thursday, January 5, 12