The single thing that had the largest impact: TV or no TV!

Spending an entire day in front of a computer screen is not the same as spending it watching TV. With a TV, you don’t need to seek. Content is pushed to us. But with the net, we have a much wider variety to choose from and we have to seek what we want. That really helps with the passivity thing.

I mean, you first make the effort to figure out what exactly you’re into and then you get used to exploring what you’re interested in rather than having it conveniently delivered to you. Even with content-push apps like Flipboard or Newsstand, a generic “technology” subscription is interesting no doubt, but you really only spend hours digging deep when you have managed to find and subscribe to “technology forms that rock your boat”!

I do realise this no TV business is a big, almost unthinkable thing for many people. So I figured – how about making a proportion rule? If you happen to watch TV for 10 hours a day, say you have to watch a channel for 2 hours and then you have to change to a new one. At least you’re not just staring at the same sort of gunk; you have to mentally shift to new topics/formats. (Baby steps!)

Having interests and exploring variety

I love experimenting and it makes me feel mentally peppy. Honestly, I find it appalling when people say they love music and have only heard one genre of music and cannot even talk about that passionately! Given how easy it is to research – or plain just look up things!- on the net, it’s fun to find out what other people are up to, the schools of thought that exist around the thing that interests you.

Experiencing things vs. consuming them

I think what falls by the wayside in constant content push (e.g. TV-style) is the cycle after the initial exposure to the content (i.e., after reading or listening). Reflecting on the content when you’re doing something totally unrelated (long live housework!) makes it even more interesting. It’s the act of turning it over in your mind. Did the program/information really make sense? Why was it really interesting? Was it good, was it bad, was it controversial, what are the statistics around it, or what issues and social conventions?

Scaling sensibly

Many friends and I have faced this: we’ll get worked up one day with no longer doing X (playing music, writing…) and swing out wildly in reaction: we’ll start a blog or commit to practising every day for 4 hours. Unsurprisingly, that didn’t last with many of us. I think what helped was phasing the change. Especially when it’s something like quitting TV or starting to learn to be critical, you kind of need to find something that gives you pleasure or interests you! If you’re used to being totally passive and are trying to shake it off, do give writing independently (like on a blog) a chance, but I think it also helps to think of easier-to-sustain things like maintaining a scrapbook, trying flash fiction, curating a Flipboard magazine or participating in an active forum.

Learning where there’s variety on the internet

It’s still possible to be utterly unimaginative and fall into a rut on the net. After all, the net gives you what you ask for, right? I found my reading habit was back to stay when I figured where there was good variety. Special interest forums can be really diverse within your interest area, and before you zoom in on an interest area (if you’re still figuring out what that is), try the generally famous-for-variety places like the TED or BBC portals – they’ve carefully curated and abundant high quality content on various topics, so you can sample lots in a single place without having to spend an hour just searching! (And by the way, TED is also a brilliant trap for passive consumption, so be extra alert! It is really important to critically evaluate the ideas however wonderfully they’re presented, so the reflection time is super necessary.)

There. Those were quite a few of the things I found helpful!

The post Overcoming Passivity in Our Intellectual Culture first appeared on The Upside Learning Blog.

Upside Learning has analysed 13 years of experience and practice in designing mobility to present to you the key takeaways through a webinar on ‘Leveraging Mobility Effectively’ by Amit Garg.

Amit Garg, Co-Founder and Director of Upside Learning has long been an advocate of using mobility properly. After more than a decade of consulting for large organisations’ training needs, he has an interesting observation: “Many companies have certainly moved to a mobile based delivery. But you can’t really call it mobile learning when you’re cramming what is essentially a day long course into a mobile-friendly viewing format. The learner’s experience is what makes mobility unique, and that’s the most overlooked aspect in most designs! This won’t do… You’re dealing with a stage of the world where people have sophisticated expectations by now of what kind of experience they want from their devices. Most of what’s out there right now just won’t cut it for the savvy user.”

Upside’s  upcoming webinar on 22nd November at 10 AM (Central Time) is aimed at helping companies at different levels of ‘mobile maturity’ to see how better to use technology to achieve their targeted outcomes in spaced learning, long-term development and other structured interventions.

