Robin Williams once said about his acting career, “...there is still a lot to learn and there is always great stuff out there. Even mistakes can be wonderful.” Mistakes can indeed be wonderful. Our adventures into designing mobile learning are fraught with them, particularly when we try to squeeze our eLearning modules onto a smartphone. In this article I’m hoping to pass on what I’ve learned from some wonderful mistakes: how to best adapt your existing eLearning for mobile.
In a previous article, Ten Tips: Distilling Existing Content for Mobile, I gave some brief recommendations on how to repurpose existing eLearning content. Here I’m digging a little deeper into the subject and providing more detailed guidance on how to adapt eLearning content for use on smartphones.
For many companies such a project is their first small step in providing learning content for mobile (mLearning). Once again my recommendation is to resist this approach if you can. Pushing content that was designed for a desktop or laptop onto a small screen is not the best way to go about learning design. Use cases for accessing learning content on a mobile device are very different than those for eLearning on a desktop. (See Right Time and Place: mLearning Use Cases.)
Conversion considerations
I divide “mobile” into two categories, “phone mobile” and “tablet mobile.” When I speak of mobile devices in this article I’m primarily talking about smartphones, not tablets. Designing learning content for a tablet has more in common with laptop or desktop eLearning than with smartphones (Figure 1 is how I see it). These guidelines are for “phone mobile” devices—those with a small screen that you typically carry with you everywhere.
Figure 1:
Content similarities between devices
There are several ways you can adapt your existing eLearning content for mobile—from making a few small adjustments to completely redesigning it. Being able to view eLearning content on a smartphone doesn’t make it mLearning in just the same way that throwing slides meant for use in instructor-led training (ILT) onto a web page doesn’t make them eLearning. Redesign is always the best option.
Here are some levels of adaptation to consider—depending on the format of the current content, on the time and resources available, and on your learning objectives. This list starts from the rudimentary “low-grade” mLearning to the more appropriately designed mLearning. If your goal is to have the eLearning content “accessible on smartphones” then the first few will suffice. If your goal is to create effective mLearning, then consider those further down the list.
Levels of adaptation of eLearning for mobile
- Replicate the existing content as is and have it be accessible on a smartphone.
- Duplicate existing content and have it be viewable on a mobile device using responsive or adaptive design techniques.
- Adapt the textual content for mobile, keeping the existing graphics.
- Adapt both the textual content and the graphics for mobile.
- Convert content to a video or videos.
- Incorporate the content into a quiz or knowledge check.
- Completely redesign the content for mobile.
- Create supplementary or supportive mobile content for the existing eLearning content.
- Create a learning game from the content.
Adapting Flash-based eLearning
Often eLearning is in the form of Flash, which cannot be targeted to some mobile devices such as the iPhone. There are tools that can republish Flash source files as HTML5 or record Flash content as an MP4 video—however the problem remains that you are still left with content designed for the desktop but simply view it on a small screen.
Another option, if the interactions and animations are few, is to take screen shots of the graphic content and provide a sequence of relevant images along with text or narration.
Rather than attempt to replicate the exact format of the Flash eLearning on a smartphone it is better to locate the original text, graphic, and video source files and adapt them for mobile. Text can be rewritten, graphics adapted, and videos edited so that they are mobile friendly. This takes longer but can be much more effective.
Rapid eLearning tools content
You may have eLearning that was created in Articulate Storyline, Articulate Presenter, Adobe Presenter, or other PowerPoint-to-Flash tools that has narration and a sidebar of contents. If your text and graphics are large enough you can record just the content area of the screen along with narration. With this recording you can create a series of short MP4 videos of the whole module with narration. This is not the ideal solution—it’s eLearning on a small screen—but I have found this to be very useful when you need to access a large amount of Flash eLearning content on a smartphone.
If you have all the original source files for your content it is now possible in most eLearning tools to publish to HTML5 and view it in a smartphone browser. You can remove any navigation sidebar and so get a larger image on the mobile screen. Better still, adapt the source files for mobile by adjusting text and graphics as I outline below and you’ll get much closer to an optimal experience.
Text considerations
The amount of textual content per screen in eLearning is generally too much for mobile. You need to reduce it. This will mean paring down the text to the absolute essentials and breaking it up into multiple screens. Do what you can to remove or simplify any introductory paragraphs or discussion. Cut to the chase—users will want to read and understand the information on one screen within about 10 to 20 seconds.
Text should be easily readable on a mobile device without the need for zooming (Figure 2). Use sans serif fonts—they look cleaner and are easier to read on mobile devices. Helvetica and Myriad font types are two of my favorites for mobile. You may also want to consider increasing the line spacing so that the text looks a little less dense.
Figure 2: Text size too
small (left) and about optimal (right)
People are more inclined to quickly scan mobile content rather than carefully read paragraphs, so keep your explanations and guidance clear, concise, and try to write in everyday vernacular. Consider using bullet points, bolding, or highlighting to bring attention to important words or phrases.
A great way to determine the best text size and font style for your mobile content is to play with some of your favorite apps, particularly news, magazine, or learning apps and see what fonts and text designs appeal to you. It will also give you some great ideas and insights for utilizing text in your mLearning content.
Graphics
eLearning graphics are intended for desktop or laptop use. They generally don’t view well on a small smartphone screen. Avoid the temptation to reuse these graphics unless they are easily readable on your target mobile devices without zooming.
Redesign your diagrams and graphics for mobile use (Figure 3). If you have the source files then this can be much quicker than recreating them from scratch. In some cases this may be as simple as increasing the size of the text on labels—in other cases it may mean redesigning and simplifying the graphic or breaking it into multiple graphics. You can get an idea of what will and will not work by creating a portrait screen size of the mobile aspect ratio, adding your graphics, and then emailing it to yourself so you can view it on the mobile device.
Figure 3: Desktop
graphic used for mobile (left) and mobile-friendly graphic (right)
You should design graphics so they can be quickly understood, so that the information they contain is uncomplicated and can be quickly absorbed. Remember, your users probably won’t be sitting still when they read your content and may only be accessing it in sessions of a few minutes. Any graphic that is detailed and needs careful study is probably not going to work for mobile.
Graphics that are designed for eLearning are often in landscape orientation (Figure 4) as viewed on a desktop. The mobile user will probably be holding the device in a portrait orientation, so keep this in mind when you design or recreate graphics (Figure 5). Avoid requiring the user to turn the phone sideways to view content or a diagram because this entails using two hands and is poor usability design.
Figure 4: Desktop
eLearning module layout
(Image
from module by eLearner Engaged)
Figure 5: Possible
mobile layout
Conceptual deconstruction
As learning on a mobile device does not lend itself to studying detailed graphics or highly conceptual information, you must deconstruct such content for mobile. In your eLearning you may have a detailed diagram on one screen, where each element is discussed in detail via narration and animation. The equivalent for mobile use must be distilled into simpler component elements that can be explained relatively quickly—and the whole built up from these components.
For example, you may have an eLearning screen that shows the whole of the ADDIE process with descriptions for each phase (Figure 6). For mobile you need to break this down into multiple elements and discuss each phase separately. You might show a high-level diagram naming each of the phases and then have subsequent screens detailing each phase in detail (Figure 7).
Figure 6: ADDIE graphic
from eLearning module (Editor's note: Readers viewing this article on smartphones may wish to rotate their devices to landscape orientation to easily read this figure.)
Figure 7: ADDIE graphic
redesigned for mobile
Navigation
eLearning content often has a lot of complex navigation and interactions. Keep these to a minimum on a mobile device where screen real estate is limited and viewing time is short.
Try not to replicate in your mobile version the same navigation you have in your eLearning module. Desktop navigation elements are targeted with a mouse pointer—mobile content on most smartphones is targeted with a finger or thumb. Target tap areas need to be much bigger. On a small screen you also need to think about movement of the thumb so place navigation elements within easy thumb stretch (Figure 8). For instance, placing a Next button top right would be poor design on most smartphones.
Figure 8: Thumb stretch
on an iPhone 5
Design your navigation to be intuitive. Users shouldn’t need to think about how to navigate or move from screen to screen—it should be obvious, and whenever possible it should reflect the standard navigation gestures of the operating system of the target device. If it’s an iPhone keep it consistent with typical iOS navigation—if it’s a Samsung device keep it consistent with typical Android navigation.
If you have the UI development resources, then adding “hidden navigation” that only appears when you tap the screen is the way to go. This gives you the maximum area for your learning content—which is very desirable on smaller smartphone screens (Figure 9). As a general rule try to minimize the UI navigation “chrome” that surrounds your content. Giving the user access to navigation only when they need it is good design.
Figure 9: Content view
(left), and navigation appearing after a screen tap (right)
Narration and video
Narrated eLearning modules work well at the office with headphones or at home with speakers. The user is usually sitting down and typically has at least 15 minutes or so to spare. Not so with a smartphone. The user may be walking, at a bus stop, in line at the supermarket, or grabbing a coffee at the local cafe. Narrated mLearning needs earphones or headphones and you need to think about the convenience and practicality of this for the user. Would your target audience have these available at times when you expect them to be using your content? You might have some great videos from your eLearning modules but would they work in the mobile context?
For this reason it is often better to have textual content than narration in mobile content. You can open and read more information in thirty seconds from textual content than you can by having to find and plug in headphones to listen to narration. Although narrated video may seem more attractive to the user, it can be much less convenient or effective in many mobile contexts. If you want to salvage any videos you already have in your eLearning, then consider creating videos with the option of turning captions on and off.
Keep your videos short—in order to keep attention and account for connection speeds. If your users are not in a wireless zone and are connecting via the cellular network then they‘ll get slow streaming or problematic downloads which will detract from the mobile experience.
Consider alternatives
Rather than quickly jumping to adapt your eLearning modules for mobile, think of ways you can supplement the eLearning you have rather than trying to duplicate it on a small screen. Having eLearning on the desktop and something different on mobile to support that eLearning is more powerful than duplication of content.
Here are some examples of supportive or supplementary mobile content you might consider creating.
Knowledge checks
Create short quizzes that are sent to a user’s mobile device after they complete an eLearning module. These can be used to help review and solidify the eLearning content.
Job aids
Create mobile job aids or mobile performance-support tools to help users apply what they covered in the eLearning modules. Something they can use on the job at work.
Games
There’s nothing better than playing a game on your smartphone to learn or review content. Check out some of the do-it-yourself mobile-game templates available on the internet.
Reminders
Send messages to users’ smartphones reminding them of which modules they have completed and which they need to start. These reminders can include quick reviews.
Evaluations
Use mobile to evaluate an eLearning module a day after its completion. Mobile evaluations on average have a higher completion rate than desktop based evaluations.
Spaced Learning
Use mobile to review the eLearning content at spaced intervals after its completion. Spaced learning is a highly effective way of improving recall.
Prototype first, then make your decision
Always prototype your ideas before deciding on a specific solution. What seems like a great idea on paper may look and feel very different when implemented on a small mobile screen. For text and graphic layouts I often create PDF mockups of potential designs, email them to myself, and view them on some of the target mobile devices. I also recommend creating mockups with wire-framing tools such as Fluid UI or Proto.io which provide design and navigation elements for Android, iOS, and Windows phones. These are great for building interactive working prototypes.
Play around with your prototypes, try out different ideas and designs, improvise, and don’t be afraid to make mistakes—lots of them. In my experience they’ll probably end up being wonderful ones.