From E to M:
10 Tips for Converting Your PC-Based e-Learning
to Smartphone-Based m-Learning

So your clients are clamoring for m-learning (mobile learning), and you’re considering how to convert e-learning courses that were originally built for use on PCs (personal computers), not smartphones.  How do you go about re-designing your PC-based e-learning courses and make them effective as m-learning modules?  Below I’ve provided some tips, best practices, and design considerations to guide you in this quest.

Note that this post is primarily concerned with designing m-learning for smartphones, such as iPhones and Droids. Though some of the recommendations here are relevant for tablets also, not all are, because tablets have a larger viewing area that, for better or worse, enables us to leverage many of the same design tactics that we utilize for PC-based e-learning.  With smartphones, however, the screen size is small enough that it really changes the user experience dramatically, and therefore requires us to re-conceptualize the design of the course.

You’ve probably heard of Jamie Oliver, the Naked Chef, whose books and TV show aim “…to prove that you don’t need to dress up ingredients or buy a load of fancy gadgets to make something really tasty.”

Likewise, you’ll find that m-learning works best when you strip away a lot of the dressing and gadgets that we’ve used to build PC-based e-learning courses.  The mobile learner wants things fast and simple yet hearty and tasty.  You may find that it takes more work at first to get your m-learning designs to be naked enough for mobile tastes, because you’ll need to shed a lot of previously held assumptions about the way content is organized and interactions are structured.  Once you’ve made the switch, though, maybe you’ll start to apply some of those naked instructional design techniques to other types of courses.

Tip #1. From horizontal to vertical orientation

The most obvious difference between smartphones and PCs as it relates to delivering m-learning is the screen size.  The narrow width of a typical smartphone doesn’t allow much room for text and graphics to co-exist.  With PC-based e-learning, screens are often organized into multiple columns—text on the left side and a graphic element on the right, or perhaps four items listed on the left that need to be matched with four items on the right.  With smartphones, you can’t really think in terms of multiple columns.  Though it’s possible to create columns, there’s just not much room to get cute.  Learners will resent it if you make them scroll to the right to see a graphic or to match an item from the left column.

Instead, we need to think vertically about how we lay out our content.  Text on top with a graphic underneath.  A click-reveal activity that instead of opening up content on the right side does so underneath, like a collapsible tree structure.  Space-intensive exercises like matching ones will need to be re-imagined as a series of multiple-choice questions or something else that can be displayed in a north-south fashion.

 

Tip #2. From all-at-once to parsed out

Another way to address the space issue is to reveal elements one at a time, rather than trying to display multiple elements at once.  Take the example below.  This PC-based dart game, BalloonFest, has essentially two columns—the question on the left is displayed at the same time as the responses on the right.  If we were converting this to mobile, one option would be to display the question, allow the learner a certain amount of time or ask the learner to tap “Go!” when ready to answer, then replace the question with the balloons/options.  That adds a little difficulty for the learner, because he/she will need to remember the question after it disappears.  Another option would be to keep the question displayed in the background, perhaps in a faded color, so that it’s not completely gone.  Similarly, the score displayed on the left side could be an element that is revealed after each question, if you did not want to eat up screen real estate with it.

 

Tip #3. From always there to only-when-needed

With PC-based e-learning, designers usually respect the learner’s need for permanence.  If a button is used throughout a course, then it should always be there.  It shouldn’t disappear on some screens, then come back for others.  That was the general rule.  With mobile apps, that rule is frequently violated.  Check out this Solitaire game, for example.  The “Winning” button only appears when the hand dealt is definitely a win-able hand, rather than a random hand that could or could not be win-able.  Also, as I’m playing, I’m able to minimize the buttons, so they’re out of the way.  I can just tap the bottom and the buttons pop back up.  With PC-based e-learning, we rarely do that sort of thing, but smartphone users are accustomed to that sort of interactivity, so we might as well leverage it to help us manage our limited screen space.  So for any given interaction that you’re designing, consider what buttons and information the user needs displayed and what can be moved out of the way until needed.  At any given time, display only the minimum amount needed for the learner to accomplish the next task.

 

Tip #4. From help screen to intuition and dialog

