8 Considerations for Online Text

Are your students reading what you're displaying? Professor of Instructional Technology Scott Fredrickson and Associate Professor of Educational Administration Patricia Hoehner, both of the University of Nebraska at Kearney, provide eight factors to consider when presenting text for online courses.

• By Scott Fredrickson, Patricia Hoehner
• 03/13/13

Teaching a hybrid or totally online class is a difficult but satisfying experience. An instructor cannot merely take an existing face-to-face class, dump the content into a course management system, and expect students to garner all the crucial information or experience the same level of success as the original class. Certain fundamental design principles must be considered and included in an online course to create an effective class with readable, on-screen content. Used wisely, they can be effective tools to help students comprehend the material, which is the primary purpose of any good teaching. Below are techniques and strategies for addressing eight areas of concern when creating text for online resources.

Reading text on a computer monitor is not the same as reading text in a book or on paper. Although many faculty are now delivering instruction using course management systems (CMS), Web pages, or other Web delivery methods, most faculty are not using strategies and techniques that effectively assist their students read on-screen text and comprehend it. Typefaces, information placement, using colors, margins, and font size all determine how much content students will read, perceive, and internalize.

According to Garland and Noyes (2004) it is more difficult for students to transfer knowledge from on-screen text compared to learning the same knowledge from a paper-based text. Mong (2010) states that students do not read online text, they simply scan it. One serious issue with online text as Brezicki (2010, p. 23) noted is "the reader's eye doesn't lock onto the words in the same way, and the reader's brain has fewer nanoseconds with which to process those words before they are whisked away." Another difficulty pointed out by Robertson (2006) is that "…students' struggles to comprehend online readings are not simply a feature of the medium; they are the product of the failure of… teachers to employ the unique properties of the medium." If on-screen readability is a problem, what can online faculty do to improve text readability for their students?

White Space
One of the problems plaguing many online courses is cluttered textual material due to presenting too much text and having insufficient white space. White space is the term used in publishing that refers to the part of a document that does not include text or images--the "paper," if you will. The color of the paper or the screen today is irrelevant to the name; it is still referred to as white space.

Imagine a screen with solid text from one side of the screen to the other and from top to bottom--what could be called a "full screen of text." Would your students read it? Would you? Not likely. It is overwhelming, overpowering, and intimidating for most people. However, if proper amounts of white space and other design principles are used that same text would most likely be read.

Chaparro, Baker, Spring Hull, & Brady (n.d.) found that white space "… affected both reading speed and comprehension" (p. 6). With white space on the margins, students read slower and showed improved understanding and internalizing of the material. Chaparro, et al. also noted that the use of leading, which is the vertical space between lines, did not have an impact on actual reading performance, but it was preferred by the subjects. They liked it more, and therefore would spend more time reading the material.

Both word processing programs and Web editing programs allow the user to adjust leading and the margins easily. For images, instructors can add padding, which adds additional white space on all sides of the image. Padding and/or margins can be used to prevent text from abutting images, which is distracting and can break the train of thought of the reader. A cluttered overpowering screen is a bad screen for content.

Limit Text
Hand-in-hand with white space usage is too much text being displayed on-screen. Online faculty should limit the amount of text on-screen at any given time. Many of us come from backgrounds that include publishing on paper. Paper has a cost, so the more text you can include on a page, the cheaper it is to publish. That is not the case online. Essentially, there are no extra costs when extra screens are included. It might be easier to create a full screen document, but it will not be easier for students to read.

Instead of one long document, divide it into four or five sections and create four or five screens with much less text and hence, more white space. It is our firm belief that one should never create an on-screen document in which the reader has to scroll down or across a screen.

Alignment
Readers are used to reading left justified text; therefore, the body of each online document should also be left justified. Headings and labels can be centered, or right justified, or perhaps, in rare cases, even fully justified, but body text should never be justified any way other than left.

Many textbooks and novels are fully justified, which spreads the text on one line across the page by placing additional spaces or microspaces between the letters and leaving smooth margins on both edges. It can make the page look more "uniform." Full justification might make the screen appear more consistent from a distance, but it also increases the possibility that readers will misread or simply stop reading the material.

When choosing between a "messy" or jagged right margin and readable text or two straight, "pretty" margins with text that is more difficult for students to read, readability should always win out.

