The term User Interface (UI) refers to the visual part of an app or an e-learning course that users interact with. This includes any menus, navigation buttons, and page (or slide) layouts. 

A good UI is one that users intuitively understand how to interact with. If you’re using Articulate authoring apps to create your courses, the built-in course players give learners intuitive navigation controls. However, if you’re not using the built-in course player and designing your own custom navigation—or if you’re building any type of custom interactivity—you’ll want to ensure you’re creating a UI that’s intuitive. 

In this article, we’ll go over three important guidelines to follow as you design your course’s UI to ensure smooth sailing for your learners from start to finish.

1. Provide a clear next step

There should be a single, straightforward path through your course. When your learner reaches the end of a paragraph or the end of a slide in your design, they shouldn’t be left wondering, What do I do now? It should be obvious. 

One easy way to ensure your learners always know what to do is by including on-screen instructions whenever action is required. Something as simple as “Click on the tabs to learn more” does the trick. 

2. Apply existing standards

When it comes to UI design, it’s best not to reinvent the wheel. Since learners access e-learning via a browser, they expect courses to behave like a website. If you want your UI to feel intuitive, it’s crucial to rely on existing standards instead of trying to “get creative.” 

Let’s take a look at some existing standards to keep in mind if you’re designing your course.

Text

  • Limit yourself to 2-3 fonts maximum: 
    • 1 for headings
    • 1 for body
    • 1 for calls to action (buttons)
  • Avoid fancy, hard-to-read fonts with a high color contrast. For more tips on ensuring your fonts are legible, check out this article: 5 Formatting Tips for Creating Dyslexia-Friendly E-Learning.
  • Only use underlined text for hyperlinks. 

Buttons

  • Use rectangular (with round or square edges) shapes for buttons. It can be helpful to add a drop shadow to make them look clickable. If you prefer flat design, make sure your buttons stand out in other ways, for example, by using a bold color. For more tips on designing buttons, check out this article: Tips for Creating Great Buttons That Stand Out.
  • Add states to buttons so they respond (by changing colors or format) when hovered over or clicked. 
  • Make disabled buttons translucent, not gray. Find out why here: Why You Shouldn’t Gray Out Disabled Buttons.
  • Use radio buttons for quizzes with only one correct answer.
  • Use checkboxes for quizzes with multiple correct answers.

Icons

  • Use icons that are clearly recognizable. For example, for the menu. 
  • Accompany icons with a label (below or on hover) for increased clarity.

Layout

  • Use white space effectively. Learn how here: 3 Tips for Using White Space in Your E-Learning Designs.
  • Put the exit button in the upper right corner.
  • If designing for mobile users, put the most frequently used buttons near the bottom so they can easily access them with their thumbs when holding their phone with one hand.

This is not an exhaustive list, just a few simple guidelines to keep in mind. Unfortunately, there’s no official UI handbook, because the best practices depend on the users’ needs. If you’re struggling with how to present something, do a quick search to see how other designers have approached it. If it feels intuitive to you, apply the same principles to your course.

3. Be consistent

Another important principle of great UI design is consistency. For example, navigation buttons—like previous and next—should always look the same and be in the same spot. If they’re blue on one slide and green on the next, that might confuse learners. And if they’re on the top of one slide and the bottom of the next, learners might waste time searching for them.

A good way to achieve consistency is to set standards for your UI design from the get-go and stick to them. Be sure to include things like colors, fonts, font sizes, object placement, and functionality.

The Bottom Line

Following the simple UI design principles outlined in this article will go a long way toward ensuring your learners intuitively know how to interact with your course. But UI design is just the beginning! If you truly want learners to have an optimal experience, you’ll want to go one step further and think about the User Experience (UX) design. To learn more, check out this article: How to Design a Better Learner 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.

11 Comments
Michael O.

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

Andrea Vaccaro
Sarah Stillings
Melissa Burns