The user interface design you use in your eLearning modules are key to your user’s ability to see, read, interact, navigate, and in the end, comprehend your content. The user interface (often called a UI) also refers to the elements of design, or the “look and feel” of the project. We have all used custom based modules, as well as PowerPoint, Articulate, Captivate, and Lectora (to name a few) based modules and have seen the way they use user interfaces to guide the user through the content using a menu or next button. This basic, or 101 level introduction of eLearning user interfaces will look at what is often used and why.

Let’s first take a look at an interface that has elements that we often see. Take a little time looking at the design below. Pay attention to the content, the navigation, and other components. We will break them down shortly.

elearning_design_screens_full
So let’s break down this user interface and see what key components the user interacts with on a regular basis.

  • Title
    The title is the name of the project. It should be simple and to the point. It is the headline to your project.
  • Course Progress
    A course Progress bar can let the user know where they are in the course (time management) and, as they complete each page and section, can feel a level of accomplishment. Sometimes this will be written “Page 3 of 32”.
  • Content Area
    The course would be pointless without your content. Make sure there is a big enough space to present your information. Designing the content is another, maybe, 40 articles. For now we will focus on the longer term.
  • Instructions
    An instructions box can guide a user through a course by letting them know what they are to know or how they are to interact.
  • Controls
    Your user has basic navigational wants and needs. They may be in a situation where they need to restart or pause a slide. The volume may be too high. They may need to go back to a previous slide. Give them the option to get where they need.
  • Slide/Audio Progress
    Each page takes time to get through. If you have animation or audio on a screen, use a slide/audio progress bar to let them know how far they are through the slide.
  • Help and Reference
    Your user’s may need a little help along the way. A few reference options can go a long way. These options include a closed caption button that can pop up audio captions, a glossary can provide definitions to new words, and a help button can provide additional general or detailed information.

elearning_design_screns_elements

For this introductory course, let’s take a look at how a user actually interacts with your course. The items in green mean that this is what the user typically views, the lighter the green color means the less the user viewed it, and the more, or heavier, the green is depicts a user using this spot often. Yellow refers to clicked, or interactive spot. The lighter the yellow, the less used, the more the yellow, the more used. It is easy to see that the user is, and should be, focused on the content and moving forward through your module. The title, reference items, and course progress bar are very important, but not used as often. You never know when they will be needed, but when they are, they are needed fast. Sometimes a user interface will tuck away items that are not often used. This can be very helpful when creating a very clean and open interface design.

elearning_design_screens_hotspots
Finally, let’s discuss a couple of upgrades that make a user interface great.

  • The Flashing Next Button
    When the animation or audio is finished playing blink the next arrow continuously to lead the user to move on to the next screen. This is also a good alert that the current slide is complete. Many programs that create eLearning modules have options for this. Custom based programs can often have this feature added.
  • Animated Slide/Audio and Progress Bars
    If possible, animate the movement of the user’s current status rather than popping it to the next spot. Animating it can catch the user’s eye and better keep them aware of where they are and how much more they have to complete.

There are many types of user interfaces. We will cover other types of user interface designs in another article. Your user is using modules to educate and train themselves. A clean user interface that leads the user through the module will provide more focus on the content, which is key to a better learning experience.