How to test elearning across multiple devices
How does your elearning work across different devices? Upside Learning founder Amit Garg give us a decent checklist to ensure it all goes smoothly.
Elearning development is not the same as it was a few years ago. Flash used to be the default development environment, which insulated your elearning from the vagaries of browsers and operating systems. However, now you need to cater to all types of tablets and smartphones as well as the traditional desktops and laptops. Different browsers, device sizes and operating systems make designing, testing and delivering of elearning content a complicated task. Ensuring error-free, high-quality learning projects that run consistently across the plethora of devices and operating systems is a key challenge.
“Quality is never an accident; it is always the result of intelligent effort.” – John Ruskin
People in the quality circle clearly understand what this quote stands for and it becomes even more relevant with multi-device elearning. Any discussion about quality in a distributed learning environment must first ask, ‘From whose perspective are we considering quality?’ If we look at today's development environment, multi-device is growing and becoming more common. This environment may contain any combination of devices (desktops, tablets, smartphones); OS (e.g., Android, iOS, Windows); and browsers (e.g. Internet Explorer, Chrome, Firefox, Netscape, Safari). However, the application’s visual and functional behaviour, as well as its performance, should be similar for all users irrespective of the device/OS/browser combination.
The first step should be development testing. Points to be remembered while conducting multi-device testing from the application’s visual and functional behaviour are:
Check the font size and formatting to ensure better readability across devices. Text can appear bigger or smaller based on device resolution (higher the resolution, smaller the text appears). Italicised text can be harder to read, especially on smaller devices, and because it is angled, it can be difficult for dyslexic users to read. From an accessibility perspective, make sure that text boxes auto-resize to accommodate even the largest font size.
Touch target sizes
Check whether the user interface controls are big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Target areas for interactive elements should be at least 40×40 pixels for smaller devices with a gap of at least 20-30 pixels. For interactive elements that use small graphics, hotspots should be larger (though invisible), with proper spacing.
Ungrouped navigation controls can be quite confusing in smaller devices like smartphones. It is ideal to have navigation controls logically grouped and layered. For example, 'next' and 'back' buttons appear together. The 'menu', the 'next' and 'back' buttons, and other more frequently used controls can be placed on the main screen and less frequently used controls like 'glossary', 'transcript', 'resources', and 'accessibility', layered at a second level, under one common control. From the design point of view, considering a flexible GUI design where certain controls are automatically enabled or hidden based on device type and/or size is also a good option.
Visual cues for new or specific gestures
If the elearning includes interactivities that need specific gestures, users should be provided with clear and explicit visual cues the first time such gestures are required. For example, if the user has to press (click/tap) and hold a particular type of arrow for continuous panning, showing a small animation demonstrating this the first time that arrow is displayed enhances usability.
Since multi-device content is most likely displayed on touch and non-touch devices, there are a couple of approaches for learner instructions:
- Action-specific instructions
- Conditional device-specific instructions, i.e. for desktops/laptops- 'Click OK to proceed' and for touch screen devices- 'Tap OK to proceed'.
- Generic instructions, i.e. for desktops/laptops/touch screen devices - 'Select OK to proceed'.
- Task-based instructions i.e. instructions that are task-based rather than action-based; for instance, for desktops/laptops/touch screen devices- 'Go through each example to know how it can put organisations and individuals at risk'.
Interactivities in multi-device elearning should either work smoothly on all the target devices else should be modified for different device types and sizes. At times even additional or alternative interaction options added based on device are a great help.
In multi-device elearning, content layout changes based on device dimensions, which is why it's important to check that the same meaning has been retained. While testing, look out for things like: Shifted labels that are now pointing to the wrong elements (or to nothing at all)
- Incorrect sequence; for example, a visual precedes rather than follows text
- Incorrect textual/audio references to content at a particular location; for example, "the diagram on the right".
Frozen content that needs to remain visible while other content is scrollable or changes based on user action.
This level of testing helps in monitoring the product quality and also detects problems and bugs at an early stage, if carried on alongside the development process. It also helps in ensuring API compliance, which is of high relevance in the elearning domain in relation to the deployment of the content on the LMS.
Amit Garg is director and co-founder of Upside Learning