With PC-based e-learning, it’s not unusual to start with a brief tutorial teaching learners how to navigate through the course and utilize the various features and functions.  Personally, I’ve always disliked that about PC courses.  If the course is intuitively designed, then learners should have no need for a tutorial or even a Help button.

If learners do need help while they’re in the course, it’s because there’s a problem somewhere, and a tutorial is not likely to provide much assistance.  The mobile community seems to agree with me on that, because I hardly ever see tutorials for apps.  Instead, app makers enable users to email them, chat, or post comments in a blog, where they house answers to frequently asked questions.  A two-way format like a blog enables developers to respond to ongoing issues, such as new bugs that come up, compatibility issues created by updates to the operating system, hardware compatibility, and recurring user errors, which can inform future design upgrades.  Having more of a dialog with mobile users, rather than the 1-way communication of a tutorial or help screen, is much better for both the consumers and the producers of m-learning.  By the way, it’s not too late to do the same thing with PC-based e-learning, but the move towards m-learning gives us an excuse to smarten up how we do things.

If you feel compelled to provide a tutorial—ya just gotta do it—consider posting it on YouTube or a similar social media site.  DominKnow, maker of the Claro authoring system, utilizes this smart approach to provide training videos, which complements the broader knowledge base DominKnow has set up to support its users.  With this approach, if you need to change the tutorial to address a frequently asked question or a recurring problem, you can update the video and re-post it without needing to republish all of your m-learning modules.  A “?” link in each module can launch the video.

Tip #5. From books to learning objects

With PC-based e-learning, we often see courses organized into modules, lessons, and pages or chapters, sections, and pages (Lectora terminology).  Within each lesson or section, it’s not unusual to see 10 to 20 pages of content, roughly equivalent to 10-20 minutes of seat time.  If you can visualize the tree structure of the course, PC-based courses are typically short and fat.  That is, they don’t contain a lot of lessons, but each lesson contains a lot of pages.  With m-learning, I recommend a tall and lean tree structure, one which has many small lessons containing 1-5 screens.  This will be easier for mobile users to navigate without feeling disconnected from the broader content structure.  Also, because mobile users tend to experience content in small 1-5 minute chunks of time—in between meetings, during a break, waiting at the doctor’s office, etc.—and they’re often multi-tasking, it is best to design content for them in very small chunks, or what we sometimes call learning objects.

A learning object is the equivalent of a sentence in literary terms—whereas a sentence expresses a complete thought, so a learning object accomplishes a complete learning objective.  A learning object might contain a brief introduction to the skill that establishes relevance, an explanation of the skill, an example of it, and then an opportunity to practice until mastered.  That could be done in a single screen or in a few screens, but it shouldn’t be a 10-20 screen affair.  If it is, probably the lesson is too large and contains multiple learning objectives, which need to be broken apart.  You string together a series of sentences to form a paragraph around a particular thesis; and likewise, a series of learning objects can be strung together to accomplish a broader learning objective.  Mastering the ability to think small in terms of content chunking will become an increasingly important skill set for instructional designers who work with m-learning.

As an example, consider this Articulate e-learning module, called Building Performance, in which we are teaching the performance analysis process.  The module contains 21 screens.  For mobile learners, that’s going to be a lot to process, and it’s unlikely that they’ll have 21 minutes to do it in one sitting, which means they’re learning experience will be disjointed and their retention of the information is likely to suffer.

I can help by breaking that module down into several smaller chunks, perhaps one learning object for each of the steps in the process, one to introduce it, and one to synthesize all of the steps into a review activity/game of some sort.  That enables the mobile user to bite off one small learning object, then come back later for another, then another.

A secondary benefit of this more granular chunking of content is that it makes the module easier for learners to re-use later as a reference guide.  They’ll be able to look up information and access it more quickly in a tall/lean content structure than they will in a short/fat structure.

 

Tip #6. From mouse clicks to finger tapping

Though regular phones have varying types of interfaces, today’s smartphones are typically equipped with touch screen technology.  PC-based e-learning is typically driven by mouse clicks.  We click Next to continue; we click and drag this box to that location; and we occasionally double-click or right-click to make things happen.  When deploying to smartphones, you’ll need to convert all of those mouse click actions to touch screen actions such as tap, tap and drag, double-tap, tap and hold.