Interested in exploring options for your enterprise? Come for a highly productive hour, after which all attendees will also receive a kit of free resources.

Registrations are now open!

Date: 22nd November 2017 (Wednesday)
Fee: Complimentary
Time: 10 AM (Central Time)

The post Leveraging Mobility Effectively – Webinar 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.

So, how do we really decide? What are the relevant and key factors to consider? The decision has a significant impact on the overall objective you want to achieve in addition to having an impact on the budget, go-to-market (timelines and effectiveness), and the eventual success of the initiative, to be able to produce money online, using different strategies like the use of digital coins from this DCForecasts news online. Arguably any approach could be short or long term. Thus, it doesn’t have a very permanent impact and can be changed later on, as the factors vary.

Let us look at the key factors to decide. Most of these factors are based on my own interactions with the people I meet, our current customers, and from the impressive array of projects my team delivers for our customers.

To note: The below information is more of a guideline. In the real world, there is no definitive formula and eventually it also depends on the attitude and mindset of the organization to choose either of the approaches.

1. Target devices

This is perhaps the most important and decisive factor to consider. If you are targeting only a small set of specific devices, say desktops and tablets (only iPads) or a slightly larger set of specific devices, say desktops, iPads and iPhones; using the tools may be a good option given the fixed devices and screen sizes.

However, if your target set is more diverse than this – desktops, tablets (small and big ones, iOS and Android), and smartphones (iOS and Android), then using tools may be a challenge as tools still lack the capability to produce outputs that can work seamlessly across a large array of devices. This may be relevant when you are catering to a BYOD environment and either reluctant or unable to restrict the devices a user may use to access learning. In such cases, the best bet would be to go for custom development using the core technologies. You could also look at using a few frameworks (not tools, more like development libraries) to create truly multi-device eLearning. E.g. Upside Learning’s FRED is a great fit in such cases. There is an open source framework as well – ADAPT which may perhaps be evaluated. To reiterate, this is the most critical factor of all. Also when using tools, ensure that you have done a thorough mapping of your target devices and the tool being used so it caters to all of them. This brings me to the second factor.

2. eLearning output

Tools, in general are getting better and more powerful but some of them may still have limitations in the kind of templates they offer. Hence impacting the overall design and level of the eLearning output you will obtain. Notwithstanding the target devices being taken care of, you also want to create powerful eLearning. For eLearning that involves and uses animated simulations, scenarios, rich levels of interactivities – tools may offer only limited features to achieve those. For such eLearning, custom development (or using frameworks) may be a better idea. However, for eLearning used for Compliance Training, Video/Audio based training, relying more on graphics and text (with audio) – tools would be a good option.

3. Where is the development happening?

Most companies that develop all their eLearning internally either as a policy or business model tend to rely heavily on tools to do so as per this news source. It is understandable and prudent, given the complexities in training, hiring, code maintenance, update, etc. However, if your development is outsourced, the factor which comes in play is more of long term code maintenance and content update.

4. Time to market

Another important factor to be considered in case you are working against tight deadlines. If your time to market is limited and rushed, using tools may be a better approach (subject to point 1) as tools generally reduce development time and testing time, in this case, we recommend using the Best methods for USA affiliates. However, if that is not a constraint you can then choose to go with the custom development route as well, and as for financial development, the use of resources as digital coins could be really useful for this, which you can learn from these news online.

5. Budget

Over a period of time, it is observed that using tools reduce the cost of development and maintenance compared to custom development. But it also depends on whether you are doing it internally or outsourcing. Internal development usually tends to have a fixed resource cost but can have high opportunity cost, or cost in terms of time to market given your bandwidth – true for both custom and in-house tools, to develop your financial conditions using investment tools as the delaware statutory trust to be able to invest money online and get some profits using these sources. Unless budget is a very serious constraint, So we took a loan,and getting a short term loan in 2019 is fast and easy if you have the right credit.  I recommend using the first 4 factors primarily to decide. At the end of the day – whatever we develop has to add value to the users and help them learn better.

The post Multi-device eLearning: Custom or Tools? first appeared on The Upside Learning Blog.

