Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating The Best Materials Design Principles

1,443 views

Published on

Published in: Business, Technology
  • Be the first to comment

Creating The Best Materials Design Principles

  1. 1. Creating the best materials Design principles based on research
  2. 2. Why should I pay attention to this? <ul><li>Empirical research conducted by </li></ul><ul><li>Richard E. Mayer, Professor of Psychology at UC Santa Barbara supports these principles as good practice. </li></ul><ul><li>Dr. Mayer has published a wealth of research on multimedia learning. </li></ul>
  3. 3. Multimedia Principle <ul><li>Students learn better from words and pictures than from words alone </li></ul>Words
  4. 4. What can I do? <ul><li>Add clipart to handouts </li></ul><ul><li>Use concept mapping such as Inspiration and Mindmeister </li></ul><ul><li>Add animations and/or clipart to your presentations </li></ul>
  5. 5. Spatial contiguity principle <ul><li>Students learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen. </li></ul>
  6. 6. What can I do? <ul><li>Instead of adding images at the top or corners of your work, consider incorporating the images into the text. </li></ul>Change a picture into a watermark and type over top of it.
  7. 7. Temporal contiguity principle <ul><li>Students learn better when corresponding words and pictures are presented simultaneously rather than successively. </li></ul>
  8. 8. What can I do? <ul><li>In PowerPoint, use your custom animation to have images and text enter together. </li></ul>
  9. 9. Coherence Principle <ul><li>Students learn better when extraneous words, pictures, and sounds are excluded rather than included. </li></ul>
  10. 10. What can I do? <ul><li>Ask yourself if you’re adding extras because you should or because you want to do so. </li></ul><ul><li>Share your presentation with a friend and ask him or her to help you eliminate distracting extras. </li></ul>
  11. 11. Modality principle <ul><li>Students learn better from animation and narration than from animation and on-screen text. </li></ul>
  12. 12. What can I do? <ul><li>Consider PhotoStory where you can add narration to your images. </li></ul><ul><li>Attend an audacity training to understand how to add audio files. </li></ul><ul><li>(Look for an upcoming training.) </li></ul>
  13. 13. Redundancy Principle <ul><li>Students learn better from animation and narration than from animation, narration, and on-screen text. </li></ul>
  14. 14. What can I do? <ul><li>With this principle, less is more. </li></ul><ul><li>Eliminate all but essential text and increase your use of narration. </li></ul>
  15. 15. Individual differences principle <ul><li>Design effects are stronger for low-knowledge learners than for high-knowledge learners and for high-spatial learners than for low-spatial learners. </li></ul>
  16. 16. Give me some guidelines! <ul><li>The following slides are a good set of guidelines to use. </li></ul><ul><li>Of course you know your students better, but these are general rules of thumb to guide your choices when creating materials. </li></ul>
  17. 17. Orient Users <ul><li>Provide information on each screen or webpage that tells users where they are in the presentation. </li></ul><ul><li>Use headings and captions to show your organization </li></ul>
  18. 18. Justify Text Appropriately <ul><li>Everything should be left justified except for numbers in a table, which should be right justified. </li></ul>
  19. 19. Limit Type Styles <ul><li>Do not use more than three type styles per screen. </li></ul><ul><li>Consider one style for headings, another for captions, and another for text. </li></ul><ul><li>Be consistent so students can catch on to your system. </li></ul>
  20. 20. Limit Colors <ul><li>Do not use more than three or four colors per screen. </li></ul><ul><li>Use color to </li></ul><ul><ul><li>Attract, hold, or direct attention </li></ul></ul><ul><ul><li>Show relationships </li></ul></ul><ul><ul><li>Enhance data </li></ul></ul>
  21. 21. Standardize use of colors <ul><li>Set up a color scheme and use it consistently. </li></ul><ul><li>Consider using blue as a background because the human retina has fewer blue-sensitive cells than for any other color. </li></ul><ul><li>Avoid the following combinations: </li></ul><ul><ul><li>Red on green, green on blue, and red on blue. </li></ul></ul>
  22. 22. Enhance Text with Graphics and Interactivity <ul><li>Do not produce or accept screens that are only text. </li></ul><ul><li>Text should be accompanied by charts, illustrations, diagrams, and links </li></ul>
  23. 23. Eliminate Superfluous Items <ul><li>Every object on the screen should have meaning. </li></ul><ul><li>Consider removing borders that don’t contribute information and clipart art that is only vaguely related to your topic. </li></ul>
  24. 24. Upper and Lowercase <ul><li>DO NOT USE ALL CAPS! </li></ul><ul><li>Research shows that for most people it is easier to read the traditional upper and lowercase type. </li></ul>
  25. 25. Keep Text Lines Short <ul><li>Keep line lengths between eight and ten words when creating materials. </li></ul>
  26. 26. Single Spacing <ul><li>Use a double space between paragraphs rather than using an indent. </li></ul>
  27. 27. Simplify the Structure <ul><li>Make it as easy as possible for users to find the information. </li></ul><ul><li>Strive for consistency within a presentation and with your webpages. </li></ul>
  28. 28. Limit the Focus <ul><li>Feature one idea per screen. </li></ul><ul><li>Consider a new page on your website section for each project, idea, etc. </li></ul>
  29. 29. Provide Emphasis <ul><li>Use bold , italics , or underlining to emphasize ideas. </li></ul><ul><li>Strive for consistency so viewers can follow. </li></ul>
  30. 30. Know your audience <ul><li>Consider your purpose and your audience before you start. </li></ul><ul><li>If it is a handout, you can use a smaller font than you would for a whole group presentation. </li></ul>
  31. 31. Do Not Flash <ul><li>Do not use flashing text to get the attention of the viewer. </li></ul><ul><li>This makes it hard to focus. </li></ul><ul><li>Instead, use color and location to call attention to the information. </li></ul>
  32. 32. Use Lists <ul><li>Use bullets, numbers, and checkmarks when you can especially on webpages. </li></ul><ul><li>˙ 4 </li></ul>
  33. 33. Navigate consistently <ul><li>Keep navigation buttons in the same position from one screen to the next. </li></ul><ul><li>If you use action buttons in PowerPoint, remember to have them look the same and appear in the same place. </li></ul>
  34. 34. Do not stack text Stacked text (vertical text) is hard to read.
  35. 35. Include multiple graphic types <ul><li>Pictures are just one type of visual. </li></ul><ul><li>Consider adding charts, maps, tables, diagrams, or photographs </li></ul>
  36. 36. Organize the Screen <ul><li>Group objects for meaning and better visual clarity. </li></ul><ul><li>Use a border or white space background to make groups stand out to the viewer. </li></ul>
  37. 37. Size Matters <ul><li>Size determines importance to a viewer. </li></ul><ul><li>Be sure to resize your images to reflect the level of importance you want to convey. </li></ul>
  38. 38. Placement Matters <ul><li>Location also determines importance. </li></ul><ul><li>Items at the top appear to have more importance to the viewer. </li></ul><ul><li>Think of it like the newspaper-the bigger story has a large headline high up on the page. </li></ul>
  39. 39. Additional resources <ul><li>www.webstyleguide.com </li></ul><ul><li>www.colin.mackenzie.org/webdesign </li></ul>
  40. 40. References <ul><li>Gagne, E.D., Yekovich, C.W., & Yekovich, F.R. (1993). The cognitive psychology of school learning . Boston: Little, Brown. </li></ul><ul><li>Marcus, A. (1991). Graphic design for electronic documents and user interfaces . New York: ACM Press. </li></ul><ul><li>Horton, W. (1991). Illustrating computer documentation . New York: Wiley. </li></ul><ul><li>Mayer, R.E. (2001). Multimedia Learning . Cambridge: Cambridge University Press. </li></ul>

×