Creating the Creating the best materialsbest materials

Design principles based Design principles based

on researchon research

Why should I pay attention to Why should I pay attention to this? this?

Empirical research conducted by Empirical research conducted by

Richard E. Mayer, Professor of Psychology Richard E. Mayer, Professor of Psychology at UC Santa Barbara supports these at UC Santa Barbara supports these principles as good practice. principles as good practice.

Dr. Mayer has published a wealth of Dr. Mayer has published a wealth of research on multimedia learning. research on multimedia learning.

Multimedia PrincipleMultimedia Principle

Students Students learn better learn better from words from words and pictures and pictures than from than from words alone words alone

WordsWords

What can I do? What can I do?

Add clipart to handoutsAdd clipart to handouts Use concept mapping such as Inspiration Use concept mapping such as Inspiration

and Mindmeisterand Mindmeister Add animations and/or clipart to your Add animations and/or clipart to your

presentations presentations

Spatial contiguity principleSpatial contiguity principle

Students learn better when corresponding Students learn better when corresponding words and pictures are presented near words and pictures are presented near rather than far from each other on the rather than far from each other on the page or screen. page or screen.

What can I do? What can I do?

Instead of adding Instead of adding images at the top images at the top or corners of your or corners of your work, consider work, consider incorporating the incorporating the images into the images into the text. text.

Change a picture Change a picture into a into a

watermark and watermark and type over type over

top of it. top of it.

Temporal contiguity principleTemporal contiguity principle

Students learn better when Students learn better when corresponding words and corresponding words and pictures are presented pictures are presented simultaneously rather than simultaneously rather than successively. successively.

What can I do? What can I do?

In PowerPoint, use your In PowerPoint, use your custom animation to custom animation to have images and text have images and text enter together. enter together.

Coherence PrincipleCoherence Principle

Students learn better when Students learn better when extraneous words, pictures, and extraneous words, pictures, and sounds are excluded rather than sounds are excluded rather than included. included.

What can I do? What can I do?

Ask yourself if you’re adding extras Ask yourself if you’re adding extras because you should or because you want because you should or because you want to do so. to do so.

Share your presentation with a friend and Share your presentation with a friend and ask him or her to help you eliminate ask him or her to help you eliminate distracting extras. distracting extras.

Modality principleModality principle

Students learn better Students learn better from animation and from animation and narration than from narration than from animation and on-screen animation and on-screen text. text.

What can I do? What can I do?

Consider PhotoStory where you Consider PhotoStory where you can add narration to your images. can add narration to your images.

Attend an audacity training to Attend an audacity training to understand how to add audio understand how to add audio files. files.

(Look for an upcoming training.)(Look for an upcoming training.)

Redundancy PrincipleRedundancy Principle

Students learn better from Students learn better from animation and narration animation and narration than from animation, than from animation, narration, and on-screen narration, and on-screen text. text.

What can I do? What can I do?

With this principle, less is With this principle, less is more. more.

Eliminate all but essential Eliminate all but essential text and increase your use text and increase your use of narration. of narration.

Individual differences principleIndividual differences principle

Design effects are stronger for low-Design effects are stronger for low-knowledge learners than for high-knowledge learners than for high-knowledge learners and for high-knowledge learners and for high-spatial learners than for low-spatial spatial learners than for low-spatial learners. learners.

Give me some guidelines!Give me some guidelines!

The following slides are a good set of The following slides are a good set of guidelines to use. guidelines to use.

Of course you know your students better, Of course you know your students better, but these are general rules of thumb to but these are general rules of thumb to guide your choices when creating guide your choices when creating materials. materials.

Orient UsersOrient Users

Provide information on each Provide information on each screen or webpage that tells screen or webpage that tells users where they are in the users where they are in the presentation. presentation.

Use headings and captions to Use headings and captions to show your organization show your organization

Justify Text AppropriatelyJustify Text Appropriately

Everything Everything should be left should be left justified except justified except for numbers in for numbers in a table, which a table, which should be right should be right justified. justified.

Limit Type StylesLimit Type Styles

Do not use more than three type Do not use more than three type styles per screen. styles per screen.

Consider one style for headings, Consider one style for headings, another for captions, and another for another for captions, and another for text. text.

Be consistent so students can catch Be consistent so students can catch on to your system. on to your system.

Limit ColorsLimit Colors

Do not use more than Do not use more than three or four colors three or four colors per screen. per screen.

Use color toUse color to Attract, hold, or Attract, hold, or

direct attentiondirect attention Show relationshipsShow relationships Enhance data Enhance data

Standardize use of colorsStandardize use of colors

Set up a color scheme and Set up a color scheme and use it consistently. use it consistently.

Consider using blue as a Consider using blue as a background because the background because the human retina has fewer human retina has fewer blue-sensitive cells than for blue-sensitive cells than for any other color. any other color.

Avoid the following Avoid the following combinations:combinations: Red on green, green on blue, Red on green, green on blue,