Evans and Taylor (Evans & Taylor, 2005) define scenarios “as stories focused on a user or group of users, which would provide information on the nature of the users, the goals they want to achieve and the context in which the activities will take place. They are written in ordinary language, and are therefore understandable to various stakeholders, including users. They may also contain different degrees of detail.”

J. Carroll (Carroll, 1999) attributes five characteristic elements to e-Learning scenarios: they include or presuppose a setting, they include agents or actors and each agent or actor has typically goals or objectives; every scenario has at least one agent and at least one goal. Finally all scenarios include sequences of actions and events, things that happen and change the scenario setting.

In our opinion, it is best to use interactive scenarios to support active learning strategies such as problem-based or case-based learning. It normally requires a learner to navigate a storyline/narrative across a temporal space (time), leading to an exploration of the aspects of and eventually resolution of the problem (posed in the scenario). Navigation of a scenario leading ‘decision’ points of the scenario requires the application of knowledge, critical thinking and to an extent, problem solving.

For workplace learning, scenarios can be used for developing skills that require decision-making based on a ‘set of principles’. They can be used for soft skills such as selling, communication, etc. Oftentimes, the word ‘scenario’ is incorrectly associated with EAT (Enterprise Application Training) simulations and refers to the setting of the scene that requires a particular procedure (being simulated). It can help to think of scenarios as a type of social simulations (think of the game ‘The Sims’).

Typically outcomes that involve decision making based on a ‘principle set’ are best served with scenarios as an instructional strategy. We often recommend the use of scenarios for technical/professional knowledge and skills as well. If the learning outcomes you require are predominantly at a recall/comprehension level, scenarios are not the way to go; you’d be better off using a series of discrete displays and associated practice examples.

One aspect of simulations that applies equally well to scenarios is ‘fidelity’. How real does a scenario/simulation need to be to achieve the required learning outcomes? This is especially true of scenarios that involve soft/communication skills; the use of video (high fidelity) is more effective than the use of image/voice-over.

The cost of design and development of scenarios varies and depends on various factors (not limited to):

1. Learning outcome

2. Level of detail and branching

3. Decision point and feedback strategy

4. Use of media

There are definitely some positive implications for use of scenarios:

1. Allows designers to Influence outcomes in the affective domain (Bloom)
2. Encourages critical thinking and problem solving
3. Allow risk-free exploration of outcomes (similar to simulations)
4. Requires leverage of learned knowledge/skills to achieve favorable outcomes

On the other hand, there are some clear drawbacks:

1. Text/Audio/Images used for representation result in a substantial drop in fidelity. If you want decent fidelity, try to use video. (especially for soft/communication skill courses)
2. How the narrative/event/situation is written and elaborated is important, too little detail results in it being interpreted as superficial, too much detail will result in difficulties understanding and may cause learner to be diverted from key learning/observations.
3. Scenarios are developed best using an iterative approach and this involves significant time from both designers and SMEs.

Try answering these questions to determine if SBL is the right option? (Clark, 2009)

1. Are the outcomes based on skills development or problem-solving?
2. Is it difficult or unsafe to provide real-world experience of the skills?
3. Do your students already have some relevant knowledge to aid decision-making?
4. Do you have time and resources to design, develop, and test an SBL approach?
5. Will the content and skills remain relevant for long enough to justify the development of SBL?

DOs and DON’Ts

