When we think of learner engagement in learning activities, we often understand engagement as an activity being represented by good behavior (i.e., behavioral engagement), positive feelings (i.e. emotional engagement), and, above all, student thinking (i.e., cognitive engagement).
Here are a few pointers I have picked up along the way that I believe will help captivate the learner in their journey, right from their first click on an eLearning course.
There’s a lot of ways to enhance the visual aspect of an eLearning course, but it is always important to follow a certain instructional design structure, to not only make the course aesthetically pleasing -but to make the design meaningful and impactful. Developing the User Interface of an eLearning course starts with the cover page. Here you will set direction for the creative journey expected in the rest of the course. This page can foster a sense of excitement immediately, and promotes further curiosity for the learner.
Getting the learner engaged from the first time they lay eyes on the course boosts the willingness to learn and engages the learner with the content.
To make the most out of an effective cover page, there are a few elements you need to consider: most clients will have a basic brand identity, and it’s always vital to follow it, but don’t hesitate to put your own touch to the look and feel – spend time playing with various layouts and see what resonates with the course topic most.
When opening your eLearning content authoring tool to create that very first eLearning course page, start by developing and incorporating the following UI elements; you will be setting yourself up for a much easier instructional design process throughout the design cycle.
- Effective use of visual design elements such as texture, shape, gradients.
- Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields etc.
- Navigational Components: breadcrumbs, sliders, search fields, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bars, notifications, message boxes, modal windows and more
- Containers, such as accordions, reveals, interactions and media players
- Motion, such as animated titles and other animated elements.
- Sound design elements
Step 1 of any creative project is to gather up some useful resources and references to help the creative juices flow and for you to get some initial ideas on how you envision the look of the final course design.
The next step is to develop a focal point of your design, whether it’s the company logo, an image, or illustration. This will re-enforce the styling of the eLearning course going forward and help set up a theme that you can use as a template to design the rest of your slides.
Once you have you foundation set up then it is time for you be creative. Play around with shapes and textures to bring the design more to life, also play around with the styling of the interactive buttons for instance, the “Begin Course” as we are speaking about a cover page. By styling the shapes and buttons in a similar way, it really helps to blend the overall design together and again strengthens the eLearning course theme. I suggest using effects such as shadows and blurs to give the design depth. Depending on the styling your cover you might not always need added effects, but even subtle ones really bring the design to life as your brain is used to seeing light and shadows so giving your design depth will always be more appealing to the eye.
Once you’re happy with the layout of your cover design, make sure you support the design elements in your content authoring tool (such as Adobe Captivate, Articulate Storyline, Domiknow or any other course authoring tool) by formatting them to suit speed. For example, PNG images are generally accepted as an industry norm and the compression of the file size will help enhance the learning experience.
Once you have all the layers set up, try applying some animation effects to your layers as visual motion always engages a learner’s eye. Motion paths work great on introductory slides in an eLearning course as it gives you more control on the timing and direction. Play with the timing of the elements so they move at different speeds. This is an easy and effective way to really bring out your eLearning course content.
Adding a variable state to your Interactive buttons will enhance the learning experience. Having contrasting colours and shadow effects to the Hover Over and Clickable states present in your instructional navigation will make them really stand out.
The cherry on the top would of course be adding sound effects and on occasion, music, that complements the learning themes and instructional design direction.
Designing meaningful, engaging, and interactive eLearning experience takes time but following these pointers will really help you create a memorable eLearning Course. The most important thing to keep in mind is the learner, make them want to interact with the content and traverse through the entire eLearning experience without wanting to stop.
