Essential Elements of Your E-learning Course GUI

Essential Elements of Your E-learning Course GUI

The purpose of Graphical User Interface (GUI) design in eLearning course is to enable learners’ to navigate intuitively through the course and tell them where they are in the course, how many slides they have completed, how many more they need to complete, and so on.

One of the adult learning principle states that adult learners’ don’t like to be directed, and they like to explore and learn themselves. Thus an intuitive GUI is need of an hour.

Here, I would like to share some of the essential elements of the eLearning course GUI that satisfies the adult learning principles.

Here is a screen-shot of the GUI of one of our courses.


1. Play, Pause, Replay, Previous, Next buttons

These elements, within the GUI, help learners’ to play and pause the screen, and allow them to move to the next slide or return to the same screen. As eLearning is self-paced, learners’ can just be on the same screen or move forward or replay it, according to their convenience.

Play, Pause, Replay, Previous, Next buttons

2. Progress bar

In a GUI, the progress bar lets the learners’ know their progress in the course. It’s important to show the progress bar on each screen. This helps the learners’ to know how much is remaining and how much is completed.

Progress bar

3. Menu

 This element contains the list of all lessons, topics, and sub topics covered within the course. This helps the learners’ to have a clear picture of the course content.


4. Notes/ Script

This element displays the audio script on the screen of each topic. While listening to the audio, if the learner miss something, he can click the script button and go through the content easily. This helps him to easily retain the information.


5. Audio On/ Off

In eLearning courses with audio, it’s essential that the Graphical User Interface (GUI) has audio control options. It is important to have an ‘audio on/ off button’ in an eLearning course and also a bar to adjust the volume. This button and the option to control the volume are very useful, when learners’ may wish to skip the audio or may like to set the volume according to their convenience.

Audio on/off

6. Help

The Help element explains the functions of the buttons, icons, and tabs in the GUI. It helps the learners’ to know the navigation controls.


7. Glossary

A course involves a lot of vocabulary or technical terms that are hard to understand. A glossary can help users immensely. A glossary can be used to explain the concepts or terms easily, and it can provide the definitions of the terms used in the course. This makes learning easy, as learners’ can find meanings to all unknown words in a single page.


8. Resources

This element provides the additional content about the subject dealt in the course. The best thing about this element is that learners’ can access these resources needed. This helps the learners’ to view the information provided as a reference, related PDFs and websites or any other helpful information.


9. Print

The Print element within the GUI provides learners’ with a printable copy of the slides and also script of each slide. This feature is mainly used for the results page, so that the learners’ can take a copy of their results.


10. Exit

This element helps the learner to “close” the course whenever they want. They don’t need to wait till the course is completed.


These are some of the essential elements of an eLearning course GUI. Depending upon your requirements, we can skip or add some of the elements described above.

Have some more elements? Please do share!

View E-book on E-learning 101: A Beginner's Guide to Understanding What E-learning is About