1. Ensure there are direct and real consequences for every action the learner takes.
2. Ensure learners know why they failed. Feedback should be more than ‘Correct/Incorrect, please try again’. This may require writing detailed individual options, each of which is a plausible response to the question posed or decision required.
3. When designing scenario-based-learning, it helps to keep in mind that feedback can be both discrete and continuous. Typically designers are inclined to use discrete feedback in scenarios, but could also consider the use of continuous feedback elements such as scores or levels (typically game-based learning elements used in SBL to engage and motivate better).
4. It follows that the designer would write customized remedial feedback for each option. Do not under-estimate the learner’s intelligence. Don’t add decision points simply to allow learner interaction with the scenario. Instead, the decision points must make them think carefully about the options available before choosing one. This requires each option to be plausible and relevant.
5. Allow the learner to go back into time as and when they choose (not only when presenting the scenario, but also at any other point in the learning experience). One of the critical skills we are trying to develop is ‘discrimination’, so in a sense, they should be able to stop going down a particular branch of the decision tree the moment they realize they are going wrong. This mimics real life closely, you’d stop whatever you were doing the moment you realize you are going wrong, not necessarily when told you are wrong.
6. Think about balance – visualize your scenario as a tree, it should be fairly symmetrical around the central trunk, and the branches should appear similar to each other. It is alright to have a few dead ends, but most paths through the branches should lead to an outcome of some sort.
7. In a way, a scenario is modeled based on a ‘theme’ or a ‘world’, as a result thematic consistency matters. Actions/decisions should ideally reflect the context of the world they are made in. It would be incongruous to have actions in the scenario not reflect the world in which they are made in.

The post Is Scenario-based Learning The Right Option? first appeared on The Upside Learning Blog.

Simultaneously, we’re also getting used to seamless access to content across our multiple devices – think Dropbox, Kindle etc.

A recent survey on American adults reported:

Responsive eLearning

This multi-device world is leading to a responsive web. You find more and more websites becoming responsive and delivering a great experience on all devices. They’re also relatively future friendly in terms of expected compatibility with any new devices that may be released in the market in future.

A good example is our own website – www.upsidelearning.com. I encourage you to load this site and then play with the window size of your browser to see how the site responds.

Jeffrey Veen, CEO & Cofounder of Typekit and author of The Art and Science of Web Design says:

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

The same holds for the need for responsive eLearning too. While the web started becoming responsive a few years ago, eLearning is just beginning to move in that direction now.

The key benefits that responsive eLearning can bring are:

1. A single source solution which is cheaper to create and manage
2. Enhanced reach to your mobile workforce and increased uptake
3. Ability for employees to access eLearning on their own devices
4. Ability for employees to access eLearning outside office hours including during travel and waiting times
5. Making (compliance) training programs more convenient to complete
6. Ability to track your eLearning program completions or results across device types
7. Ability for employees to continue their learning experience from one device to another through bookmarking via an LMS

With more and more enterprises wanting to put their eLearning on tablets and mobiles, I think 2014 will turn out to be the year of responsive eLearning. We’re ready for that with our own Framework for Responsive eLearning Development – FRED, which makes responsive eLearning design and development easy, less costly, and reliable.

The post eLearning In A Multi-Device World 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.

Based on our experience in developing eLearning using HTML5, we have listed some key challenges a developer might face, along with possible workarounds.

1. Browser Challenges

HTML project performance depends largely on browsers, unlike Flash where the Flash Player was able to overcome most browser variations.

A few years back (2001 to 2005), Internet Explorer was the market leader with a 90-95% share in desktops and laptops. Today, that has come down to 20% as Chrome, Firefox, Safari, and Opera; Android Browser; Mobile Safari; and Dolphin have all picked up market share. This adds significantly to the challenges, as an HTML5-compliant application may need to be coded differently to ensure similar if not identical behavior on different browsers. The testing too increases as the number of browsers targeted increases. You can overcome these challenges if you avoid the use of features not supported by targeted browsers or provide alternatives to those browsers that don’t support those features.

Here is a quick view of how some browser versions support HTML5 features:

Ref: http://html5test.com/compare/browser/firefox-26/chrome-31/ie-11/opera-18/ie-8.html

IE is Special

Big domains like medical and banking sectors are still using Internet Explorer as a primary browser; however, many of the HTML5 elements do not work or work only partially with IE versions 8 and lower.

There is also a problem with external libraries/frameworks. For instance, if you are using external files in the project and are using JQuery’s “$.ajax” to load those files then JQuery may fail to load files in IE 11 locally. IE 11 handles “window.ActiveXObject” in a strange way. It still returns a function, but if you try to get its type “typeof(window.ActiveXObject)” it will return “undefined” (though in IE 10 it returns “function”). We faced this issue in JQuery 1.8.3, which eventually got fixed in the next release of JQuery.

