Creating Mobile Learning. 7 key steps to designing and developing effective mobile learning

Transcription

1 Creating Mobile Learning 7 key steps to designing and developing effective mobile learning

2 kineo Creating Mobile Learning Scoping and scheduling your mobile Step 1: 03 learning project Producing the overall design of your mobile Step 2: learning module 05 Step 3: Prototyping your mobile learning module 07 Step 4: Scripting your mobile learning module 10 Step 5: Building your mobile learning module 13 Step 6: Testing your mobile learning module 15 Step 7: Delivering your mobile learning module 16

3 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 Add HTML5 Tags Prototype Design Walkthrough Prototype Approved Scripting HTML4 Coding Tech Spec Graphic Creation 01

4 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. 02

5 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 03

6 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... 04

7 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. 05

8 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 using Our 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. 06

9 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. 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 see the logic of why they have limitations on the number of characters for each of the templates. 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. 07

10 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 Adobe Air 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 Sencha Animator. 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 most corporate needs you can keep a lot of things simple. 08

11 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. 09

12 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 interactions It 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). 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. 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. 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 technologybased games. 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). 10

13 4. Scripting your mobile learning module 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), List Menu, Tab Menu, Gallery (image based), Dashboard (with data embedded in the options), Metaphor (like a bookshelf), Page Carousel (a set of pages you can click through), Mega Menu (a multiple menu of options) and an Image Carousel (the same but with images). iphone: Springboard Gallery 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. 11

14 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 wrong answers - 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-tomany model. The script reflected this multi-purpose requirement with additional columns for different features particular to specific devices. 12

15 5. Building your mobile learning module There are two main activities that go on in parallel during this stage: visuals/media production and building the app. Following graphics briefs based on the script, the graphic artists 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 videos and audio 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. 13

16 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. 14

17 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. Content checking 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). Functional testing 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. 15

18 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, PartnerPedia This 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. 16

19 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 employees You 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. 17

20 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. Good luck! 18