The user interface (or UI) is a critical part of an e-learning course. Although it tends not to get much attention after its initial design, it can have a major effect on the success or failure of the course as a whole.

Guiding Principles

Guiding design principles can vary for individual clients since it’s preferable to match e-learning closely to a client’s brand guidelines or to other pre-existing e-learning courses and materials.

Most of the time designers have the freedom to apply some of their own ideas to the e-learning design process. In addition to branding, here are some ideas to think about:

• Unobtrusive – The UI shouldn’t overpower the content. If you build it right, end users will barely notice that it’s there at all.
• Intuitive – Users should need little, if any, explanation about how to navigate a course and use the UI.
• Flexible – Oftentimes, the content of the course isn’t known at design time, but it’s a safe guess that there will be a lot of variety in content. It’s also possible that there will be changes made to the overall functionality later in the project, so the capability to add UI features is nice to have.
• Simple and clean – Being able to execute a simple and clean design with particular attention to detail is the mark of a skilled designer.

Features

The features of an e-learning user interface can change depending on the project. Typically the elements on the screen are predictable and often include:

• Next and back navigation
• Menu-based navigation
• Page count and progress indicator
• Audio controls
• Closed captioning controls
• Help button
• Exit/close button (often needed to commit progress to an LMS)

Size

As of yet, there isn’t a great model for a truly “responsive” e-learning design. The problem lies in the complexity of the content. E-learning has also been traditionally designed to a specific height and width as opposed to the flexibility of a website.

E-learning is almost always designed to a single specific size. That size should be small enough to fit on the typical user’s display, but large enough to make good use of whatever space is available. It’s a good idea to learn about the standard display size when initiating a project— usually about 1,400 x 900px. This means e-learning can be built at dimensions that are a little smaller than this.

Content Design

For the design to look finished, it needs sample content. Since there isn’t any content at UI design time, try to add content that doesn’t distract from the client’s capability to review the UI. Here are a few ideas:

1. Splash screen
2. Bullet point/simple content screen
3. Multiple choice question – The nice thing about multiple choice questions is that they also give you a chance to show feedback.
4. Feedback – It’s helpful to be able to show how feedback will be presented, whether it’s in a pop-up, coach character’s dialogue or something new and creative.