1. © Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project

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

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

4. © 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" –Left-aligned text and sans serif typeface –Clear what's clickable –Use underline and/or color coding Make each click a “mindless” choice Cut ½ of words, then cut ½.

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

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

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

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

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

10. © Anselm Spoerri User Behavior  Design Implications  Design Specifics 1 Use Grid System 2 Create Visual Hierarchy & Guide Eye 3 Typography Heuristics 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 Mechanics – Goals Mechanics - technical competency in web and multimedia design: –Navigation –Easy to find your way? Consistent Primary Navigation? Site ID? Page name? –Layout –Clear, instant Visual Hierarchy? Pages easy to understand? "Look & feel" enticing? –Typography –Text easy to read? Designed for scanning? –Visuals –Graphics easy to understand? Image Layouts tell a story? Animations are well constructed? tell a story? –Interactivity –Use of interactive elements - links, rollovers, image maps? Interactive elements easy to understand and effective?

12. © Anselm Spoerri Meaning – Goals Meaning - concise presentation of content and effective use of multimedia: –Clarity –Content easy to understand? –Conciseness –Content presented in a concise form? Enough information but not too much? –Relevance –Content informative? Relevant? Insightful? Creativity –Creative Use of text, images, multimedia & interactivity? –Creative Approach to answering the question: "Why be a Librarian in the 21 st Century?"

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