Creating Effective Web Design: Visual Hierarchy and User Behavior

1. Lecture 14 • Annotated Nike Ad • Course Review • Course Objectives

2. Short Movie Example • NIKE AD Annotated • Click onhttp://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Video/Please click on “nikeadslowannotated.wmv” link to play video (it may take a while)

3. Course Objective • Learn New Skills & Vocabulary • Learn MECHANICS • Create MEANING • Hands-on ExperienceCreating Multimedia Website • As your calling card - job search

4. 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. Recap – Color Coding Large areas = low saturation Small areas = high saturation 12 Colors for labeling

6. 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. 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. Web Design Implications Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, Graphics, • Color Coding, Typography

9. User Behavior  Design Implications  Design Specifics User Behavior User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 1 Use Grid System • Maintain ConsistencyHelps 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 & LogicallyUsers can read info more quickly.Facilitates understanding and recall. • Invisible Hand guiding users and creating sense of place

10. User Behavior  Design Implications  Design Specifics User Behavior User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid 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 ContrastUse sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. • Proximity: related things spatially closeSpatial separation = conceptual separation.Don't mix alignment styles. • Use Grouping & Nesting to Increase Information Density(Short-term Memory = 3-7)Use bounding shapes.

11. User Behavior  Design Implications  Design Specifics User Behavior User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid 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

12. User Behavior  Design Implications  Design Specifics User Behavior User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 1 Use Grid System • Maintain ConsistencyHelps 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 & LogicallyUsers 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 ContrastUse 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

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