User Interface Design: 3 Things E-Learning Designers Need to Know

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.” 

Head on over to this article to learn about some existing standards to keep in mind if you’re designing your course: Design Standards to Follow When Creating a Custom UI in Storyline 360.

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.