Psychological Basis for UI Design Rules

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