You might practice information design every day and not know it. Information design refers to transforming complex, unorganized or unstructured information into meaningful and easily-accessed content. Sound familiar?
Information design is multi-disciplinary. It’s concerned with visual presentation, the structure and organization of content, the accessibility of information and how it is used. When information design is effective, communication is clear, accessible, usable and in our case, capable of being learned. Here are some principles related to paragraph text design that should be useful to instructional designers.
1. Left-justify paragraphs
Left-justifying paragraphs of text is good. Centering paragraphs of text is bad. Skilled readers automatically move their eyes to the same left margin and down one line when reading paragaphs. If the text is centered, the automatic movements of the eye end up at the wrong place. This slows down reading and could interfere with comprehension. Read the paragraph below and see if it slows you down.
2. Place text on a quiet background
When the background is noisy, it provides extraneous visual cues that disrupt word perception. If you’re using a background photo, simply place a slightly transparent box of a solid color behind the text. The photo will show through ever so slightly and the text will be easy to read. In the example below, text placed on a solid color is more readable than if it were placed directly over the photograph.
3. Avoid underlining words
According to Robin Williams, author of The Non-Designers Type Book, the underline interferes with the letters it is emphasizing. It’s a throwback to typewriters, when there were few options for showing emphasis. According to me, avoid using the underline because readers will think it’s a hyperlink, as in the link to the book above. For emphasis, use bold or italics.
4. Use high contrast between text and background
Research shows that higher levels of contrast between text and background generally lead to greater readability (Hall et al. 2004). Contrast is the difference between two colors, often perceived in terms of the intensity of a color or its saturation. A color’s saturation has a numeric value, which you can find in both Photoshop (use the HSB palette) and PowerPoint (select the HSL palette). When the text and background colors are of a similar saturation it reduces contrast. In addition, the contrast in brightness or luminance also improves readability.
5. Use dark text on a light background
Studies show that reading dark text on a light background is easier than the reverse (Hall et al. 2004). The eyes won’t tire as easily and it seems to be a preference among readers. Even though dark on light has a high contrast, we need a well-lit background to succeed at reading quickly on the computer screen. Some cases where light on dark can usually work include presentations in a large room, large titles and anywhere the text is brief.
6. Limit the range of color values in a gradient text box
It’s hard to know what text color to use when a gradient fill has a wide range of lightness to darkness, also known as a color’s value. When the background changes drastically, the text color might only have a sufficiently high contrast in a part of the text box. On the other hand, a gradient with a limited range of colors has an acceptable level of contrast across the entire text box.
According to the Information Design Network, “Wherever relatively complex information needs to be made easier to understand, or tailored to the needs of a specific ‘specialist’ or cultural community, the ‘user-oriented’ methods of information design can be employed.” I’d say that eLearning, job aids, participant manuals and other instructional materials can benefit from the best practices of text-based information design.
What are your tips for designing with text?
Related Articles and Resources
Information Design Handbook: Book Review (article on this site)
We Design Information Too (article on this site)
International Institute for Information Design (organization)
Instructional and Information Design Degree Program (university program)
InfoDesign: Understanding by Design (website)
Hall, Richard H. and Patrick Hanna, 2004. The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behaviour and Information Technology: 23, 183-185.