Lecture 14 Course Review Course Objectives Design Principles

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, 640 x 480 = 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 © 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, 640 x 480 = 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 © 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, 640 x 480 = 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. © 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, 640 x 480 = 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 © Anselm Spoerri

User Behavior Design Implications Design Specifics Scan pages - don't read them • Design for Scanning 1 Use Grid System Make text short - cut words • Make page work at a glance Sufficient left margin, 640 x 480 = 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 2 Create Visual Hierarchy & Guide Eye 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 © 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 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 © Anselm Spoerri