Today, most learners need to access information and want the flexibility to learn on the device of their choice. As the trend for mLearning increases, organizations are bound to change their eLearning strategies to adapt to the changing environments. Since Flash, a leading authoring tool till a few years ago, is not supported on mobile devices, organizations feel the need to convert their Legacy Flash courses to HTML5. By doing so, organizations also enhance their training and improve the ROI.

These 4 Examples on How to Use Migration from Flash to HTML5 To Enhance the Impact of Your eLearning will help organizations improve their eLearning as they migrate from Flash to HTML5. These examples feature creative instructional design, a modern look and feel, and a focus on better visual hierarchy.

Example 1 – Traditional eLearning course redesigned (and migrated to HTML5) to be more intuitive, interactive, and engaging

Originally, this was a traditional eLearning course that was later converted to suit the needs of the modern learner. The earlier design had a long video and learners had to go through a Welcome Screen before they were introduced to the Menu. Now, the Welcome screen and the Menu are combined into one interactive screen.

There were also Overview, Objectives, and Coming Up Next screens, which further added a delay in the learning process. This was eliminated, and the Overview and the Objectives screen are now placed in one interactive screen. The static screens were also given a suitable visual hierarchy so that learners can focus better on the key content. Contextual icon clicks replaced the non-intuitive interactivities, which involved clicking on images that appeared to be part of the background image. This probed learners to interact effectively.

The new, migrated course allowed learners to easily migrate through the course and offered better interaction and control over the pace at which they learn.

Before the migration, there were 3 separate frames on the Introduction and Module structure, and after the migration, a single frame with the required information (layered and more intuitive) was used.

Before the migration, the image was not relevant to the content and the visual hierarchy was also not apt, and after the migration, relevant imagery and precise information hierarchy was added.

Example 2 – Migration of Flash-based eLearning course with heavy visuals and animations into HTML5 format with Microlearning elements

Earlier, this was a Flash-based, traditional eLearning course with heavy visuals supported with animations. The whole content had a user interface that looked like a book and the content was presented using contextual imagery and typography.

There was a challenge in trying to follow the general guidelines of a responsive design as well as keeping the same degree of engagement with visuals and interactions while migrating it for a multi-device delivery using HTML5. Firstly, the user interface was simplified so that it would work on all devices and platforms. The imagery to convey key messages was retained and icons and buttons to highlight additional content was added. This was done to keep the engagement factor intact. The content was also converted into smaller, bite-sized nuggets.

Before the migration, the design looked dated (the initial course was designed over 7 years ago), and after the migration, modern and contextual imagery was used to set the context.

Before the migration, the design looked dated and the screen looked cluttered, and after the migration, contextual imagery and a clear visual hierarchy were applied.

Example 3 – Migration of older HTML course on Time Management into Mobile-friendly Microlearning nuggets featuring Videos, Scenarios-based learning, and Gamification

Originally, the course had an older HTML framework that was not compatible with Smartphones and had a lot of interactivities that were not optimized for a mobile platform.

The course was converted to bite-sized, Microlearning nuggets that could be viewed on all devices and offered learners the flexibility to learn at their own pace. It was delivered in various formats including Videos, Scenarios, Gamified activities, and so on that helped step up the learner engagement quotient and offer them an immersive learning experience.

Before the migration, a traditional eLearning design format was used, and after the migration, a Scenario Based Learning in a Guided exploration mode was implemented.

Before the migration, a traditional and heavy design was used, and after the migration, an easy to read and clean uncluttered design was incorporated.

Example 4 – Migration of a traditional, page turner eLearning course into Scenario Based, Mobile Apps to engage a modern learner demographic

Initially, this was a traditional eLearning module integrated into an articulate presenter framework with minimal controls for the learner. It was more like a page turner wrapped into a User Interface.

The course was migrated into a scenario-driven approach that would enable learners to learn, practice, and apply their skills in the subject through interesting exercises and assessments. It was made compatible with Tablets to offer learners the flexibility to take the course from anywhere. It was also converted into Mobile Apps so learners could have offline access to the courses, which helped them practice their learnings at the precise time of need.

Before the migration, it was a cluttered design, and after the migration, it was an uncluttered and crisp design with clear visual hierarchy.

Before the migration, it had a traditional eLearning design format, and after the migration, a modern design was implemented.

Source: https://www.eidesign.net/4-ways-to-maximize-the-impact-of-your-training-when-migrating-from-flash-to-html5/