Blog Post

Articles
3 MIN READ

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

CommunityTeam's avatar
10 years ago

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.

Published 10 years ago
Version 1.0
  • MichaelOpp's avatar
    MichaelOpp
    Community Member
    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 Nielsen Norman Group (specialists in User Experience) are focused mostly on eCommerce but the information can be generalized enough that it applies to eLearning projects. For example they just published a paper on "Video Usability." I recommend it to anyone that wants to use video.
    http://www.nngroup.com/articles/video-usability/
  • Is there a way to make the Next button flash in Storyline when the timeline completes?
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Alexandra! You can't make the button in the Player navigation flash, unfortunately, but you could add your own on-slide button and add an animation to make it flash. Hope this helps. Or, you could have a little callout text box that flashes and appears and points down at the Next button instead (just another idea!). Thanks for your comment!
  • Flashing elements onscreen are dangerous for users who suffer from epilepsy. This is especially true for items that flash at certain frequencies (between 2Hz and 55Hz). Items than flash at this rate are not considered accessible under Section 508. It is easier to avoid items that flash. Perhaps you could have it change color to attract attention?
  • Great tips and so many of these get handled for you via Rise! One piece of feedback around point #1 (provide a clear next step) is that some of our learners find it unclear how to advance in Rise after taking a quiz. We get learners who take the end-of-course knowledge check and then close the course even though we have a couple short wrap-up lessons that follow. I think there's some room to improve the Rise UI a bit to help make that clearer.
    • MelissaBurns-69's avatar
      MelissaBurns-69
      Community Member
      We experience the same. We try to consistently add a continue button to the end of each lesson (even though it isn't technically required) so they always expect it and look for it. But we still get people closing after a quiz b/c they think it is the end and can't see the continue button depending on how large their window is. One other thing we do is consistently design with quizzes and activities in the middle so it breaks that habit that the quiz is the last thing. One more thing, we always use an "Exit Course" button at the end of each Rise course. Our staff have learned that they aren't done until all the sections in the menu have check marks and they click "exit course".
  • How to "Make disabled buttons translucent, not gray."?
    Is it by making it 50% transparent etc.?