Two things to keep in mind when you’re converting is that (1) finger taps are less precise than mouse clicks (especially for people like me who have pudgy fingers—don’t laugh!), so the button or hotspot will need to be larger and more clearly defined than it would for a PC-based course and (2) you have less room on the screen for large buttons and hotspots.  That’s a bit of a conundrum.  On the one hand, we need to make the clickable area larger, yet on the other hand, we have less room for large things.

To address this, we have a few options.

1. If an interaction requires a learner to make a choice, app developers will typically use up the whole screen to display the options.  The learner may need to toggle back to the original question, but using the whole screen maximizes the size of the buttons.

2. A second approach is the form.  A form is a series of drop-downs, sliders, toggles, fill-ins, etc. that reside on one typically-scrollable page.  This would be good for diagnostic surveys, user information, and satisfaction surveys.  You might be able to use them for exercises too, but keep in mind that the scrolling window may make the feedback portion of the exercise cumbersome.

3. A third way is the check list.  Those can also scroll and tend to be better for data collection than for exercises and quizzes.

4. A fourth way is to use motion.  By motion, I mean asking the learner to select from moving targets.  In the dart game, for example, the options are sitting inside of balloons and are floating upward.  This enables you to economize on space by staggering items, rather than having them vertically or horizontally aligned, which takes up more space.  The balloons are large enough that even I could tap them.  Instead of moving up, as the balloons are doing, you could create a downward movement as in Tetris or a horizontal movement as in the Sub Hunt game (captures shown below for your poor souls who’ve never had the pleasure of playing these games).

5. A fifth way is to leverage collapsible structures.  A learner can tap a “+” symbol to expand a content element, then click a “-“ symbol to collapse it again.  A variation of this involves the learner tapping and holding to make the object movable, so the learner could tap, hold, then drag the item to a different location.  In this way, you can re-design a variety of PC-based click and drag interactions, including matching exercises and mapping exercises.

Re-creating interactivity is probably the task that will take you the most time and effort when converting from PC-based e-learning to smartphone m-learning.  Be sure to budget enough time, so that you can think creatively about how to accomplish the same learning outcomes with less screen size but larger clickable areas.  My recommendation is to take inspiration from the leading mobile app makers, who have blazed the trail and learned some hard-won lessons in what works and doesn’t.  If you can invent a new form of interaction, that’s great, but start with what’s already commonly used and build upon it, so that your learners aren’t being asked to think too much about how to interact with your course.

 

Tip #7. From eye candy to info-graphics

Because you don’t have much space on-screen, you need to be picky about what graphics you choose to use.  Mobile users generally prefer not to have many graphics unless those graphics are important and content-relevant.  This is challenging for many e-learning designers and developers, because they’ve grown accustomed to loading up their otherwise dull PC-based e-learning courses with lots of eye candy—graphics that are there purely for aesthetic and emotional value.  Does that mean we shouldn’t use graphics in m-learning courses?  No, but it does mean we need to be more thoughtful about our choices.

By important, I mean that the learner can’t achieve the learning outcome without the graphic.  For example, if I’m trying to teach doctors how to read clinical trial results, which are often communicated through charts and graphics, then of course using images of charts and graphs in the training will be important.  Could the doctors learn to interpret clinical trial results without ever seeing a graph or chart in the course?  Possibly, but probably not.

By content-relevant, I mean that the graphics are directly related to the content being conveyed in the course.  The graphic complements the text and other media.  It does some or most of the heavy lifting in terms of conveying content-relevant information.  A well-designed graphic tells a thousand words, which means the learner doesn’t need to read quite so much.

When your content graphics are both important and content-relevant, mobile learners will appreciate seeing them in the course.  When they’re not carrying information and are not important, your mobile learners will get turned off by the graphics and tune them out.

 

Tip #8. From “Are you sure…?” to “Let’s make sure….”

In PC-based e-learning courses, we often like to double-check everything with the learner.  If they select an answer, we ask: “Are you sure?”  If they click Exit, we ask: “Are you sure you want to exit?”  These are niceties, which can be helpful in a PC environment.  With PCs, we are sometimes dealing with technophobes and neophytes, people who are unsure and maybe even a little scared of their computers.  By prompting them and checking with them, we are giving them a sense of control and are hopefully making them more comfortable with the process.  In a mobile world, there’s no time for such niceties.  The learner is mobile, nomadic, multi-tasking, caffeine-fueled, and constantly on the go.  The mobile user doesn’t want to be interrupted all the time with questions.  Transaction speed, not just download speed, is critical.

