How To Use Responsive eLearning Design For Better Learner Engagement

mLearning provides multi-device support and is undergoing a shift from a fixed layout to a dynamic or responsive eLearning design. In this article, I answer 5 questions on how you can use responsive eLearning design to create better learner engagement.

Ways Responsive eLearning Design Can Create Better Learner Engagement

What is responsive eLearning design? 

Responsive eLearning design draws its inspiration from responsive web design concept that allows the website to be viewed on devices.

Responsive eLearning design is an eLearning format that responds to the screen size of the device on which it is being viewed.

Here’s an example of how responsive eLearning design will look on multiple devices:

Responsive eLearning Design

1. What Are The Important Characteristics Of Responsive eLearning Design?

  • The most significant characteristic of responsive eLearning design is that it enables the content to respond to your device’s viewable area. It offers the best possible layout on your device (smartphone or tablet) that helps you get the right User Experience and the expected learning experience.
  • To ensure that the content is presented in the most user-friendly manner on all target devices, the content needs to be restructured and laid out differently on the screen. Given the fact that responsive eLearning designs are multi-device (they run seamlessly on desktops, laptops, tablets, and smartphones), they must be optimized keeping note of the availability of real estate on each device. For example,
    • The content in a smartphone may focus on significant aspects first and the related information may be layered (to be revealed on further exploration).
    • Similarly, the interactions must be adapted suitably. Hence, interactions that require manual dexterity just wouldn’t work effectively on smartphones and must be remapped to suit smartphone based interaction to provide the right User Experience.

2. Why Does Responsive Design Matter In eLearning?

Look at the all-pervasive usage of mobile devices in our daily life and it only stands to reason that they should be used for providing access to learning. We have seen the push for eLearning come from learners and the organizations have responded by integrating the Bring Your Own Device (BYOD) policy to provide flexibility to users to learn on the device of their choice.

Today, most of the corporate training needs can be offered on mobile devices with the flexibility to learners to take up part of training on desktops/laptops and balance on the go (on tablets/smartphones).

Supporting this is the transformation in authoring tools where earlier adaptive tools are now giving way to fully responsive tools that create significantly better User Experience leading to higher learner engagement.

3. What Tools Can You Use To Design Responsive eLearning Courses?

As I have mentioned, there has been a steady evolution of the authoring tools and currently, there are 3 tracks:

Responsive Design Tools

These offer layouts that are optimized across devices.

  • Tools that offer rapid development to design.
    Adapt Learning, Articulate Rise, CrossKnowledge Mohive, dominKnow Flow, Elucidat, and Gomo are the leading options in this category.
  • Tools that use multi-device layouts based approach to design.
    Adobe Captivate and Trivantis Lectora.

Adaptive design tools.

These too offer multi-device support but the content will shrink to fit smartphones. The popular options here are dominKnow Claro, iSpring, and Articulate Storyline.

4. What Are Some Tips You Can Use To Create Effective Responsive eLearning Design?

Here is a list of tips that you can use to create effective responsive eLearning design:

  1. Responsive eLearning design must factor for feasibility for the smallest real estate (smartphones-including how it would work in the portrait mode) first, and then move up to tablets, desktops/laptops. This is crucial in ensuring that required User Experience can be provided on each device.
  2. In spite of pre-planning and following the right approach, it is very difficult to predict if the User Experience across all devices will meet the required mandate. The litmus test is validation with users, and this must be factored in the development cycle.
  3. As highlighted earlier, you need to factor for eLearning content customization to do justice to different real estates and the way information appears across different devices.
    • For smartphones, focus on absolute essentials in the first pass and provide related information in a layered manner (available for exploration).
    • It goes without saying that the User Experience on mobile devices is hampered if the content takes an inordinate time to load. Optimize the file sizes, even look at alternate imagery that is light and smartphone friendly.
  4. Navigation should be simple to factor for the smaller real estate for the smartphones. You can opt for different formats across devices so that they offer the best User Experience in each device.
  5. Interactions need special attention. You need to stay away from interactions that need manual dexterity and may come in the way of big thumbs.
  6. Across the designs, ensure that the buttons and any other clickable asset is large enough. Otherwise, the required impact will not be created.

5. How Can You Use Responsive eLearning Design For Maximum Impact?

