Keeping eLearning Readable – Visual Readability

By Joseph Suarez

Though at times challenging, a good instructional designer can transform a complex process into a simple message in the hopes that knowledge will be transferred and retained. However, many factors -- both preventable and unpreventable -- can interfere with that message and hinder learning retention. One such preventable barrier is poor visual readability.

What is readability?
Readability is all about how well text can be read and understood, and it can be thought of as having two equally important sides: contextual and visual. The contextual side focuses on how well text can be understood by the reader. A writer can influence this with choice of words, number of syllables, sentence length, etc. Several tests exist to determine contextual readability, and you can use free online tools to test your own writing.

On the other side, visual readability is determined by how well text can be seen and sent to the reader’s brain to be processed. While this is traditionally a graphic design role, everyone is probably familiar with at least some of the many small factors that come together to affect overall visual readability. Most of these factors fall into two categories: typography and spacing.

Typography

• Font choice
• Text size
• Text color (contrasted with background)
• Text weight (how bold text is)

Spacing

• Legibility (how far apart letters are)
• Line & paragraph length
• Line height (distance between lines of text)
• Margins and white space
• Distance of text to other elements (images, other text, etc)

Unfortunately, many eLearning development tools don’t have strong spacing options, and it’s usually up to the developer to work within the confines of the tool to ensure a reasonable amount of space is used. This may require some extra pixel pushing, but in the end is well worth it.

Below is an example of a block of text where no attempt to improve visual readability has been applied.

Contrast that with this other example with visual readability improved:

The overall effect is achieved by the factors previously listed, such as contrasting the text headers from the main body with size and font choices, and applying improved spacing through line height.

The end result is text with greater visual readability. This removes a barrier to learning retention as it gives the reader’s eyes and brain a break, so a learner can focus more on processing and storing the content itself. Plus, it’s more pleasing to the eye and inviting. All the more reason to keep eLearning readable.