psychological basis for ui design rules

Psychological Basis forUI Design Rules

Thursday, January 5, 12

We Perceive What We Expect



NextBack

Page 1



NextBack

Page 2



NextBack

Page 3



BackNext

Page 4



• Our perception & attention focuses almost totally on our goal

• Tend not to notice things unrelated to goal



• Can you spot a snake?



• Can you spot a tank?



• how do I get to Dept. of Industrial Design?

• Website


Our Vision is Optimized to See Structure

• Proximity

• Similarity

• Continuity

• Closure

• Symmetry

• Figure/ground

• Commond fate

Gestalt Principles of Visual Perception


Gestalt Principle: Closure

• We tend to see whole, closed objects, not collection of fragments

• Overlapping circles & triangles, not odd fragments


Gestalt Principle: Symmetry

• We tend to see simple figures rather than complex ones

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


Gestalt Principle: Symmetry


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


We Seek & Use Visual Structure

• Visual hierarchy gets people to goal faster


Our Color Vision is Limited

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



• We have trouble discriminating:

• pale colors

• small color patches

• separated patches



• 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


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


Our Peripheral Vision is Poor

• Heavy artillery: use sparingly

• Popup in error dialog box

• Audio: beep

• Flash or wiggle briefly


psychological basis for ui design rules

Documents

color vision

peripheral vision

error use red

error use error symbolthursday

united flight

error dialog box audio

redgreen colorblind

complex ones