So far, we have noted how you can use responsive eLearning design to create an optimal User Experience on each device. Another interesting and highly significant aspect is to use the device (given its main characteristics) to be used for a specific type of learning. For instance,

  • It is unlikely that you will take a 60-min course on a smartphone but you will certainly take the course of similar length if it were offered as shorter microlearning nuggets of 3-7 each.
  • Similarly, once you provide the option to users to learn across devices, they may choose the formal training on desktops/laptops but would prefer informal learning on a smartphone/tablet. You can achieve this by offering a combination of formal training with Performance Support Tools (PSTs) or learning aids that are designed to help learners apply their knowledge on the job.
  • Additionally, you can use the mobile devices to push sessions for practice, reinforcement, and remediation.
  • You can also push challenges (assessments) that keep the learners on their toes and encourage them to review the formal training assets till they gain the required level of mastery.

I hope this article showcases possibilities that responsive eLearning design offers and how you can use it for high impact training and better learner engagement. You can go beyond its capability to lay down the eLearning content to the device’s size and dimensions. Instead, you can use each device to play a significant part in the learning journey. Do contact me at apandey@eidesign.net, if you have any queries.

Source: https://www.eidesign.net/use-responsive-elearning-design-better-learner-engagement/

 

#eLearning #LIVESTREAM Custom Captivate Themes 2017-11-13 16:00 EST/21:00 UTC

In this Adobe Captivate eLearning live stream, I will share with you how I create a custom theme for Adobe Captivate 2017

Follow the link below at any time to set up a reminder to be notified when this event becomes live on November 6th at 4 PM Eastern Time.

#eLearning #LIVESTREAM Custom Captivate Themes 2017-11-13 16:00 EST/21:00 UTC

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

Multi-Device Elearning: Responsive eLearning Design or Adaptive – What’s the Best Choice?

Responsive-Vs-Adaptive

With the rise of mobile devices and varied screen sizes, Responsive eLearning has become quite essential to create multi-device eLearning or mobile learning. It enables learners to access the eLearning courses from their preferred devices. As eLearning designers, we need to develop eLearning content such that it works swiftly and smoothly on every device. Before you could design mobile learning effectively, it is essential to understand the responsive as well as adaptive design principles. In our previous blog, we have discussed, “Why Responsive eLearning Design is a Must-Have for Online Training Content?” In this blog, we will discuss responsive eLearning design while comparing it with the Adaptive eLearning Design.

Responsive eLearning Design Vs Adaptive eLearning Design

Both responsive and adaptive eLearning designs are based on the web design principles. These are the two must-know facts to get started with mobile learning.

Responsive design is a web design approach in which the content responds to the particular screen size providing an optimized learning experience – No matter what the device is. Simply put, Responsive eLearning Design is the eLearning that adapts and responds to all devices.

Responsive eLearning content is fluid and flexible in nature. The content (layout and structure) restructures itself to fit the screen size depending on the learner’s device. This means you can author once and publish the eLearning content to various devices with different screen sizes.

Pros:

  • Less development time and cost-effective
  • Scope for customization – content can be easily updated
  • Onscreen elements are resized as per the screen
  • Better look and feel
  • Eliminates the need to “Click Next”

Cons:

  • Increased loading time (for mobile devices with inconsistent data connectivity)
  • Requires more careful designing efforts

Adaptive learning design, on the other hand, is less fluid in nature and uses different layouts for different screen sizes at specific breakpoints. These layouts are predetermined and designed such that the eLearning content fits to different screen sizes. This means you have to design specific layouts for specific screen sizes.

For example, if the elearning content is to be delivered on 5 different screen sizes, then you need to create 5 different content layouts to fit those screens.

Adaptive design makes a complete sense when you are targeting eLearning delivery via particular devices.

Pros

  • Provides control over design
  • Less loading time – Only mobile-friendly assets are downloaded

Cons:

  • Expensive and time-consuming
  • Limited to specific devices

To conclude, creating responsive mobile learning courses is not just shrinking the content to fit various screen sizes, but following eLearning design principles such as maintaining user readability across all devices for better learning outcomes. Choosing the right authoring tool that provides responsive and adaptive design capabilities will be the most vital factor while designing responsive mobile learning.

At Swift, we blend the best of both worlds – Responsive as well as Adaptive for a better learner experience. Though these two terms are different, the end goal is same i.e., creating effective eLearning for a memorable learning experience. However, we believe that the learning context and the target learners should drive the device and design choice.

