3 Key Elements For E-learning Screen Design

3 Key Elements For E-learning Screen Design

Technology has radically changed the art of education. Everyone is now using technology – enabled courses, as they offer anytime, anywhere learning. While designing an online course, it is very important to remember the key elements of a screen. In this post, we will look at the 3 key elements for designing a screen.

1. Graphical User Interface (GUI) area

This area contains the course title, logo, theme and navigational controls. The purpose of the GUI is to allow the learner to navigate intuitively through the course.

Usually, the ‘next’ and ‘back’ buttons are placed at the bottom right corner (similar to a book) ,except for languages that are read from right to left.
Menu contains a list of lessons, topics and sub topics covered within the course. This helps the learners to have a clear picture of the course content.

Tip: Indicate where learners are in the course, how many slides have been completed, how many more they have to complete.

Graphical User Interface (GUI) area

2. On-screen content area

This area contains the title, text, visuals (images, animations, videos) interactivities, and instructions.

Title:This area usually contains the names of the unit titles or topic titles. The first element that draws the learner’s attention is the title area. This because the font color and font size are distinct from the rest of the on-screen context. Just as with a newspaper, people first read the headline and then the reamining text.

The layout of the screen makes a difference. It is better to use standardised templates for each screen type.

  • Static screen: To have text on the left and graphic on the right
  • Interactive screen: To have the click on images, click on tabs at the top to the left
  • Assessment screen: Single select, multiple select, matching, drag and drop screens.

Instructions: They are usually placed at the bottom of the screen. Make sure the instruction is clear and precise.

Tip: Use the real estate properly and follow the 3Cs – Crisp, Clear and Consistent.

On-screen content area

3. Audio script area

This area contains the audio (voiceover / narration) for each screen. In courses with audio, the option to control the volume is very useful, as it allows learners to skip the audio, if they wish to or set the volume according to their convenience.

Tip: Use narration to to explain the need-to-know content on the screen.

Audio script area

These are some of the important elements to remember while designing a screen. I hope you find this post useful.

View E-book on Instructional Design Strategies to design Engaging E-learning Courses