To ensure transaction speed, we need to remove a lot of the niceties that we put in for PC users and instead anticipate any stumbling blocks that may occur.  For example, one of the reasons we prompt PC users with the “Are you sure you want to exit?” message is that they can accidentally click it and potentially lose all of their data.  Let’s make sure that when the learner clicks Exit, we save all of their data and only prompt them if there is something wrong in the process, such as a lack of Internet connection preventing the data upload.  Otherwise, just let them exit and move on to the next 20 things they need to do in the next 10 minutes.

 

Tip #9. From loud and proud to “Shhh, you’re in the quiet car!”

PC-based e-learning designers have gotten spoiled over the years by being able to do a variety of things with audio narration, such as sync narration with timed events; sweeten narration with music and sound effects; split audio files to be played with click-to-reveal interactions.  These techniques are often used in conjunction with screen text, graphics, and animations to enrich the user experience.  A cynic might also say that audio is used to cover up poorly written text.  When a course contains too much content—which probably describes most e-learning courses—audio narration helps the medicine go down a bit more smoothly.

For a variety of technical reasons, you may not be able to use audio in the same way for your m-learning course, though that will continue to improve over time as the HTML5 stack of technologies improves.  More importantly, even once we overcome the technical constraints, mobile learners may be less likely to want audio in their courses than PC-based ones.  Why? Mobile learners are often completing training courses during downtime, frequently while they are on the road.  Imagine that if you’re in an airport completing a course, or on a train, you’ll not want audio blaring from your smartphone.  Some might use headphones, but many will not.  With that in mind, m-learning designers should perhaps design their courses such that they do not rely on audio.  No doubt there will be exceptions, so please don’t take that as a hard and fast rule, but generally speaking, m-learning courses that rely on audio are going to run into challenges when learners are on the road.  Low-impact audio, such as sound effects and background music, can easily be turned off without dramatically undermining the user experience.

 

Tip #10. As Bill O’Reilly likes to say: “Keep it pithy!”

It may be obvious, but it needs to be said anyway.  Please, pretty please with Splenda on top, tighten up your writing.  After writing this, I went back and removed 6 pleases from the previous sentence, so I wouldn’t seem like a hypocrite.  See, I’m trying to be pithy, Bill!

With less screen space, less audio narration, and smaller graphics, there’s likely going to be a lot more reading going on in m-learning modules.  PC learners hate reading a lot of on-screen content—imagine how mobile learners feel after a few minutes of staring at their tiny smartphone screens .  After you write your storyboard, giving brevity your best shot, have someone read it with the mission of reducing the word count by 30%.  Then have someone else review it and take another 20%.  Trust me, it may still not be enough, but it’s a good start.

Brevity is only half the battle.  The other half is style.  Keep it lively, conversational, punchy, and of course written in the active voice.  Grammar is still important, but certain rules can bend in the name of better learning.  Don’t skimp on the examples, though, as that’s where the learning happens.  Cut from the explanations, tangents, clarifications, and all the other non-essential information designers and SMEs like to include in their courses.  Make every word count, and your mobile learners will thank you…very quickly of course, because they need to move on to the other 19 to-dos.

————o0o————

So there you have it.  Now you’re ready to go rustle up some m-learning for your internal clients, leveraging your huge stockpile of PC-based e-learning courses.  May all of your designs be as naked as Jamie Oliver’s.  As you gain experience with m-learning conversions and pick up new tips, please come back and post them here.  Meanwhile, I hope you locals have registered to attend the Philly ASTD Leading Edge Conference, where we’ll be getting down and dirty with mobile learning design tactics.

In future posts, I’ll discuss how we might approach things differently if we weren’t just converting an e-learning course and truly had carte blanche to design a high-impact mobile learning experience from scratch.

Gus Prestera, PhD
GLAPIE and proud!

 

PS – I apologize for making another Top Ten List.  I really was shooting for 5, but I got on a roll. Will try harder next time!