10. Flash Is Now HTML: A Big Thing For eLearning Development?

Flash Professional was rechristened Animate CC to better reflect its animation capabilities in an HTML5 world. This post covers some of the key features and enhancements of Adobe Animate CC.

9. Snapchat Spectacles – Will it be Useful in eLearning?

This post presents a useful overview of Snapchat Spectacles, including a video that explains how they work, some differing reviews, a note about their price, and some thoughts about their potential use in eLearning.

8. Combining Mobile Accessibility and… Winning?

This post summarizes Marcy Sutton’s talk about how to “win” at mobile accessibility, with special focus on the considerations and tips that could apply to accessibility in (responsive) eLearning and mLearning design and development.

7. Future of Video in Corporate Training

This post shares some thoughts about the future of videos, specifically interactive videos, in eLearning, together with links to some interesting examples.

6. eLearning Trends for 2016 – Players in the Realm

This post highlights our picks for the top 10 eLearning trends and technologies for 2016.

5. eLearning: Offline & Tracking – What Are Your Options?

This post takes a look at some options for implementing offline viewing and tracking of learning content, and presents Upside Learning’s custom-built solution.

4. What’s New in eLearning – Post #1

This post lists some articles, blog posts, and talks about design and development techniques and tips, platforms, and technologies that might have potential for use in eLearning or indeed other domains.

3. Flash to Animate CC: More than just a Rechristening

This post shares some of our findings and observations after using the new Animate CC tool, together with some recommendations.

2. Responsive eLearning with Articulate 360

This post provides an overview of Articulate Storyline 360 and evaluates its responsive player, and highlights Articulate 360 – Rise as new responsive authoring tool to explore.

1. 7 Takeaways from Making an Interactive Video

This post presents an instructional designer’s reflections about what she learned while exploring the use of interactive videos as effective instructional tools.

Along with the top 10 posts listed above, we also published a series of posts on responsive authoring tools with specific focus on their features, advantages, and limitations for designing and developing responsive eLearning:

• Articulate 360 – Rise
• Adapt
• Evolve
• gomo
• Elucidat
• Captivate 9
• Lectora 16

We also presented a feature-wise comparative summary of these tools, grouped under design considerations that we felt could influence the choice of tool.

So there you have it – our top posts in 2016. A big thank you to all our subscribers and readers! Keep in touch with the latest in eLearning by following us on Twitter or subscribing to our blog through RSS.

What was your favorite eLearning blog post of 2016? Do you have any topics you’d like to see us cover in 2017? Let us know through your comments.

The post Top 10 eLearning Posts of 2016 first appeared on The Upside Learning Blog.

Now when it comes to responsive design, we know that text can reflow. We know that images can be scaled, cropped, or if in a supporting role only, dropped. We know that layouts can be adjusted within a fluid grid. We know that content can be layered to suit device size.

But what about videos? Like images, they too need to be treated as a whole. They can’t reflow or be broken into layers. And in most cases, they contain core content and cannot be dropped.

So, let’s take a look at some key considerations when it comes to including videos in responsive eLearning.

Technical Approach to Scaling

When scaling videos for display on screens of different size and resolution, you can opt for either a “fit-to-screen” approach or a “fill screen” approach, depending on your requirement. As we will keep referring to these terms throughout the post, let’s first clarify what they mean.

Note that we have assumed that videos will be created in one of these aspect ratios: 4:3 or 16:9. Similarly, display screens could also be in either of these two ratios.

Fit-to-Screen Approach

In a fit-to-screen approach, a video is proportionately scaled to fit either screen width or height. The complete video is made to fit into the screen – without cropping any of it. Regardless of the size and orientation (landscape/portrait) of the device, the aspect ratio of the video remains constant. Here’s how this would work.

Fill Screen Approach

In a fill screen approach, video is proportionately scaled to fill the entire screen of a device (in landscape mode). If the aspect ratios of the video and the device are not the same, the scaled video needs to be matched either on width or on height. Any “overflowing” part of the video is cropped – this could be the height or the width based on which parameter you chose to match when scaling the video. Here’s how this would work.

Content Display

At the design stage itself, when chunking and structuring content, think about how much content is being presented in each frame – and what will be the clarity and readability of that content on a smartphone in portrait mode (i.e. the smallest display).

Presenting or building up to a smaller number of content elements in each key frame will avoid a squished, crowded, and difficult to comprehend screen on smaller devices. You also need to identify the instances where details of a visual are key to the information being communicated. In such cases, you may need to think of structures and treatments where these details can still be seen clearly even after the video is scaled down.

