1. © Anselm Spoerri Lecture 14 Annotated Nike Ad Course Review –Course Objectives

2. © 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) http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Video/

3. © Anselm Spoerri Course Objective Learn New Skills & Vocabulary Learn MECHANICS Create MEANING Hands-on Experience Creating Multimedia Website –As your calling card - job search

4. © 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

5. © Anselm Spoerri Recap – Color Coding Large areas = low saturation Small areas = high saturation 12 Colors for labeling

6. © 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 ½.

7. © 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

8. © 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 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

9. © Anselm Spoerri 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 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 ImplicationsUser 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 Stick to what works User Behavior

10. © Anselm Spoerri User Behavior  Design Implications  Design Specifics 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. 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 ImplicationsUser 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 Stick to what works User Behavior

11. © Anselm Spoerri User Behavior  Design Implications  Design Specifics 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 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 ImplicationsUser 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 Stick to what works User Behavior

12. © Anselm Spoerri 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 ImplicationsUser 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 Stick to what works User Behavior

13. © 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