Seven Guidelines for Designing Effective Course Pages for the Online Classroom

The design of your course pages can have a significant effect on the learning experience in your online course. Good design can draw students in, help them comprehend the information the first time they read it, and enable them to easily retrieve information, says Sheree Webb, an instructional designer at Tyler Junior College.

In an interview with Online Classroom, Webb suggested designing courses in a simple, consistent manner, employing the following principles:

1. Use meaningful headings and subheadings. One of the most common errors in course design is pages and pages of plain text without any entry points. “I think that overwhelms students. It makes them not want to even start reading the page,” Webb says. She suggests breaking up the text using headings and subheadings that provide clues as to the kind of information that will be found in that section, such as “What is a sonnet?” “What are some famous sonnets?” and “How can I recognize a sonnet?” rather than “Purpose,” “Summary,” or “Conclusion.”
2. Use graphics and tables to help communicate your information. “Think of where a graphic might work. I’m very text focused, so it takes me some thought and work to figure out where a graphic would work. If I’m talking about some sort of theater design, I’ll show pictures of various designs. Don’t just tell them what a proscenium stage looks like. Show a picture of it. If you’re talking about parasites, put up some pictures of what those parasites look like instead of just describing them,” Webb says.

   Tables are another way to convey information graphically. Webb uses if-then tables. These are two-column tables with a scenario in the left-hand column and its implications on the right. Here’s a simple example:

If dinner is	Then serve
Salmon	Riesling
Pizza	Pilsner

3. Use bulleted and numbered lists where appropriate. Webb recommends using numbered lists if you’re providing students with a sequence of steps to follow and bullets to highlight lists. Like headings and subheadings, these vertical lists provide a visual hierarchy and clues as to what is on the page. These help the student process what’s on the page before reading the actual words.
4. Select typeface for on-screen readability. Webb recommends Verdana, Georgia, Trebuchet, or Lucida. Webb says that designers and readers often have different opinions on what font size is appropriate for on-screen reading. Designers often select 10-point font for aesthetic reasons and to fit more information on a page. Readers typically prefer 12-point font, which is what Webb generally recommends with one caveat: not all 12-point typefaces are the same size. For example, 12-point Verdana is larger than 12-point Trebuchet, so you might need to use a 13- or 14-point font.
5. Provide enough contrast to improve readability. Color can add an interesting element to a page, but use it sparingly and not if it reduces the contrast between the text and the background to the point where readability is diminished. Webb recommends black text on a white, light blue, or light yellow background.
6. Divide text into manageable chunks. Webb’s rule of thumb is to create pages that contain no more than one or two screens of information (or one to one-and-a-half pages when printed). The reason for this is that when readers scroll, they may not be able to see which section they’re reading from and as a result may lose the context of what they’re reading. If chunking the information in this manner does not seem appropriate for your content, consider creating a PDF that contains all the information for students to print and create an online version that is in manageable chunks.
7. Align text and heading on the left. The reader’s eyes tend to go down the left side of the page; therefore, centering headings or text makes the reader work hard to go from centered text to the left margin.

For a demonstration, click on the video below.

Reprinted from Course Page Design Tips Online Classroom, 12.6 (2012): 2-3.