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

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

• 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 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

© 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 21st 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