So what is your favourite approach in eLearning development – Responsive or Adaptive?

If you are looking for interactive eLearning course with mobile first approach, contact us for a free consultancy.

Source link: http://www.swiftelearningservices.com/multi-device-elearning-responsive-elearning-design-vs-adaptive/

Webinar: Advanced Tips and Tricks to create Responsive Projects in Adobe Captivate (2017 Release)

Advanced Fluid Boxes in Adobe Captivate 2017Join me to learn about the tips and tricks for using Fluid Boxes in Captivate and make the most of them. She will also cover the best practices for creating responsive simulations, click-based interactions, drag-and-drop interactions, quizzes, etc. Along the way, learn about some tips and tricks for using Fluid Boxes with Master Slides, Multi-state Objects, and more. Don’t miss it!

Webinar title: Advanced Tips and Tricks to create Responsive Projects in Adobe Captivate (2017 Release)

Date and time: 7th November 2017 | 8:00 AM PT

Registration link

#eLearning #LIVESTREAM Converting to Responsive Projects 2017-11-6 16:00 EDT

Captivate 2017

In this Adobe Captivate eLearning live stream, I will share with you the methods for converting non-responsive Adobe Captivate projects into responsive design projects. I will cover converting to fluid box design as well as breakpoint design and one other method that you might find interesting.

Follow the link below at any time to set up a reminder to be notified when this event becomes live on November 6th at 4 PM Eastern Time.

#eLearning #LIVESTREAM Converting to Responsive Projects 2017-11-6 16:00 EDT

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

#eLearning #LIVESTREAM – Designing for the Unknown Device – 09/18/2017, 16:00 EDT

Manufacturers are coming out with new smartphones, tablets and other devices all the time. A skill set that is still relatively new for eLearning designers is designing for responsive design. This Livestream will attempt to uncover some of these secrets and make it easy for you to develop responsive projects in the future.

As per usual, I will also be taking questions if time permits so get your Captivate Questions ready for the Live Chat.

Follow the link right now to set up a reminder to get notified when this event becomes live.

#eLearning #LIVESTREAM – Designing for the Unknown Device – 09/18/2017, 16:00 EDT

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

#eLearning #LIVESTREAM – Fluid Boxes vs. Breakpoints 08/28/2017, 16:00 EDT

I had an experience this week in developing a theme/template for a client that I thought could be the basis for this weeks discussion. I started off with the intention of developing a fluid box based theme/template for their upcoming Adobe Captivate work. In the end, their requirements are such that using breakpoints makes more sense.

Follow the link right now to set up a reminder for yourself so you get notified when this LIVE STREAM goes live.

https://www.youtube.com/watch?v=xBsZsRQVFaA

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 ($50 value).

Master those Fluid Boxes!

Intro

A while ago I published a post explaining the setup of the Quizzing Master slides, compulsory parts of each theme, even the almost empty Blank theme. In this article I will try to explain my experiences using Fluid Boxes on Content Master slides. Most themes shipped with Captivate have several content master slides (exception = Blank theme). Let us first start with the master slides that are not behaving like the content or quiz master slides.

Main master slide, Blank and Title master slides

Main Master slide

It is not possible to insert Fluid boxes on the main master slide: the button seems active but both options (Vertical and Horizontal) are dimmed. Objects placed on that Main master slide, and inherited by the daughter master slides, are to be set up using the Position Properties panel. Example: the text container with my name and copyright in the example movie.
As you probably know, it is not possible to have shape buttons timed for the rest of the project when you use Fluid boxes. You could put a shape button on the main or one of the other master slides but you cannot control it because it has no ID. In the example movie I preferred to have a Next button on the individual slides, because ton most slides it is hidden until the learner has visited everything. However a toggle shape button for Audio, for CC, for the TOC could be on the Main Master slide. They will not behave like objects in a Fluid box however, but act as defined on the Position Properties panel for size and location.

However after some more testing on iOS devices, the Position properties set up for those objects are not correctly displayed in portrait mode.

TIP: at this moment avoid putting objects on the Main master slide (except background of course), since they don’t display at the correct location on some mobile devices.

Blank Master slide

