You may have heard of the term User Interface (UI) before. The word has gone mainstream over the last several years (alongside it’s close friend, the term User Experience or UX) so you may have heard it mentioned or you might have come across it in a blog post or article. UI is very important in the web development world, and since web design and e-learning design are close siblings, what applies to web often applies to online learning courses. Let’s explore this a bit more thoroughly and look at why UI is an important concept for e-learning designers to understand.


User Interface (UI) refers to the look-and-feel of the menus or functionalities of an application or website, or in our case, e-learning course. It’s the visual part of the e-learning course that learners interact with. Your color scheme, your navigation, your buttons, these are all part of your course UI. As the course designer, your goal in designing and selecting all of these should be to anticipate what your learner will need to do and how they will do it and to minimize the amount of thinking your learners have to do.

Here are three important aspects of UI design that you need to apply to your next e-learning courses to ensure smooth sailing for your learners from start to finish.

Provide a clear next step

When your learner reaches the end of a paragraph or the end of a slide in your design, they shouldn’t even have to wonder “What do I do now?” It should be obvious and clear to them, whether that means including some simple text to let them know what they need to do, or a flashing animation on your Next button to call attention to it. Give your learners a single, clear path forward through your course.

Apply existing standards

It’s often been stated that web design and e-learning design have a lot of similarities. They can be considered “relatives” because they have a lot in common (navigation, layout, web languages, etc.) and are both presented on computer monitors. This means that learners have a certain expectation about how to behave with courses based on how they interact with the web on a daily basis. Here’s an example of that: if a learner sees blue, underlined text, they will assume that is a hyperlink. This is the type of standard you can apply to your e-learning courses, to make sure the course behaves in a way that is expected by the audience.

Be consistent

One of the most important principles of great UI design is consistency. A good way to achieve consistency is to set standards for your design and stick to them. Is the same button red on one slide, and then green on the next? Do navigation elements move around from one slide to the next, based on how much room you had to fit objects on a screen? If so, this is the type of thing that can be very confusing to learners. Make sure the look and feel of your course is consistent from start to finish, this includes colors, fonts, font sizes, object placement and functionality.

These are just 3 simple UI design principles that you can apply to your e-learning design to help ensure your learners have a positive online learning experience.

Feel free to follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments about UI design and e-learning, please share them below.

7 Comments
M Oppenheimer

For a number of years now, web developers have been able to use different colors for hyperlinks, so I never use underlines for anything but a hyperlink. Related I include as a hover, a warning that the link will open in a new browser window. That way the learners know that the eLearning project has not been closed and the back button in the new browser window/tab will not get them back to the learning project. If I need to create custom menu driven learning projects I put a menu across the top or on the left side since that is what learners have come to expect because of their constant use of web sites. I want the learners to focus on learning about the subject matter not having to waste mental bandwidth learning how to use the eLearning project. The papers written by the Nie... Expand

Nicole Legault