Psychological Basis for UI Design Rules
Thursday, January 5, 12
We Perceive What We Expect
Thursday, January 5, 12
We Perceive What We Expect
Page 1 Back
Thursday, January 5, 12
Next
We Perceive What We Expect
Page 2 Back
Thursday, January 5, 12
Next
We Perceive What We Expect
Page 3 Back
Thursday, January 5, 12
Next
We Perceive What We Expect
Page 4 Next
Thursday, January 5, 12
Back
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
We Perceive What We Expect
• Can you spot a snake?
Thursday, January 5, 12
We Perceive What We Expect
Thursday, January 5, 12
We Perceive What We Expect
• Can you spot a tank?
Thursday, January 5, 12
We Perceive What We Expect
Thursday, January 5, 12
We Perceive What We Expect
• how do I get to Dept. of Industrial Design? • Website
Thursday, January 5, 12
Thursday, January 5, 12
Our Vision is Optimized to See Structure Gestalt Principles of Visual Perception
• Proximity • Similarity • Continuity • Closure • Symmetry • Figure/ground • Commond fate Thursday, January 5, 12
Gestalt Principle: Closure
• We tend to see whole, closed objects, not collection of fragments
• Overlapping circles & triangles, not odd fragments
Thursday, January 5, 12
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
Gestalt Principle: Symmetry
Thursday, January 5, 12
We Seek & Use Visual Structure Structured info is easier to perceive Unstructured
•
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
•
Flight: United 237 Aukland
San Francisco
Depart: 10:30 Tue Jan 11 Arrive: 11:40 Tue Jan 11 Thursday, January 5, 12
We Seek & Use Visual Structure
• Visual hierarchy gets people to goal faster
Thursday, January 5, 12
Our Color Vision is Limited
• Our vision is optimized to see contrast -edges & changes, not absolute levels
Thursday, January 5, 12
Our Color Vision is Limited
Thursday, January 5, 12
Our Color Vision is Limited
Thursday, January 5, 12
Our Color Vision is Limited
• We have trouble discriminating: • pale colors • small color patches • separated patches Thursday, January 5, 12
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 redgreen colorblind people to distinguish
Thursday, January 5, 12
Our Color Vision is Limited
Thursday, January 5, 12
Our Color Vision is Limited
Thursday, January 5, 12
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
Our Peripheral Vision is Poor
• Heavy artillery: use sparingly • Popup in error dialog box • Audio: beep • Flash or wiggle briefly
Thursday, January 5, 12