This master slide has no Fluid boxes by default but you could add them. As I have explained in previous articles, you should prefer to duplicate the master slide for editing, don’t edit the original slide because it is used for Powerpoint import and for software simulations.

Title Master slide

That master slide has one Fluid box (parent fluid box) but no child fluid boxes. It is set up as ‘Squeeze in a Column’, and vertically and horizontally centered. Since the Title Placeholder is inserted directly in this Parent Fluid Box, you are not able to add child fluid boxes.  Because each new project, using the default theme White will start automatically with a Title slide, this has caused already many frustrations when starting with the use of Fluid boxes. If you want to use fluid boxes on the first slide, you have to change the master slide from Title to Blank (exception Blank theme which starts with a Blank slide).

TIP: if you want to add objects on the Title master slide, first take out the Title Placeholder, to be able to insert child fluid boxes. Then put back the Title Placeholder in one of the child fluid boxes.

Content master slides

It can be a time saver to use a content slide that has already Fluid boxes. In a future next article I’ll explain how to create a custom content master slide with the help of Guides, but for now let us focus on an existing master slide, and see how we can tweak it.
In the example movie, the second slide is based on the Content04 master slide from the Theme ‘OldPaper’. I didn’t customize the theme, just applied the correction explained in my last post

Look at the setup of the Fluid boxes on the master slide: the parent fluid box (FB_15) has two vertcial child FB’s (FB_16 and FB_17). The top one is meant for the Title placeholder:

The bottom Fluid Box has 4 child FB’s, (FB_19,FB_20, FB_21, FB_22), which are set up to wrap Symmetrically (when width is too small, two FB’s will move to the next row), and have a padding both vertically and horizontally to have some spacing between the FB’s. Each of them has a placeholder for an image.

Example movie

Play with this responsive movie (will open in a new window) which has only 3 slides: Title slide (with inserted Next button, and taking over my name from the main master slide), a slide based on Content04 master slide, with a lot of tweaking, and an End slide. On the content slide you are supposed to click each of the 4 buttons in the top. The Next button on that slide will only appear when you have clicked all available shape buttons and seen all the content.

Refining slide based on Content master slide

The FB setup on the master slides can be tweaked on a slide based on that master slide. You can remove all fluid boxes, but that has not much sense. To demonstrate I did a lot of tweaking for the second slide of the movie which you just watched:
  • I deleted the image placeholders
  • I decreased the height of the top fluid box (FB_MS2_16) to 10%, originally it was 15% (edited font style as well)
  • I added a third vertical child FB under the parent FB_MS2_15, it is labeled FB_9

    TIP: changes like this will not affect the master slide. You can get the original layout from the master slide back by using the ” Reset Master Slide” button in the Properties panel of the slide.

  • That last FB_9 got two horizontal FB’s, FB_37 (70% of the width) and FB_38 (30% of the width); the last one will be used for the navigation buttons (Back/Next)
  • The setup for FB_38 is visible in this screenshot
  • Each of the four FB’s in the center (FB_19,FB_20, FB_21, FB_22) has no longer any object (see 1) and can be divided in two new vertical child FB’s
  • As you can see on the screenshot, the top FB will have a shape button and explanation text (originally hidden, but cannot be grouped in FB’s what would make the advanced actions a lot easier), the bottom one has an example of the style of that state in a shape (also initially hidden).
  • Setup for the top FB’s here is visible in this screenshot; for the Shape button (‘Normal’) the option Maintain Aspect Ratio is kept, but not for the Text container, so that it can change for smaller screen sizes (especially in portrait mode).

More questions?

You will have seen that I always had Rulers and Guides activated. My next blog post will focus on the use of that great tool, which almost no one seems to use?

Sure, I have several advanced actions in that movie, but that was not the goal of this post. No explanations here about those actions.

Font Based Icons in Responsive Design Using FontAwesome (this is really awesome)

Previously I showed viewers how they could include the icons from the FontAwesome font in your Blank Projects (non-responsive projects). [watch that video here] In this video, I will show you how you can get the same icons in your responsive projects and add an awesome quality to your eLearning projects. Remember that fonts are essentially scalable vector graphics. There is no better way to make beautiful navigation and control icons in responsive design projects.

If you found my videos useful please consider subscribing to my YouTube channel: Paul Wilson Adobe Captivate Tutorials

If you think your colleagues will like my videos please use the share button at the top of this post.