Magazine article Talent Development

Prototyping an E-Learning Interface: Developing Prototypes Is Your Best Preventative Measure against Poorly Designed E-Learning

Magazine article Talent Development

Prototyping an E-Learning Interface: Developing Prototypes Is Your Best Preventative Measure against Poorly Designed E-Learning

Article excerpt

When embarking on an e-learning project, it can be intimidating to think about creating your own interface. There seems to be a never-ending stream of questions to consider: Where do I begin? How do I get buy-in from my stakeholders? Is the final product going to resonate with end users? Too often the questions become so daunting that designers fall back on molding content to fit a template.

The presentation of e-learning content is as critical as the content itself. You can have content of the highest quality, but if the presentation is poor, you will lose the end user. If the interface is confusing or the material is difficult to find, you are asking the end user to make an extra effort to learn.

The solution to designing an effective e-learning interface is to obtain feedback from both stakeholders and end users as early in the design process as possible, before writing code or putting pixels on the screen. The following steps will guide you through the process of creating a prototype for an e-learning interface.


I find storyboarding to be an effective way to gather and organize my thoughts. The storyboard should lay out the desired outcome for the course. Storyboards prove especially beneficial during initial brainstorming meetings with stakeholders.

The important thing to remember is to keep your storyboards simple. They should not be overly detailed at this stage. They should be quick sketches that help you identify the needs and expectations of your stakeholders and end users.

Make sure to jot down notes for each sketch to explain what it represents. These notes will be helpful as you move forward in the design process.

Early physical prototypes

The purpose of the early physical prototype is to help stakeholders and end users visualize different ways that an interface could be built and function. These prototypes often are crude and can be built using common office supplies, such as paper, folders, markers, and sticky notes.

The sticky notes help stakeholders and users see how the interface will work. Elements of the interface, especially those that will remain static from screen to screen, also can be drawn directly on paper. These static elements can be drawn once and photocopied so that you can make multiple screens quickly. The sticky notes can be placed on top of the elements to represent different states.

For example, a drop-down menu could be drawn on paper, but by using sticky notes, you can better show the layers of functionality within the menu. The "open" state can be shown with a note after the user "clicks" the menu. As he touches the notes to change them, you can peel off one note and place another in its place, representing the "clicked" state.

Watching how users interact with the elements in front of them provides valuable feedback to you as the designer. Are they traveling too much across the screen to get to elements? Do the layout of the elements and their functions work in the context of what the training course is trying to accomplish?

The great thing about doing this type of prototyping is that changes can be made quickly. It is easy to customize the design through multiple iterations in just a few minutes. Again, it is beneficial to involve stakeholders and end users at this early stage in the design process to get their feedback. You can even give them materials to demonstrate their own prototype ideas. …

Search by... Author
Show... All Results Primary Sources Peer-reviewed


An unknown error has occurred. Please click the button below to reload the page. If the problem persists, please try again in a little while.