and red on blue. and red on blue.

Enhance Text with Graphics Enhance Text with Graphics and Interactivityand Interactivity

Do not produce or Do not produce or accept screens accept screens that are only text. that are only text.

Text should be Text should be accompanied by accompanied by charts, illustrations, charts, illustrations, diagrams, and links diagrams, and links

Eliminate Superfluous ItemsEliminate Superfluous Items

Every object on the screen should have Every object on the screen should have meaning. meaning.

Consider removing borders that don’t Consider removing borders that don’t contribute information and clipart art that is contribute information and clipart art that is only vaguely related to your topic. only vaguely related to your topic.

Upper and LowercaseUpper and Lowercase

DO NOT USE ALL CAPS! DO NOT USE ALL CAPS! Research shows that for most Research shows that for most

people it is easier to read the people it is easier to read the traditional upper and lowercase traditional upper and lowercase type. type.

Keep Text Lines Short Keep Text Lines Short

Keep line lengths between Keep line lengths between eight and ten words when eight and ten words when creating materials. creating materials.

Single SpacingSingle Spacing

Use a double space between Use a double space between paragraphs rather than using paragraphs rather than using an indent. an indent.

Simplify the StructureSimplify the Structure

Make it as easy as possible for Make it as easy as possible for users to find the information. users to find the information.

Strive for consistency within a Strive for consistency within a presentation and with your presentation and with your webpages. webpages.

Limit the FocusLimit the Focus

Feature one idea per Feature one idea per screen. screen.

Consider a new page on Consider a new page on your website section for your website section for each project, idea, etc. each project, idea, etc.

Provide EmphasisProvide Emphasis

Use Use boldbold, , italicsitalics, or , or underliningunderlining to emphasize to emphasize ideas. ideas.

Strive for consistency so Strive for consistency so viewers can follow. viewers can follow.

Know your audienceKnow your audience

Consider your purpose Consider your purpose and your audience and your audience before you start. before you start.

If it is a handout, you If it is a handout, you can use a smaller font can use a smaller font than you would for a than you would for a whole group whole group presentation. presentation.

Do Not FlashDo Not Flash

Do not use flashing text to get Do not use flashing text to get the attention of the viewer. the attention of the viewer.

This makes it hard to focus. This makes it hard to focus. Instead, use Instead, use colorcolor and location and location

to call attention to the to call attention to the information. information.

Use Lists Use Lists

Use bullets, numbers, and Use bullets, numbers, and checkmarks when you can checkmarks when you can especially on webpages. especially on webpages.

˙ ˙ 44

Navigate consistentlyNavigate consistently

Keep navigation buttons in the same Keep navigation buttons in the same position from one screen to the next. position from one screen to the next.

If you use action buttons in If you use action buttons in PowerPoint, remember to have them PowerPoint, remember to have them look the same and appear in the look the same and appear in the same place. same place.

Do not stack textDo not stack text

Include multiple graphic typesInclude multiple graphic types

Pictures are just Pictures are just one type of one type of visual.visual.

Consider adding Consider adding charts, maps, charts, maps, tables, diagrams, tables, diagrams, or photographsor photographs

Organize the ScreenOrganize the Screen

Group objects for meaning and Group objects for meaning and better visual clarity. better visual clarity.

Use a border or white space Use a border or white space background to make groups background to make groups stand out to the viewer. stand out to the viewer.

Size MattersSize Matters

Size determines importance to Size determines importance to a viewer. a viewer.

Be sure to resize your images Be sure to resize your images to reflect the level of to reflect the level of importance you want to importance you want to convey. convey.

Placement MattersPlacement Matters

Location also determines importance. Location also determines importance. Items at the top appear to have more Items at the top appear to have more

importance to the viewer. importance to the viewer. Think of it like the newspaper-the bigger Think of it like the newspaper-the bigger

story has a large headline high up on the story has a large headline high up on the page. page.

Additional resourcesAdditional resources

www.webstyleguide.comwww.webstyleguide.com

www.colin.mackenzie.org/webdesignwww.colin.mackenzie.org/webdesign

References References

Gagne, E.D., Yekovich, C.W., & Yekovich, F.R. Gagne, E.D., Yekovich, C.W., & Yekovich, F.R. (1993). (1993). The cognitive psychology of school The cognitive psychology of school learninglearning. Boston: Little, Brown. . Boston: Little, Brown.

Marcus, A. (1991). Marcus, A. (1991). Graphic design for electronic Graphic design for electronic documents and user interfacesdocuments and user interfaces. New York: . New York: ACM Press. ACM Press.

Horton, W. (1991). Horton, W. (1991). Illustrating computer Illustrating computer documentationdocumentation. New York: Wiley. . New York: Wiley.

Mayer, R.E. (2001). Mayer, R.E. (2001). Multimedia LearningMultimedia Learning. . Cambridge: Cambridge University Press. Cambridge: Cambridge University Press.