Section 2.5:  Message and Media Components and Design

Placing course content online requires thoughtful examination of the student audience, the course structure, instructional goals, objectives, and learning outcomes. “Creating materials for your online course is more than just developing electronic files of existing hard copy materials” (“Teaching Online Assessment,” 2009. para. 1). When assessing existing course materials for online use, determine the documents and components you need to convert into electronic format. Then tailor each document and component to the online environment with an understanding of copyright laws and accessibility considerations.

Layout of Text Documents

Below are tips for creating effective layout for text documents (“Teaching Online: Message and Media Design”, 2009, para. 7):

1. Organizing your content in manageable clusters or chunks. You may want to use headings to identify each chunk of text.
2. Use sans serif fonts that are designed to be very legible on a computer screen such as Trebuchet, the most legible web font, Arial or Verdana. Font styles with serifs such as Times Roman or Garamond are more difficult to read on a computer monitor.
3. Use Boldface, italics, different font attributes, or other formatting techniques to emphasize and highlight important information.
4. Use bulleted or numbered lists to aid “scanning” or “skimming” (especially on the Web).Example:
   • Step One
   • Step Two
   • Step Three
5. AVOID WRITING WHOLE SENTENCES IN CAPITALS, AS IT IS DIFFICULT TO READ. In the online world, it means you are shouting. Also, capital letters force the reader to read one letter at a time.
6. Avoid moving or blinking text to comply with Americans with Disabilities Act. Blinking and moving text is distracting and very hard to read, especially if one has poor eyesight. Example: Scrolling Text
7. Remember that you don’t need to cover an entire page with text and graphics. Use blank areas or “white space” to make the layout easier on the viewer’s eyes.

Example 2.1 Poorly formatted document (Teaching Online Message and Media Design) which shows no paragraph breaks and the important information is buried in the prose.

Incorporating four basic design principles: contrast, repetition, alignment, and proximity can help the online instructor create documents that are legible and readable allowing the student to focus on the content. Information on each design principle and others ways to incorporate them are below (Williams, 2006):

1. Contrast: Make similar design elements distinctly different to add emphasis and organization.
   • Contrast headline size, weight and style with body copy size, weight and style
   • Use proper shading of boxes and text so that text is legible and easily read.
   • Shade colored boxes no greater than 70% opacity when using black text.
   • Shade colored boxes no less than 30% opacity when using reverse text (white text).
   • Contrast soft color with a bold color
2. Repetition: Use repeating design elements throughout to add consistency and continuity.
   • Format headlines, titles and body copy so they have the same font style and size.
   • Repeat a consistent color scheme.
3. Alignment: All design elements have a visual connection with something else on the page. Nothing is placed on the page arbitrarily.
   • Align photographs with captions
   • Align headlines with articles
   • Align headlines left with left aligned, ragged right text
4. Proximity: Group related items together. If items have a relationship, they should be near one another.
   • Group each photograph, chart, illustration with its respective caption.
   • Group headlines with respective article.

Use of Color

The following examines reasons for using color, avoiding color, and choosing color for instruction (Lohr, 2008, p. 266):

1. Reasons for Using Color
   • Color may be necessary (medical students need to know the color of healthy versus unhealthy tissue, jewelry students need to know the correct color of a soldering flame and color of metal when heated correctly).
   • There are many researched-based advantages for color. Misanchuk et al. (as cited by Lohr) includes the ability to attract and control attention, add visual cues, locate information, link logically related data, show associations, tie together related items that are scattered, aid in differentiation and discrimination among elements, facilitate identification, rank items, highlight student errors, differentiate between required and optional data, and aid decision making.
   • Learners prefer color
2. Reasons Against Using Color
   • Color may not be necessary.
   • Researchers have found color to be distracting and confusing. Chapman (as cited by Lohr) found if color is added to a presentation and not functionally related to the task, its presence can act as a deterrent to performance” (p. 14).
   • Learners may not have the technology to access color adequately.
3. Choosing Color for Instruction
   • Selection – choose colors to make important information stand out and improve learner selection.
   • Organization – choose colors that will establish an order of importance (hierarchy).
   • Integration – choose colors that help the learner see the big picture (gestalt). Color can tie complex information together in aesthetic, organizational, and psychological ways.

Graphics

Use graphics to illustrate, organize, and explain ideas and concepts. Incorporating images, graphs, and charts not only makes your online course more visually appealing, they can clarify content, convey information and help students retain information. Remember all graphics must have alternative text or text descriptions provided.

Figure 2.1 Example of Incorporating Graphics in an LMS (“Teaching Online: Color and Graphics”)

Multimedia Components

Incorporating multimedia components such as videos, games, and animations can make the online course dynamic and interactive. Below are several guidelines for incorporating multimedia:

1. Verify and notify online students of any plug-ins or required software needed to view videos or animations.
   • Video containing audio must have captioning.
   • Audio files must have text transcripts.

Resources for Design Principles