Interface Design

Interface design is the experienced representation of the interaction design, not the interaction design itself (Saffer, (2007).

The design of the elearning interface is best determined by discovering how people learn the tasks they need to perform, rather than viewing the interface design process as separate from the learning design (Guralnick, 2006):

eLearning Interface Examples


Example 1

eLearning Interface: example 1

Example 1 shows a typical elearning interface. It has a menu to the left that allows the learners to make their own choice of how they want to proceed through the lesson. Allowing them to identify their own learning needs aids in the development of their metacognitive abilities, in addition to aligning their learning goals with the goals designed into the elearning platform (Dennen, 2001).

The menu also allows the learners to go directly to the material that they need, rather than having them wade through unneeded information.

The buttons at the bottom of the screen allows the learners to proceed to the next screen, in addition to backing up to the previous screen if they need to review a point or lesson (this gives it the same functionality as a book or printed document). In addition, there is a button for returning to the home page, one for clarifying questions they might have, and a button for further information. These buttons are fairly ubiquitous on most systems, thus they are not labeled as the majority of users know what the buttons mean, or at least have a fairly good idea of their purpose (Saffer, (2007). Of course good instructional designers know their learners, thus if yours are computer-illiterate, then they should receive instructions on the interface before proceeding with the elearning platform.

Note that the buttons are mainly used for presenting information (gaining knowledge), rather than having them perform an activity (gaining a skill).

Example 2

eLearning Interface: Example 2

Example 2 shows a menu that has the bottom five options disabled. It is used when the learners must proceed in a linear, rather than dynamic fashion. This type of interface is used when you know the learners have little or no experience with the task, thus they must proceed in a set order. Masking the buttons, rather than removing them, gives the learners a roadmap of the course.

However, once the learner reaches a set point in the elearning platform when they acquire enough skills and knowledge to proceed dynamically, then the menu options should be enabled so that they can improve their metacognitive abilities.

Also note that the back-button on the bottom has been disabled as this is the first screen. This is another example of disabling button or menu choices so as not to confuse the learners.

Example 3

eLearning Interface: example 3

Example 3 is an example of allowing the learners to learn in a multitude of ways. The menu allows them to choose several methods, such as reading a case study and then answering questions, or performing an activity that allows them to perform the task.

Example 4

eLearning Interface: example 4

While the first three examples are primarily for presenting information, example 4 is more of an activity in that rather than clicking a next button, the learners are asked to perform by selecting one of several options. Two examples of this interface are multiple-choice questions, as shown in the above screen-shot, and Branching Scenarios.

eLearning Template Examples

Next Steps

Related Resources

Learning Environment Design Framework
Instructional Design Toolkit

ISD Concept Map
ISD Concept Map



Dennen, V. P. (2001). Cognitive Apprenticeship in Educational Practice: Research on Scaffolding, Modeling, Mentoring, and Coaching as Instructional strategies. Florida State University, Tallahassee, FL. Retrieved from:

Guralnick, D. A. (2006). User Interface Design for Effective, Engaging E-Learning. Retrieved from:

Moggridge, B. (2007). Designing Interactions. Cambridge, Massachusetts: The MIT Press.

Saffer, D. (2007). Designing for Interactions: Creating Smart Applications and Clever Devices. Berkeley, CA: New Riders.