Have you ever given up on a web site because you couldn’t find what you needed? Lots of things are said to be about location, location, location. The arrangement of content on a screen is one of them. The layouts and visual hierarchies of your organization’s eLearning courses can either help learners process information or leave them completely confused.
Let’s look at two quick examples, just using text:
Example 1
That probably made your brain hurt. Now imagine what it would be like with graphics and interactions sprinkled in too. That’s what a course with poor visual organization feels like to learners, even if the content is good. It’s frightening, but it does happen.
Here’s the same content with a better treatment.
Example 2
Overall Blog
- Introduction
- Two Quick Examples
- Best Practices
- Special Considerations
- Mobile
- Accessibility
- Conclusion
Wasn’t that easier? You probably even learned something from that quick glance. Now let’s dive into how your organization can help make that happen in its eLearning.
Best Practices (for Western Cultures with Left-to-Right Languages)
- It causes confusion when similar elements are positioned differently or given different visual treatments. Remember Example 1? Use templates, style guides, and consistent structure to keep everything unified and easy to understand.
- Using too many fonts makes it difficult to tell “what’s what.” You can generally stick to two fonts in a course, one for titles and one for the body copy.
- The left side of the screen naturally draws more interest than the right side. Put the most important content on the left and secondary content on the right to take advantage of this. The center of the screen gets a reasonable amount of notice too.
- On the web, readers tend to skim text in an F-shaped pattern, rather than reading word-for-word. Left align onscreen text and put the most important information at the top to take advantage of this. Don’t justify text, it makes it harder to skim.
- People also prefer short lines of text over ones that stretch across the whole screen. Consider using a column of text instead. See the “Accessibility” section for a cautionary note.
- Graphics attract attention, so use them carefully. Only include graphics that support the content and ensure they don’t make onscreen text difficult to read. You can also use them to direct the learner’s attention by pointing out important onscreen elements. Arrows and highlights are often used to do this, but having the learner follow the eye line of a person in a graphic is also effective. For example, if a person onscreen is “looking at” something the learner is more likely to look at it too. Avoid graphics of people looking off screen or away from important content. Your learners’ gaze will follow that too.
Special Considerations
Mobile
Navigation and interactivity for smartphone-focused eLearning should be near the lower right of the screen. Most people are right handed and hold smartphones vertically, so this makes it easier to reach those screen elements.
“On hover” features, like tooltips, don’t work without a mouse. You should make sure there’s screen real estate available for prompts and instructions.
Screen readers (in western countries at least) read information from left to right, from top to bottom. As a result, a number of them ignore columns. If two columns of text are next to one another, a screen reader may read the first line from each column and then move on to the second line of each. That’s really confusing. Try to avoid having multiple columns of text on the same screen.
Good layouts and visual hierarchies are a must for helping learners get the most out of your organization’s eLearning. Poor design, or a lack of design, can cause serious frustration. Use solid design principles and remember to take special considerations into account. What do you do to keep your courses organized and viewer-friendly? Leave a comment and let me know.
Special thanks go to graphic designer Ryan Coker for his help (again).
If you’d like to learn more about custom eLearning course creation from Digitec Interactive, visit our eLearning page.
If you’d like to read more about instructional design best practices, check out the rest of this author’s blogs.
Ready to find out what Digitec can do for you?