Typefaces and Fonts
As a brief reminder, a typeface is a family of graphic characters that includes many type sizes and styles of characters, such as Times Roman or Arial. A font is a particular size of a typeface, such as Times Roman 12 points or Times Roman 14 points. Times Roman 14 points and Times Roman 14 points Bold and Times Roman 14 points Italics are three different fonts; however, they are all one typeface.

Most fonts are one of two types--serifs or san serifs. A serif is the little mark at the end of the stroke of the character. Originally they were developed when letters and numbers were chiseled into stone. The serif would "end" the stroke and prevent it from cracking over time and destroying the rest of the stone. Times Roman and Rockwell are two well-known serif typefaces. Obviously, san serif typefaces do not have serifs. Verdana and Aril are two san serif typefaces that most faculty members have on their computers.

Serif typefaces are used extensively in written work. The serif tends to help your eye say on the correct line of text while you are reading. On a screen, however, the serifs become a problem. They tend to make the letters "blend in" with the next letter a bit, making each letter harder to read and distracting the reader. Rodriguez (2008) noted that online teachers should use a san serif font on body text and a serif font on headings and labels.

Veranda, a sans serif typeface, and Georgia, a serif typeface, were created specifically for viewing on-screen. Most machines have those typefaces built into their systems, though some might not. Some individuals argue that faculty should use the "default serif" and the "default san serif" typefaces because if the reader's computer does not have the specified font, that system will substitute a different font and it could make the screen very distracting. As widespread as Georgia and Veranda are today, we do not think that is an issue any longer. As will be discussed later, since most of us will use a CMS that has a white background, we recommend that faculty use a typeface with a broader stroke for the characters, such as Arial or Georgia.

At a minimum, instructors should use a 12 point font for body text. Outing and Ruel (n.d.. p. 3) noted that "smaller type encourages focused viewing behavior (that is, reading the words), while larger type promotes lighter scanning." Twelve point font strikes a good balance between those behaviors.

Use of fonts should also be limited to a maximum of three on-screen at one time. Using more will generally simply add a distraction. When using different typefaces on-screen, they must harmonize or they too will be distracting and add clutter.

Case
Upper case characters are very effective in attracting attention if they are used properly. Unfortunately, many faculty use upper case characters too often, diluting the effect it can create. Upper case letters should only be used for short headings and labels. People are used to reading dual case text and single case text distracts the reader. Sentences should start with uppercase letters and be constructed of lower case letters. Text that is all uppercase or all lowercase interferes with the content, and more importantly, students' learning and retention of the material. It also decreases the contrast between and among the characters, which makes them more difficult to read. In the online world, all upper case is also considered "yelling." Most of us do not appreciate being yelled at and neither do our students. Those of us who were used to the old student information systems where all the text had to be inputted in uppercase should look for the caps lock key on our keyboards and toggle it off.

Underlining, Italics, and Bold
Avoid underlining except for hyperlinks. It confuses people who are used to underlines being hyperlinks and Outing and Ruel (n.d.) noted that it discourages people from reading the accompanying text.

Overusing italic or bold fonts is distracting and tends to make the reader's eyes hurt over prolonged reading periods. They also both add additional fonts to the screen, which, as mentioned above, can be distracting.

Color
Color is a critical visual factor for on-screen reading, whether it is on presentation slides, Web pages, or in the CMS itself. Evans and Thomas (2008) noted that "the role of color in visual communication is complex. It is undoubtedly the most researched; most visualy powerful; and since the advent of computers, the most technical of all elements of design. It enhances the viewer's response on a variety of levels; it heightens the viewer's perception and intensifies emotional and psychological reaction" (p. 107).

For readability, background colors should be dark and the fonts should be light because a light background will cause glare which will eventually negatively impact the readers' eyes. Perhaps more importantly, the brightness will tend to "overlap" the stroke of the darker letter, thereby "erasing" or hiding portions of it, making reading harder.

For an example, let's look at the upper case I. On a computer monitor, light tends to "bleed over" a bit into neighboring pixels. If our letter I is black, and the background is white, the white will bleed into the vertical portion of the thin stroke of the I, which makes it appear that the vertical stroke is even thinner or may even make it "disappear" on the reader altogether. When reading quickly, one has to almost stop to determine if the I is indeed an I, or if it is perhaps an uppercase T or maybe even a J.

If the background is dark and the letter is light, the reverse happens. The small, vertical stroke of the I "expands" outward into the black background, not inward, making it "easier" to perceive because the stroke is a little thicker.

