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

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

© 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

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

© 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

© 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

© 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

© 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

© Anselm Spoerri User Behavior  Design Implications  Design Specifics 3 Typography Heuristics Sans Serif type is easier to read on screen Type size points 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

© 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

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

© 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?"

© 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