For example, we have an animation where we need to zoom into a checklist in someone’s hand. The checklist has 10 items, each containing a sentence or two of text and an accompanying graphic. On a laptop, the readability of those 10 items is fine; however, when the video scales down to fit onto a smartphone, the text on the checklist may no longer be readable, and the graphics may not be clear. So the animation may need to be storyboarded in such a way that the checklist is presented in several parts instead; or maybe there could be an animated scrolling down effect to each checklist item, followed by an animated panning right effect to show its respective graphic.

If you’re going in for a fill screen approach, it’s a good idea to display the key elements in the central area. Supplementary elements can be placed on the sides. Apart from drawing the viewer’s attention to the most important piece of information, this will avoid the risk of key information getting cropped out on devices with different aspect ratios.

Subtitles and Font

Another point to consider when working with responsive videos is the need for subtitles. This can be handled in two ways: the subtitles can either be a part of the video itself or they can be displayed outside the video, along with the other elements on screen.

Remember that, since videos automatically play full screen on iPhones (i.e. you can’t view any other screen content), you will have to include subtitles within the video. The video will be proportionately scaled (based on aspect ratio) to match the device height or width, resulting in smaller text.

When adding subtitles or any other text in a video, you need to make sure that the font type is easy to read on smaller devices. For example, a hand-written font may be more difficult to read, especially if the text is animated. In our experience, sans-serif fonts like Arial Bold appear well on smaller screens. Serif fonts can be more difficult to read as they create a flicker effect due to interlacing.

When selecting the font color, you also need to keep in mind the background color(s) and manage the contrast well to ensure readability.

A quick way to make sure that you have chosen the right font would be to check it on your smallest target device.

Interactive Elements

When scaling a video, you also need to keep in mind any interactive elements that you may have overlaid on the video. Make sure they scale along with the video and maintain the same aspect ratio and positions.

Optimization

When working with videos, keeping file size as low as possible is particularly important. We have found the following settings to be effective for video optimization. Please note that these may have to be changed based on your requirements:

