Creating Mobile Learning
kineo
Scoping and scheduling your mobile
learning project
Step 1:
03
Producing the overall design of your mobile
learning module
Step 2:
05
Prototyping your mobile learning module
Step 3:
07
Scripting your mobile learning module
Step 4:
10
Building your mobile learning module
Step 5:
13
Testing your mobile learning module
Step 6:
15
Delivering your mobile learning module
Step 7:
16
Creating Mobile Learning
7 key steps to designing and developing
effective mobile learning
Introduction
You’ve made the right decision on where you’re going to use mobile learning (see our guide on Designing Mobile Learning). You’ve worked out what kind of mobile learning technologies you can use (see our guide on Implementing Mobile Learning). So, now, how do you go about doing it?
What are the steps you should follow?
Well , the first key message is that just because it is a new kind of medium (and a sexy new one in many people’s eyes), you
don’t throw away all those proven design and developing processes for e-learning that you’ve honed over the years.
You still have to do a needs analysis. You still need to define your learning outcomes. You still have to scope your project. And
yes, you still need those detailed scripts.
But it is a new medium with so many different ways in which learners interact with the screen and use touch to navigate through the content. With the range of types of mobile delivery (as covered in the Implementing Mobile Learning guide), there
are very different development paths you can take. And this means you will need to rethink some aspects of your existing
production processes and re-engineer them for mobile learning.
Analysis
&
Scoping
Prototype
Walkthrough
Design
Prototype
Approved
Scripting
Graphic
Creation
HTML4
Coding
Add
HTML5
Tags
Tech
Spec
Introduction
So, this paper looks at the overall mobile learning design and development process. It should be helpful for those of you new to e-learning and for those who know their e-learning but have limited experience of the mobile learning world.
Example Project
We’ll use a mobile learning project for one of our clients as an example
throughout this guide.
It’s a typical mobile learning app; an introduction to the organisation delivered
on the usual wide range of devices that your average corporate has to cater
for (e.g. tablets, smartphones and, by the way, it also has to work on the
desktop....).
It passes the test for why it is mobile learning (see
Designing Mobile Learning
for
more on this). This is because it is aimed at reaching new employees before they
join, and the best way to do that is offer it on the things they use every day, their
mobile devices like iPads and iPhones.
?
? ?
?
??
Creating Mobile Learning
– the key steps you need to follow
1. Scoping and scheduling your mobile learning project
Treat all mobile projects just like standard e-learning ones. So, you should always start by confirming the learning need and mapping out the length of learner experience. Mobile learning tends to be a lot shorter than desktop based learning
experiences.
Also, find out where the learning is likely to be done. If it is genuinely on the move then it may be best to have short 5-10 minute modules.
Do they need to be tracked online whilst the learner is doing them? If so, the modules may need to be short and
sharp as connectivity can be tough when travelling. If they do not need to be tracked or can be completed offline with data passed through when you next get that signal, the modules can be longer and more in-depth exploration of content can be
encouraged.
You need to gather all the learning content and start to map out each screen at a high level following the initial design approach which you feel is likely to be right for the content and target audience. It’s best to do this scoping exercise with
the subject matter experts (SMEs). We often do this in design workshops, getting them to create and move around sticky notes (representing each screen) until both interactive designer and SME are happy with the overall scope and structure of
the learning experience.
You have to bear in mind, of course, the limitations of some delivery platforms. If you have to deliver on a wide range of them (including perhaps laptops and desktops as well) you have to make compromises here and there if you want to avoid creating multiple versions of the same content.
On the basis of the scope and general approach, you then need to budget and schedule the whole project.
So what are the outputs at this stage?
•
A needs analysis with SMART learning outcomes/objectives•
Technical requirements for the programme with agreed delivery devices and software technologies•
Key messages and content to be included in the module•
Agreement on module structure and length (in screens or minutes)•
Agreement on budget and schedule?
? ?
1. Scoping and scheduling your mobile learning project
Example Project
The content was straightforward in this case. It was agreed that the mobile
learning modules would focus on core information on the organisation and
its values. The aim was to give a really good idea of the company before
learners have their first day.
In this case, technically it was less straightforward. The learning had to work
on a Windows Desktop platform (with browsers from IE6 upwards which don’t
support HTML5) and mobile devices (running mobile browsers that don’t support
Flash). Bearing this in mind, we decided to use HTML4 code (so this worked on
all platforms: mobile and desktop) with HTML5 tags to allow video on the mobile
devices and a Flash fallback for video on the desktops.
As it was the first sight of the new organisation as an employee, our client wanted
it to look great and be highly engaging. We were going to need to make the
graphics and transitions as slick as possible. So no pressure there...
2. Producing the overall design of your
mobile learning module
With all creative processes that involve team work and projects which have approval gates, there is a need to document
your ideas in a way that stakeholders and team members can review and comment and use as the blueprint for their development work. It is no different for mobile learning. At the simplest level, mobile learning screens will follow templates (presentation screens, question screens, video screens).
Even if you produce a highly interactive functionality like this spin wheel on a product knowledge app we recently produced, it has to be clearly documented for the developers to know exactly what the designer wants it to do.
We did this through mock up screen graphics and detailed specifications for each function.
These need to be clearly documented at this stage because you will need early agreement that the ideas are worth pursuing. From now on, the budget clock is ticking, starting with prototyping the ideas (which will be based on what you specify at this stage).
The success of your mobile learning is hugely dependent on the quality and clarity of your graphic presentation. It is not
just about getting the navigation to be intuitive, it is also about making an impact, making learners get more engaged,
keen to see more and explore every part of the learning.
The look and feel (the art direction) should be done during this initial design phase as it will be related directly to the
overall design approach you take. It will also determine how much text you might seek to put on a typical screen, so a
selection of the main screen types should be developed and approved before scripts are written and any prototype is produced.
It’s always a good idea to get your client to review a selection of apps (by just browsing the iTunes store for example) or
show any examples of mobile programmes you have previously produced - or ones that others have produced.. Get them to choose the three they most like and the three they most dislike.
Once you have an idea of the approaches that seem to be your stakeholder’s preferred ones, then you can produce
initial screens (normally a menu, presentation screen, a question and a media screen). You will no doubt have some iterations before your stakeholders are happy with the look and feel, but when they do give their approval you are ready
to build some active example screens as a prototype.
2. Producing the overall design of your
mobile learning module
So, the deliverables you should look to be producing at this stage are:
•
Design document with section structure and design ideas with a high-level scoping potentially down to the level of individual screens•
Design mock-ups ready for any prototyping and informing the script templates that you will be usingOur Example Project
The design of our featured new starter mobile learning project was based around
a scrolling menu which led to topics that learners could explore. With the different
platforms, we needed to have a nice clean and open design so the same images
and text could appear on smaller smart phone screens and full size desktop
screens with equal ease and still look good.
The single version of the course automatically optimises its layout and the media
available, dependent on the device it’s viewed on. Some of the benefits of this
approach were:
•
Reduced cost - reducing the number of builds we need to produce and testing time.
•
Less maintenance - we only have two versions to maintain with this approach, rather
than four – Flash, low bandwidth, accessible and mobile).
We decided to add a bandwidth sniffer which detects the size of the individual
connection and directs the learner to either the full Flash version or the low bandwidth
optimised version.
The course functionality, look and feel were identical, across-platform, with the key
differences being:
•
On mobile and tablet, touch screen and gestures can be used. On desktop, the course
was navigable via the mouse, and keyboard tabbing.
•
Due to bandwidth constraints, on the desktop version there was no audio or video, with
transcripts being displayed instead.
3. Prototyping your mobile learning module
This is a useful step for trying out the best development options and testing whether your initial design ideas are going to work.
Mobile learning lends itself well to an iterative model of design as it really helps to see whether users find navigation intuitive. This means that you need to find ways of developing content quickly and then making amendments along
the way.
One approach could be using the tools that are beginning to come on to the market (which can output to Native Apps
and HTML5). There are a few jockeying for position including old favourites like Lectora (now HTML is back in vogue!),
Articulate’s storyline and tools for quickly converting simple content like Brainshark.
DreamWeaver is definitely your tool of choice for using templates or building more custom solutions
in HTML5. Though you could if you have the skills have even more control over things by coding it by
hand, you will also want to consider leveraging the various coding frameworks that specifically target
mobile functionality such as JQueryTouch and Sencha.
Sometimes you will want to use the same programme over different operating systems (like iOS and Windows).You can use something like Modernizr to detect whether the browser the content’s on supports HTML5 features (such audio/video) and fall back to an alternative if not. For audio/video, on a Windows environment (on your desktop or non-iOS mobile version) use Flash. For other features of
HTML5/CSS3, there are generally techniques (known as ‘Polyfills’) for making these work in
older browsers.
Another approach is to go down a HTML template route. Here are some HTML templates that we set
up for one smartphone-based project.
In the prototype, we showed each screen operating and proved that they all worked perfectly on all of the devices out there with the target audience. It is really useful prototyping templates before scripts are written as you can see how many words per screen you can use on screen for each template. If your designers are
in fact subject matter experts it is really useful for them to see it all working before they start on scripts. They
3. Prototyping your mobile learning module
If you are building for just iOS you could work in Objective-C (‘native code’); if you are building for Android or Blackberry only you could work in Java (also ‘native code’). Equally you could use a framework like Titanium, Flash or PhoneGap. It would depend partly on what you wanted to achieve in the app and what coding resource you have available. (Titanium and PhoneGap require JavaScript, Flash supports ActionScript). It also depends on what devices you want to support. (Titanium and Flash supports iOS/Android, PhoneGap supports those plus quite a few more, with BlackBerry being the key one).
If you are looking for a Native App you could also use Flash to build your learning module but use AdobeAir to produce an output that is in Native App format.
Here’s an example of this for a Product Knowledge module which has complex
touch screen functionality allowing the user to select by hand a price range for products prior to getting a recommendation; this can be done with a native app approach.
For devices that can’t run Flash, some sort of tool for creating animations will be important. There are not many great tools out there yet but one or two stand out: especially Hype which is Mac-only and for Windows( and Mac) there’s
MotionComposer and SenchaAnimator. Adobe’s Edge is also worth looking out for.
Finally, there are also various tools that let you convert Flash animations into HTML5 such as Swiffy from Google and Wallaby by Adobe. The downside of the converters is that, because HTML5 doesn’t support all the features of Flash,
bits can get left out in conversion. Using a tool specifically tailored for creating
HTML5 animations means that you can only build in features that are actually supported by the technology.
With any of these animation tools, it’s important to check which browsers their output supports as this is one of the areas where each browser manufacturer has gone down their own route - making something that runs consistently across all
the modern browsers difficult to achieve.
You could be forgiven for being put off by such a huge selection of options. We’ve listed quite a few of them to show
that there are indeed many ways of developing mobile learning solutions. The majority of the mobile content we produce though tends to be HTML5 and we tend to concentrate on just a few approaches (often using templates) which meet the vast majority of requirements. Once in a while you need something that really uses the native functionality but for
3. Prototyping your mobile learning module
It is at this prototyping stage that you can try out different tools and coding approaches. It does not take long to create 3-4 screens and you can then show your stakeholders what is possible and sometimes what is not possible.
The prototype must have a clear sign-off point - you can keep on iterating for some time but normally you need to move
on as soon as you can, to the next stages of design and development. There will inevitably be some additional tweaks to
the technology once you have a full script to work to, but essentially you need to have broadly agreed the approach you
will take or you will add significant risks of budget and time overruns.
Our Example Project
We produced an online demo to show the way in which we could stretch the screen
from smartphone size to full screen desktop. All of the menus and presentation
templates and questions were produced for this short demo. The text was the
standard Lorem ipsum etc. as we were simply checking what the art direction
looked like in the different formats.
The client liked what they saw and this gave the green light to go ahead and start on
the detailed scripts - the next phase in the mobile learning design and development
process. So we will look at that next.
4. Scripting your mobile learning module
The script is your blueprint for the whole of the learning module. It has to detail:
•
Screen names and numbers (so all your images and screen elements are efficiently named themselves)•
All the onscreen text, audio and text (and video)•
The types of interactionsIt is this last element that is more challenging in the mobile space than the more traditional e-learning world. With so
many more things you can do than just simply click or drag something with your mouse, you need to make this clear in your scripts. You need to describe exactly what you want each interaction to do. So, an example could be ‘User can pinch and spread to expand image on this screen’.
Here’s a reminder from our first Mobile Learning Paper, on the various touch screen interactions that you could
consider using:
Tap - what used to be a click is now a tap on the screen.
Double Tap - the user applies one or two quick taps to zoom in or out of content or an image (not used commonly but can be seen in Google Maps for instance).
Swipe or flick - the user
places a finger on the screen
and quickly swipes it in the desired direction, this tends to pull across new content or
moves them to the next part
of a larger image.
Pull - a variation of the above, the user strokes the screen
and pulls down a specific object e.g. the Notification
Bar on an iPhone. Another
example is the turning of a
page (done in eMagazine or iBook style presentations).
Pinch and Spread - the user pinches or spreads
their fingers keeping in
contact with the screen and
the image is magnified or
minimised. It’s used a great deal in map-based apps.
Touch and hold (or Long Press) - the user touches the
screen and keeps the finger
motionless. This leads to information being displayed
or a specific action.
Tilt and move - the gyroscope built into mobile devices provides opportunities for learners to move around virtual locations quite realistically, a method used in
many mobile technology-based games.
If you are an interactive designer creating a mobile learning module, you need to be explicit in describing how things
should be presented. Don’t leave it up to the programmers, it may not turn out how you intended it to be.
For example, think of the very different ways (as defined by Theresa Neil) in which you can display a menu on a mobile
device like an iPhone: Springboard (emulating the look of the main iPhone app menus), ListMenu, TabMenu, Gallery
(image based), Dashboard (with data embedded in the options), Metaphor (like a bookshelf), PageCarousel (a set of pages you can click through), MegaMenu (a multiple menu of options) and an ImageCarousel (the same but with images).
So, you can’t just say ‘Display as menu’. You have to specify exactly what you want as there is a world of difference between an image driven menu and a simple list menu for example.
By the way, we have found Theresa Neil’s book Mobile Design Pattern Gallery published by O’Reilly in 2012 a great resource to use with clients as it presents a huge range of carefully selected actual user interfaces for smartphone apps. It helps us have a common vocabulary for the variety of new interactions that mobile learning now offers.
You may not need to change your script templates too much when writing your first mobile project. The new vocabulary, the options with new screen layouts and a wider range of touch screen interactions though do add significant
complexity into the scripting process.
4. Scripting your mobile learning module
4. Scripting your mobile learning module
The most common approach we follow is to write scripts as a Word document in a table format with the following columns:
•
Screen numbers•
Screen titles•
Screen text (this would include presentation text and all the questions – with all the options, the right and wronganswers - and feedback)
•
Audio/video•
Graphics (descriptions of all the main visual elements on the screen – bar the standard navigational elements – this can include links to photo libraries)•
Developer notes (to explain how the whole screen works)•
Screen mock ups (where you can show a wireframe or use any agreed screen templates)The one crucial element in this mix is the capability of your stakeholders to be able to review your script. Sometimes we
are asked to present scripts more visually than a Word table. This does make it easier for stakeholders to visualise but it is hard to include all the information that your graphics and development teams need to build the learning.
Our Example Project
For the induction/orientation mobile module for our client, the script needed to
cover a range of delivery methods not just a smartphone or tablet. It also had to
meet the requirements of an accessible desktop e-learning module.
This is not unusual as many of our clients want to follow a ‘write-once
publish-to-many’ model.
The script reflected this multi-purpose requirement with additional columns for
different features particular to specific devices.
5. Building your mobile learning module
There are two main activities that go on in parallel during this stage: visuals/media production and buildingtheapp. Following graphics briefs based on the script, the graphicartists produce the images you will be using in your module. As long as the art direction and prototyping phase has been successfully completed, they can work relatively
independently from your developers. A shared file directory will allow them to upload completed assets.
All videosandaudio should be developed in line with the technical specification and again uploaded into the development directories for the builders to assemble the first Alpha version of the module.
An Alpha is not a finished version of the module. It could still be missing the video of a senior executive who has proved elusive to track down but will be around in time to produce the final Beta version, for example. The Alpha is worth
showing to your stakeholders as it is very useful to get their feedback as early on as possible. It is also useful to get this in front of users to get their initial reactions. You should always do this in controlled circumstances though. The Alpha should be tested before you ever show it to a client but you will not have time to make it 100% robust so you should try
and supervise any exposure to the Alpha (so you can quickly re-launch or skip the known bugs!).
You should leave time (and budget) for changes between the Alpha and the Beta version. Mobile learning content more so than traditional e-learning is something that can only be got right through some degree of iteration and user feedback.
The aim is to make the user interface intuitive: it’s hard to always get that right first time. Only a real user experience can
tell you if you have got it right.
The end deliverable at this stage is then a Beta version. It’s not yet ready to release though as it will need to be 100% robust on every platform and this will require a good deal more testing than you may be used to with more traditional e-learning delivery.
5. Building your mobile learning module
Our Example Project
The module was built mainly in HTML4 using CSS3. HTML5 was used for video components
and jQuery used to enhance the transitions. jQuery is a cross-browser JavaScript library
designed to simplify the client-side scripting of HTML and provide the chance to do Flash
-like transitions.
A number of templates were produced which were designed to look great whatever the size
of display (from smartphone to desktop).
The code was designed so that different browsers would read the relevant code and skip
what they couldn’t read. This allows you to have one set of code for desktop delivery and
browsers.
Some key templates were:
Scrolling menu
- here the user can select from the four topics. A larger image is displayed
on the right hand side. Both the image and menu are scalable and will work across
different browser sizes. The menu icons are larger for the desktop version and six icons are
displayed instead of four. These scale, depending on screen size.
Standard mobile touch interactions and left and right buttons allow the user to explore the
icons. There is an additional scroll bar that works like the left and right buttons. The scroll
bar also acts as a progress bar to show the user where they are. The icons take similar
elements from the Flash version. The scrolling effects allow the site to keep its ‘exploratory’
feel. Once a topic has been viewed the icons are changed to black and white to give a visual
representation of where the user has visited.
Topic page
- on each topic page there are the main elements from the Flash version. The
title banner in the mobile version ‘bounces’ in from the top to give a similar feel to the flash
version.
A larger, main graphic, displays before the main text to give the user a visual representation
of the information below. The content uses native controls to display text. ‘Pop-ups’, ‘Tap to
display’ and ‘Fades’ are used to give the user a clear and engaging experience.
Tablet/Desktop layout
- we follow a responsive e-learning design approach which, by using
the same code base, means we can deliver a product that works across a variety of devices
and screen sizes, even mobile phones. Images and menus will scale if the screen is smaller,
and they react to the environment they are viewed on. Once the screen resolution gets past
a certain size, images are added to create a better visually engaging experience.
6. Testing your mobile learning module
Testing principles are similar in the mobile learning world to the more traditional e-learning models. There are two main aspects to the test process: Content and Function.
Contentchecking is all about ensuring the content is clear, easy to understand and the final modules match scripts and don’t have any typos that may have been introduced along the way (for example on graphics).
Functionaltesting for mobile learning may be across a wide range of devices and operating systems (in line with the
agreed technical specification). Testing ensures that the course works as expected on each platform and discovers quirks that may have not been anticipated in the initial technical discussions. You often find that an old version of a BlackBerry for example emerges as a required delivery device and so you need to check whether this is an issue or not. Web app testing is relatively straightforward as it can be done anywhere. However you will find some complications
potentially with Native Apps on the iOS platform as you may need to get your test devices registered which can take time.
Note: you should never have your content tested by the person who built it. They are the last person in the world
who wants to find bugs at the 11th hour!
Our Example Project
The mobile element of the induction/orientation learning module was tested during
prototyping to check it worked on iPads, iPhones, Android smartphones and tablets
and newer BlackBerrys.
Since the mobile content is a web app, it was relatively easy to run the different
versions from the development server, and the test team checked the whole user
interface and navigation functionality.
Once a complete version was available (Alpha), content checking then took place
with all required changes documented, using the TRAC system that Kineo uses for
all internal testing. This stores all QA documentation in an online environment so
developers can review what is needed to be changed at any time.
Testers are encouraged to try and break the program and so check out less than
logical user behaviour, ensuring that all the functions are therefore 100% robust.
7. Delivering your mobile learning module
Delivering the learning module is all about getting the content out to the learner with as little inconvenience to them as possible, with 100% reliability.
This is a real challenge in the world of mobile learning where you need to work your way around different platforms like iTunes when you want to distribute Native Apps for iPhones and iPads.
Webapps (normally built in HTML5) are relatively straightforward as they are driven through links to external sites. If your content is hosted in an LMS, you just need to make sure the mobile device can actual run the LMS properly and
then you can have a fully tracked learning module. Some tools like Brainshark provide a complete built in tracking and reporting system as they host all your mobile content.
However, if you don’t have a server-based solution, your LMS does not support mobile delivery or you are looking for a fully featured native app, you have a number of choices:
•
A public app store e.g. Apple App Store, Google Play (formerly Android Marketplace), BlackBerry App World•
Handling it yourselves e.g. via Enterprise distribution for iOS•
Using a third-party e.g. Apperian EASE, Mobile Iron, Appaloosa, AppCentral, PartnerPediaThis third option is an interesting one that suits many of our clients. The idea is that they have apps that are cleared by the app stores (so can easily be downloaded by learners) and you can then distribute all the content you want through this app without having to get them approved by iTunes, for instance. This approach allows you to solve the problem not only of distributing apps in the Enterprise (without using the public app stores) but also of having to deliver apps to multiple devices in the Enterprise.
7. Delivering your mobile learning module
This kind of service basically allows you to set up a private app store for your organisation from which (depending on what service you use) you can distribute:
•
iOS apps•
Android apps•
BlackBerry apps•
Some types of content (video, docs, pdf)•
Device configuration info•
Links to web apps•
Links to apps in the public app stores you recommend/require employees use•
Apps you’ve bought from the app store for your employeesYou can also set up groups to control who can install what and - if needed - what must be installed by whom. You can get reports, feedback channels, (moderate-able) comments from users and so on. Some also have the capability to allow for force-deleting all apps from a user’s device when they leave an organisation.
Our Example Project
The final version of the induction/orientation is available to learners via the client’s
LMS (for desktop and laptop users) and on a webserver for those using mobile
devices.
Tracking was not important to the client as it was not a mandatory module. It would
have been different, of course, for a compliance module which would normally be
tracked and thus requires LMS delivery.
In conclusion...
So this is the process you should go through to produce your mobile app:
1. Scoping and scheduling your mobile learning project 2. Producing the overall design of your mobile learning module 3. Prototyping your mobile learning module
4. Scripting your mobile learning module 5. Building your mobile learning module 6. Testing your mobile learning module 7. Delivering your mobile learning module
We’ve shared with you some of the ways in which we work to create effective and engaging mobile learning.
The advent of mobile learning certainly makes things a little more complicated but, as you will have seen, if you have a
strong design and development process and you make those crucial decisions early on in the project you should have no problems in creating some fantastic learning experiences.