Before using any external framework/libraries, do check the compatibility with different browsers and devices. It is generally best to use the latest release of the framework/library.

User Agents

Every software application – browsers included – has a user agent that sends information about the application as well as the device on which it is running to identify itself to the network. This information is provided in the form of a unique user-agent string specifying the software application type, name, and revision, and the operating system.

Here is the sample user-agent string for Google Chrome 32 on a Windows 7 Desktop PC:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

And here is the sample user-agent string for Google Chrome 31 on an iPhone running iOS 6:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_2 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko)CriOS/31.0.1650.18 Mobile/10A551 Safari/8536.25(BD6D0651-5072-4F26-B5D9-7A3FD57A65D8)

If you take close look at these strings, you’ll see that the browser name is different for different devices – the Chrome user agent for the desktop returns “Chrome” as the browser name whereas the user agent for the iPhone returns “CriOS” (“Cr” for Chrome and “iOS” for the OS). Similarly, there can be other parameter values within user-agent strings that differ based on device-software application combinations. Here’s another example – the sample user-agent string for Google Chrome running on a Nexus 5 is:

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.105 Mobile Safari/537.36

The sample user-agent string for Firefox running on the same Nexus 5 is:

Mozilla/5.0 (Android; Mobile; rv:27.0) Gecko/27.0 Firefox/27.0

Here, you can see that unlike for Chrome, the user-agent string for Firefox does not specify the Android version.

When developing eLearning in HTML, developers need to be aware of the different user-agent strings that will be returned for each targeted device-browser-platform combination. They need to make the eLearning compatible with all these user agents, so that information or content can be displayed accordingly. Let’s assume you want to run a system check at the beginning of a course, and display the results to the learner, indicating the areas of incompatibilities. If the course is intended to run on Google Chrome and Firefox on desktop PCs and iPads, then the developer must check for the browser names returned by the user-agent strings of all applicable device-browser-OS combinations and display the text “Google Chrome” or “Firefox” as applicable for all.

2. Code is Exposed

If the application is created using only HTML5 technologies then most of the files are rendered or cached on the user machine. This invariably means that an application’s presentation layer and business logic are exposed to the user. They can access all JavaScript, CSS, and HTML files and view code if so inclined. There are ways you can hide your business logic but if someone really wants to break in and is willing to go the extra mile, they will eventually get it.

Encrypting your HTML5 content is not really an option – because browsers cannot execute encrypted content. So here are a couple of ways in which you can protect your code to some extent.

The best way is to minify or obfuscate the code. The former involves shrinking variables to create minified versions of JavaScript files; the latter involves adding to the code to make it unintelligible. In both cases, the code can still be read by browsers without any need for decryption; however, it is difficult to understand for humans.

Note that obfuscation makes it time consuming, but not impossible, to reverse engineer a program. One drawback of this approach, however, is that some anti-virus software will alert users if they land on an application which uses obfuscated code, as one of the purposes of obfuscation is to hide malicious code.

Another option is to use the Base62 compressed encoding method that only uses alphanumeric characters to represent the original data – in other words, it represents a very long normal code as a shorter version. Here, since the code is compressed, it can still be read by browsers after reconversion to its original form; however, it cannot be easily understood by humans. Compression of the code also helps reduce the file size.

Here is some sample output from Base62:

Original code:

function detectPlugins() {
for (var alias in plugins2detect) {
		if (plugins2detect.hasOwnProperty(alias)) {
			var plugin = plugins2detect[alias];
			if (detectPlugin(plugin.substrs) || 
detectObject(plugin.progIds, plugin.fns)) {
				self.plugins.push(alias);
			}
		}
	}
}

Encoded as:

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c]);return p}('4 7(){5(1 a 3 0){2(0.6(a)){1 b=0[a];2(8(b.9)||c(b.d,b.e)){f.g.h(a)}}}}',18,18,'plugins2detect|var|if|in|function|for|hasOwnProperty|detectPlugins|detectPlugin|substrs|||detectObject|progIds|fns|self|plugins|push'.split('|'),0,{}))