• .mp4 format
• Full HD 1080p (1920 x 1080 pixels)
• Video bit rate of 8 Mbps
• Video codec H.264
• Audio codec ACC-LC (96 kHz or 48 kHz stereo
• Frame rate (24, 25 or 30fps, please avoid higher frame rates)

Responsive Video?

It may well be that every video isn’t suitable for viewing on all devices. Videos with elaborate infographics, for example, where the relationship between elements is very much dependent on placement, and that contain both text and graphics, may not be best suited for smaller devices. The same goes for animations with a lot of text/text labels/complex graphic organizers, and for live action films where details of an equipment or procedure are shown, without zooming in.

We hope this has been helpful. Do share your views in the comment box below.

The post Responsive Videos first appeared on The Upside Learning Blog.

In terms of delivery formats, eLearning materials are now mostly developed as web-based applications and mobile apps. Other formats are also used, but are perhaps less common – among them, eBooks.

eBooks can be read on a wide variety of digital devices including smartphones, tablets, and laptops/desktops, via dedicated eReaders. And with the latest version of the EPUB format – EPUB 3.0.1 – eBooks can be a viable option for the delivery of media-rich multi-device eLearning.

What is EPUB 3?

EPUB

(or electronic publication) is a distribution and interchange format standard for digital publications and documents published by the International Digital Publishing Forum (IDPF).

How Can EPUB 3 be Used for eLearning?

Let’s take a look at some of the features of the latest EPUB 3 format to see how they allow the creation of multimedia-rich, interactive content.

Multi-device Support – Because EPUB 3 is an XHTML-based file format that uses CSS and JavaScript, it can display a variety of content types and interactivities on different platforms and screen sizes. There are two layout options for eBooks created in EPUB 3:fixed layout and reflow layout. Both layouts can include text, images, static and animated graphics, videos, and audio clips. The choice of layout depends on the aim, intended use, and the nature and treatment of the content.

Accessibility Support– EPUB 3 supports media overlays. This feature can be used to enable a screen reader type of functionality where a pre-recorded audio file is played while corresponding text portions are highlighted in synch with different parts of the audio. Additionally, eBook Readers generally have their own settings to control text formatting – color, font, and size.

Multimedia Support – EPUB 3 supports semantic markup technologies (i.e. HTML5, CSS, MathML) as well as the SVG (Scalable Vector Graphic) format. We can now use tags to include media components like videos and audios into eBooks. This means that eBooks can include conceptual and process animations and software simulations. We can also include custom graphics, as well as complex equations, as the subject requires, without treating them as images that scale up/down based on the device size.

Interactivity Support – Since EPUB 3 supports JavaScript, we can include almost any type of basic eLearning interactivity into eBooks. For example, selecting text or an image/graphic to display text; or selecting marked areas of an image/graphic to display text; or having scored single-select, multi-select, and drag and drop practice questions. Note that these would be more effective in fixed rather than reflow layouts, as default page breaks may hamper the interactivity layout and therefore its functionality.

Multilingual Support – EPUB 3 supports more than left-to-right horizontal scripts. eBooks can now be used where content needs to be distributed in different geographies and/or to audiences with a variety of language preferences, including languages like Arabic, Chinese, Hebrew, and Japanese.

About eReaders:

As mentioned earlier, eBooks launch through eReaders; and, just like browsers, eReaders too have small variations in the way they display content and in the properties that they support. So there may be variations in the pagination, display, and behavior of interactive and media elements based on individual readers.

Based on our research and experience, we found the following eReaders to be effective in terms of consistent layout and functionality:

Additional Considerations:

When evaluating eBooks for learning content distribution, there can be some additional considerations to keep in mind, depending on your needs and requirements:

• EPUB 3 is a free and open standard.
• EPUB 3 allows access to content online as well as offline.
• EPUB 3 allows continuous data tracking through the xAPI (Tin Can) while online. When it comes to offline tracking, however, there are some limitations and inconsistencies. EPUB 3 does support local storage; so data (like score, progress, and other xAPI statement data) can be stored and then passed back to a Learning Record Store (LRS) when connectivity becomes available again. However, there will be a limit to the amount of data that can be stored. There is also a possibility of the data file being emptied or deleted through user action. The efficacy of EPUB 3’s local storage also varies depending on the eReader and device operating system (OS) combination.
• EPUB 3 allows easy distribution of output through Google Play Books, iBooks, and the Windows App Store. However, content updates are more difficult to handle as there is no way to push notifications. Users, on receipt of an eMail or notification in any other format, would need to delete the existing eBook and download the latest version. eBooks may also be less suitable for proprietary content and/or content of a sensitive nature, as anyone who gets hold of the link can download them.
• High-end programming skills are not required for creating simpler eBooks.

References:

EPUBChoosing an eBook format – reflowable or fixed-layout?EPUB3 Now!

The post EPUB 3 – A New Format for Multi-device Learning first appeared on The Upside Learning Blog.

This brings us to User Experience (UX) testing. As the name so obviously suggests, it simply is the process of understanding the users’ experience with the eLearning course. It includes everything your users see, hear and do; the rationale behind their actions; and their emotional reactions to the results.

Every multi-device eLearning course is designed in a very specific manner. For every learner action, there is a defined resulting behaviour in the course. What user experience testing does is try and understand the user’s reaction when performing that action, either successfully or unsuccessfully. This is simply the instinctive response a user has to a new experience when they tap, click, swipe or read the content displayed and how it is displayed. If your users can’t find information easily or can’t navigate quickly through the interface, they will quite simply be dissatisfied. It can make the difference between performing a task accurately and completely or not, and enjoying the process or being frustrated.

We conducted a small user experience testing trial. We ensured that we included team members from different domains of our company so that we could get a more balanced feedback, and asked them to share their experiences about our own multi-device eLearning demo courses. Based on this experience, coupled with our experience in multi-device testing, here are our top 7 tips on how to conduct user experience testing.

1. Gather an adequate user sample:

Make sure your sample size includes enough people to test your eLearning course so that you find common themes among the results or feedback. This ensures that you have more accurate information to base your decisions on.

2. Provide users with background information:

Brief your users and tell them why they are there and why they have been chosen to participate in the user testing exercise. This allows your users to see the big picture and provide useful feedback.

3. Give users clear instructions:

Tell your users what they need to do and how they need to go about it. Giving them these instructions ensures that they are able to perform the task at hand without any hindrances.

4. Provide users with the correct course:

Always give your users a course that is complete and has been through quality testing. If you give them a course with major bugs or issues, they will not be able to provide complete and thorough feedback.

5. Ensure your users have all the equipment they would need:

If your users are going to be testing a course with audio, ensure that they have headphones. If your users are required to launch the course from the LMS, ensure that the LMS page is already loaded on the device.

6. Interact with your users:

Ask your users if they are comfortable with the task they need to perform or if they have any questions or concerns. Interact with them to pick up on their actions as well as their emotional responses while they are performing the task rather than at the end of it.

7. Inform users how their feedback will be used:

Tell your users what you intend to do with the findings or feedback you receive at the end of the user experience testing. This way your users know that the time they have invested towards the exercise is going to be used in a productive manner.

We found that user testing can bring out feedback on a variety of aspects, including but not limited to:

1. How much and what type of information to provide, and at what point, to correctly set learner expectations
2. Design aspects related to usability like affordance, visual cues, target touch areas, visibility of text entry boxes, indication of presence of content below the visible screen area on touch devices, and even consistency of controls
3. Sufficiency and clarity of learner instructions and interactive element labels
4. Content presentation and layering, including with regards to clarity of visual representations and metaphors, and ease of understanding and assimilation

The post 7 Tips for Conducting UX Testing for Multi-device eLearning first appeared on The Upside Learning Blog.

Please note: These tools and simulators have been explored with a specific focus on their capability to test multi-device eLearning, and not websites or web applications.

1. Synchronous Testing Tools

Synchronised testing tools help in performing the same interaction automatically across a number of devices and browsers at the same time.

a. GhostLab

GhostLab is a tool that allows testers to wirelessly pair multiple iOS, Android, Windows, and BlackBerry devices to their computer and carry out synchronous testing. GhostLab involves concurrent testing on actual physical devices and configurations, and you can check real user experiences. Changes (e.g. changing a page or displaying content on clicking a button) can be simultaneously viewed on all connected devices.

Advantages

• Allows us to check real user experiences
• Results of change can be seen simultaneously
• Visuals and alignment can be checked
• Joint reviews can be conducted
• Pre-release verification can be conducted
• Allows you to immediately check code changes
• Can be helpful for testing text-based courses

Below is an image of multi-device testing in progress using GhostLab.

b. Adobe Edge Inspect

Adobe Edge Inspect is another tool that displays synchronised output on physical devices. It allows testing on iOS and Android mobile devices, as well as Kindle Fire. With Adobe Edge, you need to install the main application on a desktop computer, and launch the course through a Chrome browser. You can then access the synchronized course through the Edge Inspect app on connected devices.

Advantages

• Launches courses through the Chrome browser on the main desktop and through the Edge Inspect app on connected devices
• Loads HTML pages
• Allows synchronous control of course-level navigation and page-level interactivities for courses structured to have separate URLs for pages/content shown on click

Below is a snapshot of multi-device testing in progress using Adobe Edge Inspect.

Synchronous Testing tools do provide a multi-device testing interface, but it’s difficult to simultaneously keep one’s eyes and ears on so many devices!

Limitations of Synchronous Testing tools for eLearning

• Difficult to simultaneously keep our eyes on so many devices!
• Difficult – or pretty much impossible – to check audio synching on multiple devices simultaneously!
• May need to do course-level navigation and page-level interactivities manually on connected devices
• May not be able to check browser-related issues depending on how courses launch

2. Simulators

Simulators create a virtual environment or object which can be a physical system or an object. Simulators come with both the hardware and the software which runs on it to create the real experience.

a. BrowserStack

BrowserStack is a cloud-based simulator that we found to be useful for checking text alignment on a specific device-OS-browser combination and catching visual issues.

In case of cloud-based simulators, content loading, as well as speed and smoothness of animations, can vary based on the connection, which may lead to inaccurate issues being logged. Remote simulators can also cause some difficulties when it comes to testing interactivities, as option can’t be selected unless content is fully and properly loaded on the remote machine.

b. SDK Simulators

SDK simulators, which are local simulators, can also be helpful for testing some parameters. With the iOS and Windows simulators, we could check content, alignment, and layouts quite reliably. However, we did encounter some inaccuracies with the Android emulator.

After trying some simulators for testing eLearning, we realised we cannot ignore the fact that actual learner experience cannot be completely checked, since physical devices are not being used – so there can be inaccuracies and performance mismatches based on the configuration and resolution of the machine running the simulator.

Limitations of Simulators for testing eLearning

• Cannot test actual learner experience
• Cannot check real-time physical device aspects, i.e. battery life and charging, and actual bandwidth speed
• Cannot check content/functionality dependent on physical device features
• Cannot check gestural navigation (custom interactivities)
• Inaccuracies and performance mismatches based on simulator machine configuration and resolution

While tools and simulators help in testing, they just aren’t quite the real thing. As mentioned in an earlier blog post – The Proof Of The Pudding Is In Multi-device ‘Physical’ Testing, there is no alternative to testing on physical (real) devices. Physical ‘real’ devices are an absolute must for you to experience your eLearning exactly as your users will.

The post Multi-device eLearning Testing with Tools and Simulators first appeared on The Upside Learning Blog.

But the sheer number of device-OS-browser combinations and the set of test parameters which need to be checked for EACH combination make the testing process complex, to say the least.

Based on our experience in designing, developing, and testing different types of eLearning – including Flash-based projects, courses created using Rapid Authoring Tools, and HTML-based projects for multi-device learning – I have listed five key considerations that can help you in testing your multi-device/ responsive projects.

1. 1. Define the Testing Target Environment and Approach

For a precise, limited specification, i.e. a very specific and narrow target range, defining a testing environment would be relatively easy. It might look as simple as this –

However, for a wider target range, an optimization approach would be helpful. This involves analyzing popularity, usage, and sales statistics for devices, browsers, and OSs to narrow down to a comprehensive, representative set.

1. 1. Create a Testing Matrix

Once an optimal set of devices, OSs, and browsers are identified, manually work out all the permutations and combinations to create a testing matrix. The lowest specifications will form the parameters for minimum edge testing.

Tip: Your test cases will need to be refined and extended to make sure that different devices are covered. For example, for the scenario page shown below, the test case for desktops would define clicking the next/back arrow buttons as well as the numbered buttons for moving from one to scene to the other. For the same scenario page on a tablet, the test case may additionally define horizontal swiping to move between scenes. Finally, for smartphones, the scenario presentation has changed to a non-interactive, more-text-based view that is better suited to smaller displays. The test case therefore needs to define only vertical swiping to scroll through the scenes.

1. 1. Check the Availability of Physical Devices

The next point of consideration would be the availability of actual devices. Check if all the devices listed in the testing matrix are ‘physically’ available, and if required, evaluate if you can use tools/simulators to cover the missing ones.

Tip: Use actual devices and set ups for testing, as far as possible, for more accurate results, rather than relying on tools and simulators.

1. 1. Test, Test, and Re-Test

As far as the testing process goes, it may be more efficient to first test on one desktop, one tablet in portrait view, and the smallest smartphone in portrait view. This will allow you to validate content for all breakpoints as a first major stage of testing. It is advisable to perform this testing 100% manually on the initial three representative devices, one device at a time.

Tip 1: Wait till the initial issues are fixed and re-verified before expanding to test on other combinations.

Tip 2: When testing the other combinations, it can be more effective to go device-type-wise – for example, first test on all tablets, covering all applicable browsers and OSs in succession on each tablet; then move on to smartphones.

1. Issue Logging

Log the issues in an efficient manner, so as to make grouping easier and reduce duplication.

Tip: Make smart use of keywords while logging issues (e.g.device/brand/OS/version/browser), either as a separate field or within the issue description.

As technology keeps evolving at breakneck speed, particularly with regards to mobiles and tablets, eLearning developers and testers like us will keep encountering new challenges and will need to find innovative solutions. I hope these key considerations come in handy and help you to make your testing process more effective.

The post 5 Key Considerations for Multi-Device Testing first appeared on The Upside Learning Blog.

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?

   1. 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.
   2. 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.
   3. 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?

   1. 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?

   1. The smaller the device, the harder it can be to touch a “precise” spot. Target areas for interactive elements should therefore be at least 40×40 pixels for smaller devices.
   2. 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.
   3. 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?

   1. 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.
   2. 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?

   1. 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?

   1. Since multi-device content will most likely display on touch and non-touch devices, there could be a couple of approaches for learner instructions:
      1. Action-specific instructions:
         1. Conditional device-specific instructions; for example: For desktops/laptops-Click OK to proceed. For touch screen devices-Tap OK to proceed.
         2. Generic instructions; for example: For desktops/laptops/touch screen devices-Select OK to proceed.
      2. Task-based instructions:
         1. Where the nature of the interaction permits, instructions can be task-based rather than action-based; for example:
         2. 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?

   1. 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.
   2. 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?

   1. 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:
      1. Shifted labels that are now pointing to the wrong elements (or to nothing at all!)
      2. Incorrect sequence;for example, a visual precedes rather than follows text
      3. Incorrect textual/audio references to content at a particular location; for example, “the diagram on the right”.
      4. 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?

   1. 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.
   2. Remember to minify all CSS, JavaScript, and HTML code and delete all commented code to reduce the package size.
   3. 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:

6 Surprising Bad Practices That Hurt Dyslexic Users
Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes

The post Testing Of Multi-Device eLearning Projects first appeared on The Upside Learning Blog.