<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=344430429281371&amp;ev=PageView&amp;noscript=1">

Let's face it: Visual design matters in engaging eLearning

Written by Karen Wang

Published on July 24, 2015

Whether we like it or not, powering up a laptop and signing into a course has become significantly easier than physically sitting through a lecture. While we often lose sleep over the pros and cons of traditional lectures versus online learning, we have to admit that the momentum is headed towards the latter. The truth is, we instinctively want what's better, faster, and cheaper. However, this trifecta can only be accomplished in very rare situations–therefore, we must adjust the variables accordingly to fit the needs of our audience. Here's where eLearning comes into play.

The term eLearning refers to the process of utilizing online resources that allow a broad spectrum of individuals to access information in the form of structured lessons and well-designed quizzes. 

On one hand, we can justify the faster and cheaper aspects of eLearning in this ever-changing digital landscape. A goldmine of information is now at our fingertips and registering is as easy as choosing a username. eLearning also cuts down on the adversities of commuting, personal time constraints, and other logistical inconveniences. With convenience, comes our ability to leave or stay in a course as we please. However in a classroom setting, while professors can be boring, it's socially unacceptable to stand up and walk out. 

In other words, it is easier to quit an eLearning course than a live course. It is no secret that online course completion rates are low, so even though eLearning is convenient for students, it is not perfect. The question learning designers should ask is, "How can we design eLearning so it is more engaging and makes people want to complete it?"

 There are many answers to this question. One of them is to use good visual design.   

So what's stopping the user from exiting out of your course at his or her convenience?

Here's where style plays a massive role in effective eLearning. Without an authoritative figure looming over your shoulder, what's to say you won't zone out of lessons that seem impersonal and generic? Let's go back to the basics. In order to truly captivate your audience, we call upon three fundamentals of design that can make or break your online learning system:

  1. Typography
  2. Color
  3. Layout 

Psychologically, our brains can go wild trying to decipher dense amount of text or multi-colored characters that overpower content. In other words, we want to create seamless modules that are informative, appealing to the eye, and relatable. 

Typography

Squinting is a sign that you're probably doing something wrong. 

Besides videos and images, text is the only way to communicate with your audience. Each typeface, or font family, can convey distinct messages to a reader. Serif fonts like Times New Roman or Cambria are nice and formal, but online, they are hard to read. Serifs are the tails added onto the end of letters that are prevalent in most traditional fonts. Opt for something more legible like Helvetica (a designer's #1 font) or Arial. When bulky content is written in serif fonts, a reader's eyes are strained from exertion and often become a nuisance to read. 

eLearning_Fonts

Lastly, we recommend only using one font for the copy of your lesson. Yes–you heard me. One. Make it bold–fine. Italics–okay. But choose one font family and stick with it. A major design no-no is going overboard with fancy illegible fonts because...

If your type is too small, forget about your reader even making it through the first lesson. Font sizes vary depending on web platform, however, we want to make the text large enough to read comfortably. (Quick tip: varying font sizes within your page can put more emphasis on certain keywords and indicate importance.) Ensure that there is enough s p a c e between letters (referred to as kerning) and sentences in order to create breathing room between ideas. Too much text packed into a tight space can seem daunting to eLearning students.

Color

While color is a great indicator on emphasis, beware of over-use. My rule of thumb is usually to choose one dominant color and pair it with neutral shades or even better–white or black. Depending on your company style sheet, you may choose to accent bold colors with contrasting hues. Many people often believe adding several colors can facilitate excitement or importance, however this practice is usually interpreted as tacky or distracting. Lastly, you want to consider the overall mood you're conveying. Certain combinations of colors have been scientifically proven to evoke specific emotions.

For example:

  • Reds are often interpreted as alarming or attention-grabbing 
  • Green can have close ties to nature, growth, and adaptation
  • Blue has the ability to provide a overall sense of calm

Screen_Shot_2015-07-24_at_1.27.31_PM

Check out this great article written by Canva about the psychology behind color. Color can be seen as a subtle influencer: we tend to downplay the power of color due to lack of conscious attention. But when it's used in an appealing manner, we can facilitate the natural progression of eLearning.

Layout

Layout refers to the relationship between topics and ideas as dispersed on the page. A few things to consider are spacing between ideas, negative space, and the tendencies of the human eye. Informational architecture is a subject of study based solely around how people interact with web pages and in the case of eLearning, how people respond to the information provided. When you enter a site, you want everything to be clean and easy to look at, don't you? You also don't want to have to skim every line to find the meat of the content. As humans our eyes migrate towards the center of a page, and as English speakers, we read left to right. So, logically, we would want to create a visual design that facilitates this motion. Check out the layouts of the Learndot platform and Khan Academy site below.

Layout2_1

Layout1_1

Now that you have the tools you need to create a visually appealing eLearning program, go out there and test the waters! Watch as your design skills set you apart from the crowd.

Check out Learndot

Subscribe to the Learndot Blog