One drawback, though, of using Base62 to compress code is that it increases the execution time on the client. Every time the file is loaded, it is converted back to its original format in the application memory, which takes time and delays the execution of the script.

Some applications which can help minify/encode/obfuscate code are:

a. YUI Compressor b. Packer c. JSMIN d. dojo compressor

3. Media Issues (Audio/Video):

It was easy to have audio/video streaming or buffering in Flash with the popular FLV/F4V formats. Now, browsers use HTML5 and tags to play media, and most of them support different video formats (e.g. MP4, OGV, and WebM) and different audio formats (e.g. MP3, OGG, and WAV). You need to include audio/video files in ALL these formats to cover a wide range of devices. Furthermore, if you want the video quality to adapt to the users’ connection speed (useful when targeting mobile devices), you will have to create multiple versions of the same video. Note that this will have an effect on the size of the eLearning package and most LMSs have a size limit for a course that can be uploaded on them.

You must also provide a fallback for browsers that do not support HTML5 video/audio tags. Flash is an easy fallback option. Other fallback options are QuickTime player and Windows Media Player. We noticed that while using fallback options other than Flash, it is difficult to modify the default player skin using HTML and related technologies.

4. Animation Capability:

It was easy to create character animations, vector animations, software simulations, and animation reels in Flash. Animation is an important element used in eLearning for visual explanations and engagement value. With HTML5, the first challenge is to create animation in sync with audio – a time-consuming and complicated task to achieve with the tools that are currently available.

That said there are several ways in which animations can be created in HTML5: using HTML5 elements (e.g. Canvas, SVG), CSS3, or Spritesheet animations. Custom development with these elements requires significantly higher effort than was required with Flash. Tools such as Toolkit for CreateJS can help users to work in Flash and export HTML5 content. Edge Animate can help create animated and interactive content. These tools export HTML5 content, which will not be supported on older IE versions. Also, if these animations are going to be part of a course/project, integration, data communication, and control of these animations may not be easy. An alternative is to use Flash to create animations and then convert those into videos; however, while that works well for continuous animations, it may not be so effective for animations interspersed with interactivities.

5. Audio Synching:

It was very easy to sync audio with animations using the timeline feature of Flash Professional. We cannot do this in HTML5 as there are very few tools (like Adobe Edge) available and even those are still evolving. Read our full review here . Syncing can be achieved with ‘cue points’ but it’s a time-consuming task.

6. Testing:

Testing a web page means testing the layout, the logic inside, and the content being presented. Multiple layers of information make it difficult to test HTML5 RIAs (Rich Internet Applications).

In our experience, we see these possibilities causing the most failure: a) The code is not HTML5 compliant. b) The code is not compliant with a specific browser. c) The code is neither HTML5 nor specific browser compliant.

As browsers and the HTML5 standard continue to evolve, the process by which one identifies which of these may be causing issues will also evolve.

Today, the number of devices and operating systems in the market is huge. With the speed at which new devices and operating systems and their updates are being released, organizations are having a difficult time in coping. Procuring all types of devices and keeping them updated to test applications in real environments is proving to be a stiff challenge.

Simulators can help in initial testing but the results they provide may not be 100% accurate. At best they are good for a first pass, but running an application in the real environment on the appropriate hardware allows you to see your application exactly as your users will see it. This is the real environment that reveals application performance and behavior issues.

Again, testing responsive design or multi-device solutions on all devices is a time consuming task. The real pain is in loading a page on every device and following the same steps every time you make any changes in the code. Here, Adobe Edge Inspect and Ghostlab can help. With Adobe Edge Inspect, you can wirelessly pair multiple iOS and Android devices to your computer and sync. Use Ghostlab or web-based service like Browserstack to test how an application looks on different devices and platforms including iOS, Android, and Windows.

We hope that eventually with the formal release of HTML5, all browsers will follow standard guidelines/specifications, thereby reducing some of the challenges and helping to achieve uniform content rendering of RIAs across all browsers.

If you wish to share your experiences and challenges faced while developing your eLearning using HTML5, we would love to hear from you. Please share your views in the comment box below.

The post Top 6 HTML5 Challenges first appeared on The Upside Learning Blog.

