If you’re using narrated slide presentations in your course you’ve (hopefully) thought about the visual design of your slides. But what about the rest of your course? Does it matter what that looks like?

Well, yes, actually it does. Generally speaking, your online course sits in a website. Your students experience it as a website just as if they were shopping on Amazon or perusing news stories on CNN.com. There’s been a lot of research done on website usability over the years and visually pleasing interfaces are more usable (Norman, 2003). Working with visually well-designed tools and content supports positive emotions which are important to learning, creative thinking, curiosity, motivation, and the ability to cope with minor problems.

Visually pleasing doesn’t mean putting in time and effort to make everything look fancy. It’s pretty much the opposite of fancy and there are a few simple guidelines to help you get started. The main three effects of visual design that are the most important when developing an online class are related to attention, comprehension, and trust.

Visual Design and Attention

As you have likely experienced, students don’t always pay attention to everything you give them.  That’s not unexpected since people, in general, don’t pay attention to everything they do and read.

For example, if you weren’t paying attention, could you tell how many times the team in white passes the ball in this video?

Just like directing your attention in text to how many times the team passed the ball, there are certain visual features that draw our attention and indicate meaning. (Peters, 2004)

• Size – the larger, the more important. Level 1 headings are larger than level 2 headings for a reason.
• Grouping – by proximity, similarity, or connectedness. All the readings for the module go together, all the assignments go together but visually separate from the readings.
• Position – certain things always go in a specific part of the page. The Back and Next buttons that Canvas puts at the bottom of each module item is an example.

By using the built-in heading styles and separating content into different sections on your syllabus, module overview page, or any other text-based documents or Canavs pages you create, you’re drawing student attention to what you consider important.

Visual Design and Comprehension

When you are presenting and explaining things to your students, the goal is comprehension and learning.  Writing for readability is a good way to start, but it is important to not overlook the way in which your text is presented visually.

For example, which block of text is easier to read?

Native speakers of languages written left to right have difficulty reading centered or right-aligned text because people look for a consistent starting point for each line of text. When our eyes and brain have to search for the beginning of each line, it takes us longer to read, increases effort, and reduces efficiency. Native speakers of languages written right to left or top to bottom have the same difficulties reading text that does not consistently begin where they expect it to begin. Centering headers is fine but larger blocks of text should be aligned to the proper side for the language.

Emphasizing Text

Highlighting in textbooks has been shown to be an ineffective study strategy as students tend to think everything is important and end up highlighting almost everything there. At that point, it’s all very colorful, but to no purpose. Even though you can highlight text in Canvas, less is definitely more. If you must highlight, focus on the most important thing – the thing the students are most likely to miss. When highlighting, use the lightest colors. If you highlight in dark colors you loose the necessary color contrast to comfortably read the text. <-that says “If you highlight in dark colors you may lose the necessary color contrast to comfortably read the text.” The same recommendations apply to text color, as changing text color to anything that is not black lightens the text, making it more difficult to read on a white background. Also note that students using screen readers have no indication that text is highlighted so don’t rely on color alone to indicate something is important.

Using bold text is helpful to highlight words or short phrases but longer sections of bold text are difficult to read. While italics sets off a word or phrase from the rest of the non-italicized text, italicizing text makes it not only harder to read, but also smaller and, at times, lighter in color. This makes text in italics appear less important than the regular text surrounding it. Y(ou often see parenthetical comments in italics to indicate it is not particularly important but perhaps interesting.) 

What about fonts? (for Word documents and PDFs)

High definition displays mean the old rule of thumb of serif fonts for paper and sans-serif fonts for the screen no longer holds true. Current display technology can render serifs as cleanly as a printer, so there is no need to restrict your font choice just because it’s likely your students will read your documents on a screen. However, there are still a few things to consider before choosing a font (or fonts) for your materials.

While readability generally refers to the content of the text via a Readability Checker, font also plays a role. If students can’t decipher the words easily it doesn’t matter if it’s at or above their reading level. Letters have to be quickly and clearly distinguishable from one another in order to read words and phrases easily, without having to stop to think about individual characters. Font not only affects the ability to decipher instructions but can also affect the motivation to try to follow them. For example, Song and Schwartz (2008) showed that students given either exercise instructions or recipes in an easy-to-read font believed that they would be able to complete the actions required and were more willing to try. Alternatively, participants who were given the same instructions in a hard-to-read font comprehended less of the text and, as a result, thought the instructions were more complex, doubted their ability to do what was asked of them, and were less willing to even try. Generally speaking, the clearer font is the more learning-friendly font.

Visual Design and Trust

Research shows that people make decisions about the credibility of a source based in large part on how the content looks. Whenever you take in information from any source, your brain evaluates that information based on the combination of a cognitive component (to assign meaning) and an affective component (to assign value). Research consistently has shown that human beings value things they perceive to be attractive and tend to evaluate them as more trustworthy, professional, and credible (Metzger, Flanagin, & Medders, 2010). In fact, in one study over 46% of the credibility decision was based on visual design (Fogg, et al, 2003)

In this research, visual design includes having a logical layout, using readable and appropriately sized fonts, using white space to separate sections of a page, professional-looking images, and muted color schemes. Materials ranked poorly in these areas were not seen as trustworthy regardless of the source of the content. Credibility was lowered even more if the content included problems with writing mechanics such as grammar and spelling.

What this means to you is that in addition to writing in a conversational style and using you and your, you should also consider how your materials look if you want students to perceive them as reliable. For example, using clip art doesn’t inspire confidence. The image below is an actual slide from a presentation by CERN, the European Organization for Nuclear Research, on a breakthrough in particle physics. Does this lead to confidence in their work?

Improving Visual Design

Having someone else review your course for visual consistency, layout, and usefulness of graphics is a good way to find issues that you might not notice yourself.  Don’t worry about having someone who knows your topic area take a look since they are not reviewing content – and your students won’t know the content in advance either. Here are some questions you might have the person looking at your course try to answer.

• Do you have relevant images (charts, graphs, diagrams, pictures) to break up longer sections of text?
• Are your images crisp and clear (not skewed or blurry)?
• Do your images have a similar look and feel to them (photos with photos, line drawings with line drawings, etc.)?
• Are your images illustrating concepts or providing examples (not only decorative)?
• If you have images with text in them, is the text clear and large enough to read? Does the alt text include the text in the image
• Do different sections of your page have enough white space around them to be clear what belongs with each one?
• Is your text almost all left-aligned (unless you’re teaching a language that reads right to left)?
• If you use color, is the color contrast strong enough for everyone to see? Are there concerns for individuals with color blindness?
• Is your text almost all in the default font size? (Students can adjust the font size in their browsers to meet their individual needs so there is no need to make fonts larger than the default.)

For a good tutorial on visual design, basics see Clean Up Your Mess – A guide to visual design for everyone