Designing Online Learning Spaces (1): How will you read this page?

Picture a science lab in your mind; now picture a lecture hall; finally, picture a piano studio. Most likely, each space that you imagined looked very different.

Just as the setup of a physical classroom implies a particular set of activities, so too, the design of an online class suggests a specific set of actions. This post is the first in a series of practical insights into how to better conceptualize the design of online learning spaces by looking to the field of user experience design.

What is UX design?

UX design stands for “user experience.” At its most basic UX design looks at how humans make their way through a designed environment. In the web world, good UX refers to websites that are easy to navigate, load quickly, and present information in a logically unfolding manner that requires minimal thought from the user. Bad UX refers to websites that contain complex and convoluted navigation. Also, these websites might have slow load times or broken links. Bad UX requires the user to click through and try to decipher abundant content before finding the necessary information.

Though there are many UX professionals working today, you don’t have to be a UX pro to layout websites that support good UX design. Good UX is grounded in an understanding of how people read and engage with online content.

How do people read the web?

Eyetracking, or following people’s eyes as they performed activities on websites, has shown that the majority of people do not read web pages word by word rather, people scan web pages picking up the occasional word or sentence.

Two of the most common ways people track through a website (also known as a visitor’s gaze patterns) are the:

• F-pattern
• Layer Cake Pattern

The F-pattern

The main pattern people scan content online is in the shape of a capital F. For example, the first move visitors will take is to read horizontally across the top of the screen content area. This first scan is much like the F’s upper bar. Next, visitors will move down the page and scan a second horizontal line, like the F’s middle bar. Finally, visitors will most likely move down the content’s left side in a vertical line, scanning for crucial additional information which forms the vertical stroke of the F. Designing with this F in mind ensures that you place important information in a places that will make the most sense to visitors.

Note: When web content uses alphabets that run from right to the left, they also scan in an F-pattern, but in a flipped manner.  When designing content for languages that use non-western alphabets, the same rules apply just in reverse.

Design Suggestions to Support F-Pattern Reading

• Put the most important information near the top of your page, ideally in the first two paragraphs.
• Use bulleted lists, headings/sub-headings to break up content
• Keep paragraphs short with no more than one idea per paragraph.
• Avoid putting important information on the right side of the layout.

Layer Cake Pattern

Another pattern people use when engaging screen-based content is the layer cake pattern. This pattern asserts that people scan sites from heading to heading (or heading to subheading) with only minimal reading/scanning paid to information in between. The headings or subheadings become horizontal stripes with blank spaces in between where readers tend to skip or pass over information. The layer cake pattern allows visitors to identify the content they need that is more relevant to the task at hand. Designing with this layer cake in mind ensures you pace out information on a page, being mindful of both the full and empty spaces within every page.

Design Suggestions to Support Layer Cake Pattern Reading

• Make headings and subheadings visually stand out from the rest of the text. Establish a visual rhythm and stay consistent.
• Group text so it clearly matches each heading in placement
• Chunk text so it logically builds in knowledge progression
• Anticipate key words an audience will identify as relevant content and use those words as headings/subheadings

In conclusion, the user experience (UX) of an online classroom is not unlike the arrangement of furniture in a physical brick and mortar classroom. Creating online spaces that honor how students are already navigating the web allows everyone involved in the learning process to contribute to a more effective and human-friendly experience.

Curious to learn more about UX design? Or want to read further about eyetracking research? Check the Nielson Norman Group, a research-based user experience agency: https://www.nngroup.com