In line with Google’s report on our evolving usage patterns of multiple devices, there is a growing demand for responsive eLearning development. Organizations want to create once and deliver everywhere, enabling learners to access content from the device of their choice. In some cases there is even the possibility of allowing learners to continue their learning experience from one device to another as they switch between devices based on different times or contexts. This requirement for responsive eLearning development, however, is not met by any of the popular tools at the moment. Consequently creating responsive eLearning is relatively time consuming and costly.

The solution: FRED – Framework for Responsive eLearning Development. FRED is a framework developed by Upside Learning’s Custom Learning Solutions team to enable faster and more reliable development of responsive eLearning. FRED has been in the making for over 12 months and imbibes our learning from numerous HTML5 and responsive eLearning programs done over the last two years. I believe FRED will deliver the twin advantages of reliability and speed to our clients looking for responsive eLearning solutions.

FRED’s key features are:

1. Multi-device support
2. Multiple delivery options
3. Template library
4. Multimedia support
5. Responsive menu
6. Multi-lingual support
7. Learning standards compliance
8. Accessibility support
9. Social media integration
10. Developer aids

If you’re attending the Learning Technologies show in London later this month or LearnTec in Germany in the first week of February, our team will be more than happy to talk about FRED in more detail at our stalls.

Meanwhile, you can learn more about FRED here – https://www.upsidelearning.com/pressrelease/upside-learning-launches-responsive-elearning-development-framework/

Upcoming Webinar

The post FRED – Responsive eLearning Made Easy first appeared on The Upside Learning Blog.

Let’s begin with evaluating each of these tools on certain parameters/criteria that are important for elearning development.

File Size and Performance

These are decisive factors if you plan to deliver your eLearning on mobile devices. Media elements along with the architecture determine the size and performance of any course. Lectora, Captivate, and Articulate Storyline all have different framework architectures for loading navigation and content.

Articulate Storyline loads the framework files only once and then loads the content page by page. For heavy media and animation, pre-caching facilitates better performance.

Similarly Captivate also loads framework files once and content files page by page. However, unlike articulate storyline it publishes the content as images, thereby increasing the file size and consequently impacting the performance.

Lectora reloads framework files as each new page loads, contributing to heavier file size and additional loading time. Also having the framework reloading for each page can also introduce breaks in the visual flow.

Graphics, Animations & Interactivity

Graphics and Animations

All three tools come with a toolbox that can help create basic shapes. Along with this, they also have built-in animation presets, which help in creating simple animations easily. Captivate has the largest library with over 50 presets; Lectora has 30+ presets; and Storyline has around 10 presets.

Captivate and Storyline also have a timeline feature which makes it easier to create custom animations. Lector does not have a timeline feature.

Interactivity

Captivate and Storyline have larger built-in interactive template libraries (20+ templates) as compared to Lectora.

Captivate’s built-in templates can be customized for text, fonts, and colors; however, their basic functionality cannot be altered. You can also use pluggable interactive widgets developed externally with tools such as Adobe Flash/HTML and then imported into Captivate, which leads to a greater variety of interactivities.

Storyline, apart from some built-in templates, also offers the flexibility to create custom templates; you can even save your Storyline project as a template for future use.

Lectora has a relatively small in-built template library. However, the tool is flexible and can easily accommodate custom interactivities developed using Lectora or externally in HTML and then integrated into Lectora.

Audio and Video Support & Syncing

As Storyline and Captivate have timelines, syncing of audio and video elements is easier. Lectora, however, has no timeline so one has to achieve synching of audio and video elements using cue points, which is comparatively effort intensive.

There are some other facts related to audio and video which should be considered:

