6 Design Principles for eLearning


Robyn Collinge

October 12, 2017

Back to Resources

Gone are the days when learning was confined to classrooms filled with rows of clunky desktop computers. Smartphones, tablets, and modern technology in general have made online learning, also known as eLearning, accessible to everyone.

With this in mind, UX designers need to consider certain design elements that will ensure effective learning regardless of device. One of the main factors to impact effective learning is the struggle to retain information when you’re overwhelmed by too much text, too many visuals, or both.

We looked into how this need for simplicity impacts the six eLearning design principles – which take into account wider adult learning theories as well as general best practices for eLearning design.

1. Multimedia Principle

For learning, using a combination of media types is more effective than using text alone. But beware, research shows that using irrelevant graphics can actually impair learning.A combination of relevant visual, audio and textual content works well; however, the most effective pairing is visual and audio together. Bear in mind that people can generally only pay attention to one visual and one audio element at a given time, so try to keep it simple.

elearning design


This is a good example of an interface applying the multimedia design principle effectively by using a combination of one audio and one visual element per frame. The audio graphic in the third frame is directly relevant to the task requiring users to listen to a spoken sentence. This allows users to focus on one task at a time and reinforces their learning.

2. Contiguity Principle

Because eLearning often takes place within a scrollable interface, the tighter the text-graphic alignment, the easier it is for users to understand the relationship between each element.

The psychology behind this principle is that the less space there is between an image and its description, the less work there is for the learner’s brain.

elearning design


The tight alignment of image and text in the third frame applies the contiguity principle, plus the connection between the two is easy to grasp. Instead of cluttering the scrollable screen with too much information, this interface is designed so that learners can simply press a button to move on to the next exercise.

3. Modality Principle

The way you present information should be dependant on how complex the information is. For example, if you’re trying to explain a complicated process, it may be more effectively conveyed in a visual format so you can avoid potential ‘information overload’.

elearning design

5-Minute Clinical Consult

This is a good example of an interface applying the modality principle; a complex concept (irregular heartbeat) is being explained using a graph for users looking to find medical diagnoses. A simple and clear flow chart makes it easier for non-medical professionals to understand an otherwise complicated medical diagnosis.  

4. Redundancy Principle

As with the Modality Principle, the way you present information also directly impacts learning. The elements you don’t include are just as important as the ones you do include.

Over-explaining or including too many types of media may overwhelm the user, so get rid of whatever isn’t necessary.

elearning ux

Skill Pill

Here’s a ‘Skill Pill’ for the army that teaches basic medical skills for soldiers to use in the field. The interface allows learners to effectively ‘learn by doing’ and apply concepts presented in previous sessions without real-life consequences. This design is an example of the redundancy principle combined with the modality principle as the action required is simple and straightforward and needs minimal text and more visuals.

5. Coherence Principle

As a designer, you should use the same formatting throughout your interface and bear in mind that when learning is the objective, ‘less is more.’

Any unnecessary visuals or sounds added to a website are called ‘seductive details’ and must be avoided in eLearning. This content will most likely distract the user and take away from the rest of the educational content. A prime example of this is an interface that auto-plays content or ads.

elearning ux

Skill Pill

The ‘Discover’ page here is potentially distracting since there is a lot of video recommendations matching popular search themes. Skill Pill counters this cleverly by placing the search bar at the top of the page. Also, the color schemes of the videos and recommended content are consistent, which applies the coherence principle well and makes it less likely that users will be seduced by irrelevant content below.

6. Personalization Principle

People generally absorb information more effectively when they feel like there’s a ‘human’ element included and when content is personalized, conversational and informal.

elearning design

A good way to implement this principle would be to incorporate an optional ‘virtual teacher’ to guide and support learners. Designers should consider the potential distractions that pop up content might create though – we all clicked Clippy away aggressively at some point, right?


Generally, adults learn best in an environment when they are given only the essential pieces information needed to understand a concept; simplicity and clarity are key.

The most important principles to remember when designing for effective eLearning are:

    1. Only use visuals when they add to the lesson being taught

    2. People can only pay attention to one visual and one audio element at a time

    3. Don’t overuse media, this will distract and overwhelm your users

    4. Add a ‘human’ element in your design and consider a ‘virtual instructor’ that addresses users in first or second person.

    What do you think is the most important element for effective eLearning? Let us know in the comments or tweet us @usabilla!

Subscribe for the lastest CX content

© 2021 GetFeedback, Inc.|888-684-8821|Privacy notice|California privacy notice|Terms of use|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.