Presentation programs like PowerPoint and Web editors such as Dreamweaver allow the online teacher to control all elements of the design, which include background and foreground colors. Unfortunately, most course management systems do not allow the instructor to truly control the color options. With the six course management systems we have used none of them allowed us to change the background color and all of them used a white background with font that we could only partially color control. Even with those parameters, there are still a number of color strategies one can use to enhance the readability of textual materials when using a CMS.

Most Web designers use bold or colors for emphasizing text, which are good examples for online faculty to emulate, though they do need to be aware that people have very specific reactions to certain colors. Marks, MINE, Origin, & Sutton (2009, p. 384) stated that "… our (emotional) responses are partly physiological, based on the effects colors have on our eyes and nervous system, and partly influenced by our environment and life experiences." For example, colors that are deemed hot, such as red, orange, and yellow, get attention by appearing to jump off the screen at the viewer because they have the longest wavelength of colors and require more energy for the eye to perceive them. Cool greens and blues, on the other hand, are soothing and comforting.

Other colors create different reactions, according to Marks, et al. Yellow is a happy color, but too much of it can be upsetting. Gray is a formal, dignified, authoritative color. Women tend to prefer blue-based reds, such as maroon and burgundy, and men prefer yellow-brown reds, such as rust or chestnut. Green stimulates interaction and black connotes finality. Mucciolo and Mucciolo (2003) have suggested not using browns and purples because brown make students feel uneasy and purples appear immature. 

Given this, to make sure students notice a comment about a critical timeline, such as filing for graduation or applying to take a comprehensive examination, it should be red or possibly orange. To prevent them from tensing up about a quiz, the notice should be blue. It would be even better for relaxing students if the quiz screen featured light blue font on a dark blue background. When "lecturing by text" gray would be a good color for the typeface, while black could be used for due dates.

Online teachers need to use strong contrast regardless of the colors that are used since approximately eight to 15 percent of their male students and one half percent of their female students will have some form of colorblindness and many other students will have a visual impairment of some sort. A strong contrast between the background and the foreground will enable all of those students, as well as students with normal vision, to read the textual material easier, enhancing comprehension.

Online teachers should also avoid highly saturated hue combinations, such as a bright blue with a bright red. Not only do they fail to have contrast, but they are simply overwhelming for the reader. The color combination with the best contrast is a dark blue background with yellow text. Since most online faculty cannot control the background color and are stuck with white, we would suggest a dark blue font on that white background. In addition to high contrast colors, please remember that for visually impaired students, alt text labels for images must be included and frames should be avoided in Web pages.

Placement
Since the most important aspect of an online class is content, its placement is critical.

According to a study by Outing and Ruel (n.d.), when students enter a site, they tend to look in very specific areas. The initial location for the students' gaze is to the upper left quadrant of the screen. Then they look at the areas immediately below and to the right of that initial quadrant. Finally, time and attention permitting, they look at the lower edge and the far right hand edge of the monitor.

Since most online and hybrid faculty use course management systems, just as we encounter with color, they normally do not have much leeway in arranging objects in their systems. The structure of the CMS is created by the developers of the product and users are generally stuck with not being able to move objects to different locations.

However, there are still things that faculty can and should do to improve the chances that their students will read them. The first is to place important information as far left and near the top of the screen as possible. Use that valuable visual real estate first since students will view that section even if they tend to skip the remainder.

Since people will also take time to view an image, placing one on the bottom right of the screen will attract their eyes to an area that is normally a low visual priority. Use of attention-getting colors in the tertiary priority area will also attract the students' eyes to information located there.

The single most important screen placement action that faculty can take in their CMS or their own Web sites is to place critical items, such as announcements and navigation links, consistently in the same location. That will let students know where they should always look, even if it is not the high priority area.

Whether the class exists completely online or is hybrid, screen design and layout are critical components of presenting content to online students in a way they can learn it. The most important aspects of the design elements and principles are to:

• Avoid clutter and use white space;
• Limit the amount of text on-screen at any given time while left justifying the body text;
• Use three or fewer fonts and include upper and lower case characters;
• Include appropriate colors to attract attention to important information; and
• Place critical data and navigation devices in consistent and specific locations.

Faculty devote many hours developing content for their online classes. Unfortunately, many fail to consider the readability of their course documents, presentations, lecture notes, and similar textual material. Problems such as lack of white space, overabundance of text, multiple typefaces, poor use of color, and ineffective screen placement can distract students and discourage them from reading the materials.