• Articulate Storyline and Lectora support embedding YouTube videos whereas Captivate doesn’t.
• You can directly publish your course as video for YouTube using Captivate’s unique ‘YouTube ready’ feature.
• Captivate publishes audio in MP3 format, so if you are targeting the course for Firefox (version

Simulations

All these three tools support simulations.

Storyline and Captivate both have inbuilt screen capturing features and they support Guided and Practice simulation modes.

Lectora does not have an inbuilt feature for simulation. You can capture simulations using external tools like Camtasia/Snagit however this will mean extra costs to acquire those software licenses. Also Camtasia allows for ‘demonstrations’ simulations only and it will not work for any practice simulations you plan to have.

Quiz

Storyline offers a library of around 20 different types of question templates. These include standard assessment templates and surveys. It also offers features such as question pooling, randomization, and the ability to score learner performance at multiple points in a course.

Captivate too comes with a library of question templates along with some additional features such as pre-test and branch-aware quizzing, partial and negative scoring, remediation (i.e. based on the score the learner is directed to the relevant section of the content and then asked to reattempt the quiz).

Lectora has a smaller question template library with multiple response, hot spot, drag and drop, and other question types. The feedback options are customizable and one can include images and videos to engage learners. In Lectora too, as in Captivate, you can direct learners to specific learning units based on their score. Lectora has an added feature for submitting Test and Survey results to a spreadsheet created in Google Drive.

When it comes to customization, Lectora offers very good support for quiz creation. You can have custom interactivities and question templates, as well as define custom variables to track user progress or pass data across templates.

Multilingual CoursesAll three tools make the entire localization process easy with a good ability to import/incorporate translated XMLSs.

Right-to-left languages such as Hebrew, Arabic, and Farsi, are supported in all the three tools. However, note that they’re not currently supported in the player elements of Storyline, such as buttons and sidebar menu.

Mobile Device Support

Output from all three authoring tools run on Tablets. Articulate Storyline publishes output only for I-pads while Lectora and Captivate support I-pads as well as Android tablets and smart phones. Lectora can also publish output for I-phone. However, these three tools are yet to claim compatibility with Windows or Blackberry Tablet/Phones.

It is worth noting that none of these tools are capable of providing responsive/adaptive output. The primary target device is still desktop or tablets. Since the output is in HTML, you can load a scaled version of the output on small devices, however this may impact the user experience.

Offline Viewing

Storyline provides a mobile player for viewing courses offline on iPads. This player also allows you to update and track data from offline usage once you get back online. You just need to ensure that the course is published for Tin Can (and not SCORM/AICC) if you want any offline data tracking. If you are viewing the course in a browser, which necessitates staying online, then publishing for SCORM/AICC works well.

Lectora does not have an offline player and neither does it support packaging and delivery of content output as hybrid application. The only option for viewing material published in Lectora on mobile platforms is through a browser while staying online.

While Captivate does not have an offline player, it allows you to publish the course as an app to multiple mobile platforms including Windows® RT (Metro apps), using the Adobe PhoneGap™ service (requires separate purchase of PhoneGap).

Non-LMS Tracking

If you do not have an LMS but still need tracking, Captivate could be a good option as it allows custom tracking using Adobe Connect or FTP.

With Articulate Storyline or Lectora you will necessarily need an LMS to track user data.

Target EnvironmentTarget environment comprises of the Operating System (Windows/ MAC), Browser configuration, and Devices (Tablets, smart phones). So it is critical to understand your target environment and which tools will support it best. Along with that, it is also necessary to understand the available publish options and evaluate them against the required LMS compliance.

To help you with this, we have created a detailed comparison sheet. Please click the icon to view the same.

ADA Compliance

All three tools support ADA compliance. Lectora scores the best of the lot as it publishes fully ADA accessible courses with a single click. It also uses the 508 Compliance Checker to make sure you meet all accessibility guidelines.

Collaboration

Lectora allows sharing content on popular social media platforms including Facebook^® and Twitter^™ using share buttons and other Lectora objects.

Captivate 7 uses a Twitter widget that helps learners collaborate with other learners in real time by selecting a specific area within a course and tweeting.

Storyline is yet to include any social media features.

To Summarize

Each tool offers a variety of features, depending on your requirements, you would need to identify the best fit. Based on our experience, we have tried to rate each of these tools on the parameters mentioned in this blog.

We hope the above details will be useful in selecting the right tool. If you wish to share your experiences with these tools, please drop a comment below. Also if you need any more details on these authoring tools, use the comments section below.

The post How To Choose An Authoring Tool For Your HTML eLearning Development first appeared on The Upside Learning Blog.