Design online learning materials to suit everyone

How can we design e-learning materials to accommodate and engage all learners? Some learners have dedicated time and space for learning, while others study on the go. Some like freedom to explore – others need structure. Our answer: adopt an interactive webpage format with xAPI. 

Interactive webpages: what and why?

What is an interactive webpage? Think of a typical online article, where information in different formats, such as text, multimedia and links, is combined and presented in one integrated webpage. To inject interactivity, you can embed content from educational technology services such as Padlet or H5P. With a bit of extra work, you can even create your own custom components: collapsible sections, interactive quizzes, dynamic simulations – whatever suits your teaching needs.

The flexibility of this format makes it a great embodiment of universal design for learning. Its customisable features allow us to incorporate multiple modes of engagement, representation and expression to cater to learner preferences. We can even leverage interactive toggles to provide optional content. 

• Tips for embedding flipped learning at an institutional level
• How students really feel about collaborative tasks in online learning
• Ensuring online education is inclusive and accessible to all

In a recent module, we created an interactive interface to guide learners on developing computer simulations. Learners can choose to watch a video of a complete procedure or scroll down for a list of written instructions. Each step includes a reference image, which learners can view or hide by toggling a button. This provides them with multiple ways to approach the content – in text, image or video form, separately or combined. They receive the same instruction no matter which option they take.

Implementation and design of e-learning webpages

1. Technical implementation

Most learning management systems have a built-in editor that supports basic text editing, formatting and multimedia embedding. More advanced components would require some custom code editing using HTML, CSS or JavaScript.

For a more streamlined and accessible workflow, we developed standardised templates for different page functions, such as lesson versus assessment pages, and a library of pre-built components, including quizzes, pop-ups or hotspots. This enables our colleagues to mix and match components to design customised learning experiences, even with minimal coding expertise.

2. Design

Ultimately, technology is only an enabler and what really matters is the design of the learning experience.

This includes several layers of considerations:

• Just like any other webpage, e-learning pages should adhere to the guidelines of web development, including accessibility considerations and responsive design.
• Other design practices have to do with visual communication and user interaction, such as hierarchy, consistency and feedback.
• In the top layer, of course, are principles specific to learning design: how to scaffold content, foster engagement and achieve learning outcomes. 

At our institution, instructional designers, media producers and educational technologists work closely with academic staff to design and develop integrated learning experiences, based on established pedagogical strategies. For interested academic staff, we conduct regular workshops where they can explore available tools and begin to apply them in teaching.

3. Learner-centred development

The most important rule of all, arguably, is to know your learners: what are their learning needs and how do they learn?

Levelling up learning analytics with xAPI

To tackle that last question, we’ve incorporated xAPI into our e-learning pages. It is a lightweight code snippet that captures learner actions and interactions across systems and devices. It records them as simple “who did what to what” statements and delivers them to a Learning Record Store for tracking and analysis. This enables us to study learners’ learning behaviour and enhance the design of learning materials and experiences.

xAPI can be set up easily to track a large range of events, including video play/pause/skip with timestamps, question responses and time-on-section and scroll depth. These signals reveal where attention drops, where hesitation occurs and which formats help progress. Our analytics teams translate this into concrete design changes towards the content.

With the help of xAPI, we are also able to capture responses to the mini-surveys inserted at the end of each lesson. Unlike more traditional surveys, these mini-surveys capture immediate, context-specific reactions to individual lessons, providing actionable feedback for instructors and learning designers.

Interactive webpages paired with xAPI capture rich, cross-device learning data that both elevate the learner experience and deepen analytics.  We are steadily expanding xAPI use by refining integration and adding new tracking events, from media controls to micro-interactions, to make the data flow more seamlessly for educators and analysts alike. In the future, our priority is to convert xAPI statements into actionable insights through concise, interactive dashboards that surface patterns and guide improvement. We’re also exploring the extension of xAPI across a wider spectrum of learning experiences, including simulations and assessments.

Nguyen Thi Tu Linh is instructional designer, Nguyen Quoc Minh (Harry) Quan is project manager and Nah Yong En is educational technologist, all at Singapore Institute of Technology.

If you would like advice and insight from academics and university staff delivered direct to your inbox each week, sign up for the Campus newsletter.