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:

Text readability

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.

Alignment

Every browser has its own HTML rendering engine, which displays the same content with a slightly different page and text formatting, leading to differences in alignment. As every browser interprets JavaScript differently, a course may not display similarly on all browsers. It is therefore extremely important to make sure the elearning displays properly on all target device configurations.

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.

Navigation controls

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.

User instructions

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

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.

Consistency

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.

Course performance

As there is a single source for multi-device content, it may contain multiple versions of the same images in different sizes, based on the targeted devices, which increase the package size. So, while testing ensure that all images in the package have been optimised, all CSS, JavaScript, and HTML code have been minified, and all commented codes deleted in order to reduce the package size.

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