Lecture 14
Annotated Nike Ad
Course Review
– Course Objectives
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Short Movie Example
NIKE AD Annotated
– Click on
http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Video/
Please click on “nikeadslowannotated.wmv” link to play video
(it may take a while)
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Course Objective
Learn New Skills & Vocabulary
Learn MECHANICS
Create MEANING
Hands-on Experience
Creating Multimedia Website
– As your calling card - job search
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Recap – Guide the Eye
Sharp Contrasts
– Light intensity, Color, Texture, Shape, Motion
Visual Grouping
– Continuity Within vs. Sharp Change Across
– Related = Spatially Close
– Unrelated = Large Gap
Visual Hierarchy
– More Important = Larger / Sharp Contrast
– Visual Weight = Conceptual Importance
– Short-term Memory = 5  2
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Recap – Color Coding
Large areas = low saturation
Small areas = high saturation
12 Colors
for labeling
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Web Design – Krug’s Suggestions
Design for Scanning, not reading
– Visual Hierarchy
– Visual contrast - size, bold, color
– Important things = Visually prominent
– Break pages up into clearly defined areas
– Related things = Spatially close, Nested
– Avoid “visual noise"
– Leverage Conventions
– Clear what's clickable
– Use underline and/or color coding
Make each click a “mindless” choice
Cut ½ of words, then cut ½.
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Recap – Web User Behavior
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
Stick to what works
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
Web Design Implications
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do on a page
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Stick to what works
• Repetition & Consistency
• Make obvious what is clickable
Get rid of question marks
Each item = clear purpose
Grid Layout, Easy Navigation, Graphics,
Color Coding, Typography
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
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
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
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.
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
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 for small blocks of text
• Enough contrast between type & background
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
1 Use Grid System
•
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
•
•
•
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
•
•
• Don't make users think
Get rid of question marks
Each item = clear purpose
•
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
•
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
•
•
•
•
•
•
SCLIS @ Rutgers
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
Multimedia Production Online
Prof. Anselm Spoerri
Thank you
For Your Effort
For Your Creations
…
and I believe we are in the process
of reaching our Goal:
Create Interactive Multimedia
Websites that Communicate
SCLIS @ Rutgers
Multimedia Production Online
Prof. Anselm Spoerri