User Behavior θ Design Implications θ Design Specifics
1 Use Grid System
Maintain Consistency
Helps you
decide: location of primary & secondary navigation; location and
sizes of images;
location of headlines, main text,
annotations etc.
Create Visual
Hierarchy & Rhythm
Present Information Clearly & Logically
Users can read
info more quickly.
Facilitates understanding and
recall.
Invisible Hand
guiding users and creating sense of place
2 Create Visual Hierarchy
& Guide Eye
Important Things = Visually Prominent
(More Important
= Larger / Sharp Contrast)
Use headlines to guide the eye
Visual Contrast
Use sharp changes in size
(headline), light intensity (bold), color, texture, motion to create
contrast.
Proximity: related things spatially close.
Spatial
separation = conceptual separation.
Don't mix
alignment styles.
Use Grouping & Nesting to Increase Information Density
(Short-term Memory = 3-7)
Use bounding
shapes.
3 Typography Heuristics
Sans Serif type
is easier to read on screen
Type size 10
-14 points
7 - 10 words
per line
Column width
proportional to type size
Bold and italic used for small
blocks of text
Enough contrast
between type and background
Design for Scanning
Make text short - cut words
Make page work at a glance
Sufficient left margin,
640x480 = main message
Create Visual
Hierarchy
Make obvious
what you can do
Make obvious
what is clickable
Don't make users think
Get rid of question marks
Each item = clear purpose
Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding,
Typography
User Behavior θ
Design Implications
User Behavior θ
Design Implications θ Design Specifics
Scan pages - don't read them
Look for
anything = Search Interest
Decide quickly
Choose first
reasonable item
Muddle through
Don't figure
out how things work
Resist forming
models