Designing an Effective User Interface for elearning

Good user interface design is one of those things that are invisible when done properly. When a learner is using an elearning module, a great UI keeps the interaction smooth and makes sure the learner understands what to do at any given time. When done badly, it becomes an obstacle for the learner to struggle around while they’re trying to learn the content, and impedes their experience.

Think of the UI as a tool for the learner to interact with the material, the way a mouse allows you to interact with your computer. A well designed mouse should be comfortable to use, requires minimal attention to work, and won’t distract you from the screen. Your UI should be the same.

Design your UI from the learner’s perspective.

Make everything as clear and easy to understand as possible, and avoid surprises. Of course, this sometimes necessitates labeling, especially for buttons or icons of things for which there is no standard visual representation. We often get confusion around what constitutes the ‘Next’ button when it is just an arrow, so we usually have to include the ‘Next’ label beside it. An icon for ‘Menu’ might also be the icon for ‘Notes’, ‘Resources’, ‘Table of Contents’, or something else. Labeling the ‘Menu’ button helps clear up the confusion and reduce the amount of thinking the user has to do figuring out what the button does. Also, using different icons for ‘Notes’, ‘Resources’, etc. will help avoid conflating those buttons with ‘Menu’ without even having to read the label.

Depending on your elearning module, you may not have to include instructions on every screen. For most, one or two screens at the beginning explaining how the module works may be enough. Specific instructions may need to be written for unique screens. At no point should the learner be wondering what to do next. When writing instructions, keep them short and direct, to avoid misinterpretation. If in doubt, run the screen by another person to see if they understand it the same way you do.

When designing creative elearning courses, there may be a theme to the module that is not necessarily based on computer or web designs. Your UI could be a smartphone, a café, or a golf course. Or it might be a simple corporate Powerpoint presentation. Regardless of the direction the elearning takes, make sure you follow the rules and conventions of the design you choose to maintain consistency.