Testing of Multi-Device eLearning Projects
Computing devices these days come in all shapes and sizes. Earlier, personal computers and Macs were prevalent, but now mobile computing options like laptops, tablets, and smartphones account for a major portion of the devices in use. Businesses today need to be capable of designing and developing applications that can be accessed on just about any device an end user might have. In the L&D field too, the need for multi-device learning has grown rapidly and shows no signs of slowing down.
Today’s development and testing environment, therefore, is essentially a multi-device environment - and testing eLearning that is intended to run on multiple devices creates some unique challenges. The 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 behavior, as well as its performance, should be the same (or exceeds the set base level) for all users irrespective of the device/OS/browser combination.
During our multi-device and responsive-eLearning development projects, we've encountered our fair share of challenges, based on which we've listed some areas that need special focus.
1. Can the text be read comfortably?
- Text can appear bigger or smaller based on device resolution. The higher the resolution, the smaller the text appears. To avoid this, a larger font size can be set as default - for example, 16-18 pt - for better readability across devices.
- Italicized text can be harder to read, especially on smaller devices, as it appears less crisp. Also, because it is angled, it can be especially difficult for dyslexic users to read. Such formatting is therefore best avoided for ease of reading on smaller devices.
- From an accessibility perspective, one of the common settings is for font sizes - so make sure that text boxes auto-resize to accommodate even the largest font size.
2. Is the content properly aligned?
- It is advised that the content be checked on all the targeted configurations (device + platform + browser combinations) and on actual devices - not on simulators. 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. Similarly, because 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 configurations.
3. Are the target areas for select and touch actions big enough?
- The smaller the device, the harder it can be to touch a "precise" spot. Target areas for interactive elements should therefore be at least 40x40 pixels for smaller devices.
- Adequate space also needs to be kept between interactive elements. If buttons are placed right next to each other, it can increase the chance of mistakenly touching the wrong button - so always try to keep a 20-30 pixel space between interactive elements.
- Design-wise, even if you want small graphics for interactive elements, make sure to still define larger (invisible) hotspots for them, and keep them far apart so that "precise" touch isn’t required.
4. Are the navigation controls grouped and layered correctly?
- For smaller devices like smartphones, it is recommended that navigation controls be logically grouped and layered. For example, Next and Back buttons should appear together. Place the Menu, the Next and Back buttons, and other more frequently used controls on the main screen. Layer less frequently used controls like Glossary, Transcript, Resources, and Accessibility at a second level, under one common control.
- Consider a flexible GUI design where certain controls are automatically enabled or hidden based on device type and/or size. For example, tablet and smartphone users are accustomed to controlling audio through device controls; so buttons for toggling the audio on/off and controlling volume can be dropped from course GUI.
5. Are visual cues provided for new or specific gestures?
- If your eLearning includes interactivities that need specific gestures, it's a good idea to provide users with clear and explicit visual cues the first time such gestures are required. For example, if you need to press (click/tap) and hold a particular type of arrow for continuous panning, you could show a small animation demonstrating this the first time that arrow is displayed.
6. Are the user instructions device appropriate?
- Since multi-device content will most likely display on touch and non-touch devices, there could be a couple of approaches for learner instructions:
i. Action-specific instructions:
a. Conditional device-specific instructions; for example:
For desktops/laptops—Click OK to proceed.
For touch screen devices—Tap OK to proceed.
b. Generic instructions; for example:
For desktops/laptops/touch screen devices—Select OK to proceed.
ii. Task-based instructions:
- Where the nature of the interaction permits, instructions can be task-based rather than action-based; for example:
For desktops/laptops/touch screen devices - Go through each example to know how it can put organizations and individuals at risk.
7. Is the interactivity suitable for all devices?
- Interactivities in multi-device eLearning should either work smoothly on all the target devices or should be modified for different device types and sizes. For example, a drag and drop interactivity to fill in the missing words in a statement may work well on desktops and 7"+ tablets; however, the same interactivity may be more effective with dropdown lists on smaller devices. Or a carousel interactivity that displays text and an accompanying visual may be good for larger devices; however, it could be modified into a two-level accordion interactivity for smaller devices.
- Additional or alternative interaction options can be added based on device. For example, you could click through thumbnails on a desktop to navigate the scenes of a story; to navigate the same story on a touch device, you could also allow users to swipe.
8. Is the same meaning and relationship between pieces of content retained in different layouts/layering?
- 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. 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; for example, there may be three questions displayed in turn that are based on a common scenario description. On a larger device, there would be enough place to view the scenario description and one question together; on a smaller device, however, the scenario description may need to be frozen at the top of the screen, while the question is scrollable below.
9. Is the course performing well?
- As there will be a single source for multi-device content, it may contain multiple versions of the same images in different sizes, based on the targeted devices. This increases the package size - so make sure to optimize all images in the package to improve performance.
- Remember to minify all CSS, JavaScript, and HTML code and delete all commented code to reduce the package size.
- If a course has media rich elements, for example heavy videos, it may not display optimally at low bandwidths. To deal with such cases, it's a good idea to include an alert to the learner, and also present them with an alternative solution; for example, they could choose to view a "low bandwidth version" where only text, audio, and related images are loaded to avoid impact on the performance.
The sheer number of devices has made pinpointing a standard device unlikely. Development and testing of an eLearning design that can work across all devices is difficult. However, we hope that these deliberations can help you develop and deliver a good user experience.
We would love to hear your thoughts on this post and any other inputs you would like to share regarding multi-device testing. Please share your views in the comments box below.
References:
- http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/
- http://codecraftingblueprints.com/make-click-areas-comfortably-large/
