May162013
Articulate Presenter makes it really easy to sync your animations and audio. You can even fine-tune animation timing inside the audio editor. This can be a huge time-saver.
Let’s say you have a slide with two minutes of narration plus animations that you need precisely timed with the narration. You’ve synced the animations, but when you preview the slide, you notice that one animation is just a little bit off. Do you go through and resync all 10 animations again? I did this far too many times, until I learned that I could adjust a single animation with the audio editor. Here’s how:
Step 1:
In the PowerPoint animation pane, make note of the animation order and the animation you’d like to alter. For example, if you wish to alter the fifth animation out of 10:
Step 2:
Click “Audio Editor” in the Narration area of the Articulate ribbon.
Step 3:
Select the slide that you’d like to edit.
Step 4:
Identify the cue point for the fifth animation and simply drag it to earlier or later in the timeline.
That’s all there is to it. No need to resync all 10 animations; simply adjust the one. I’ll walk you through the process in the following Screenr:
View this screencast on Screenr.com
If you have other favorite time-savers, share them in the comments section below. And if you want more info on using the audio editor, see this screencast. Still have questions? Head over to E-Learning Heroes and ask away!
May92013
I see a lot of questions on E-Learning Heroes about designing for multiple screen sizes. Indeed, mobile design requires new approaches and rules. As architects of learning experiences, we all want to deliver content successfully through different devices. But we’re dealing with not only dimension differences, but also with new learner expectations and behaviors. Mobile learners need access to content beyond the desktop, and they expect immediate, straight-to-the-point, contextual information. They also expect high-quality design and interactions that make their experience more enjoyable. Fortunately, there are mobile design patterns that effectively cater to these needs. In this article, I’ll provide some tips on optimizing your Articulate Storyline content for iPads.
Tip 1: Optimize user interface and user experience for mobile
One way to enhance user experience (UX) in mobile design is to employ an interaction design technique called progressive disclosure. With this technique, you show users (or learners, in this case) general information first, then have them perform an action to explore additional content. This prevents information overload and lets learners uncover content as they need it. Remember that mobile learners often multitask, so it’s very unlikely that you’ll have their full attention. Ignoring this dynamic is a huge mistake in UX design.
The horizontal tabs of an accordion menu are a great example of progressive disclosure. The interaction gives faster access to main topics and lets learners interact more freely with content as they explore each section. A sidebar menu, while a helpful navigation element in many online courses, can actually interrupt the natural way learners interact with content on an iPad. For this reason, I recommend hiding the sidebar menu on the player for the iPad accordion interaction. This also allows designers to focus on the most relevant elements and take full advantage of screen space and touch-based actions.
The accordion interaction is great for performance support applications. It provides an easy way for learners using iPads to carry out specific procedures, scan through different sections of a document, and quickly check FAQs in the field. You can include brief explanations or definitions, and illustrate them with short videos or images. As a side note, be sure to optimize your multimedia elements to reduce response times on iPads. I usually use smush.it! to compress images. Also, make sure that your videos are no longer than three to five minutes and that the format is compatible with the target device. MP4 outpaces other formats in mobile delivery since it requires less bandwidth, reduces file size, and provides high-definition videos.
Tip 2: Adjust your canvas size for multiple screens
Another important consideration is the canvas size. A suitable story size for projects that need to be accessed through PCs, laptops, and iPads (without a sidebar) is 960 x 640. On E-Learning Heroes, you can find a comprehensive discussion and tutorial on choosing the right story size.
Tip 3: Look to iOS widgets for inspiration
In order to give the accordion template an “app-like” look and feel, I changed the default feedback box in Articulate Storyline. I adjusted the colors and the size of the feedback box to resemble iOS notifications.
Here’s how I did it:
a. On the View tab, click Feedback Master.
b. Right-click on the grey shape and select Format Shape.
c. Then, adjust the settings.
Tip 4: Publish to Articulate Mobile Player
When you go to publish your course, you’ll find options that include HTML5 output and Articulate Mobile Player, a free iPad app. This app significantly optimizes content viewing on iPad, delivering complex interactions and software simulations with great fidelity. Besides, the output is compatible with Tin Can API-supported learning management systems, such as Articulate Online.
If you decide to deliver content via mobile browsers instead of using the native Articulate Mobile Player app, be aware that HTML5 presents some limitations and you should review this list to make sure your interaction will work as designed.
Tip 5: Test on real devices
Even though you can test how your course will look on a mobile device with an online emulator such as http://ipad-emulator.org/ or http://ipadpeek.com/, it’s always better to test your courses in a real performance environment, under real delivery conditions. This will allow you to identify problems more precisely and avoid potential issues with the final product. More importantly, through usability testing, you’ll gain a better understanding of how your design performs and renders when deployed on devices like iPad.
To emphasize this point, I want to share a mistake I made when I designed this mobile accordion template. I’m used to designing for the precision of the mouse, so thought nothing of linking screens by placing small rectangular hotspots over the button images. On a PC, the hotspots would have worked perfectly well. But as soon as I launched the course on my iPad, I realized I needed a larger hotspot to enhance usability. Why? Because of the way we hold mobile devices and how we can “touch” the content with both hands.
To quickly test your projects on iPad, upload your published content to a cloud storage server like Dropbox and email yourself the link to the story_HMTL5.html or ioslaunch.html. You can find more information here.
Tip 6: Get help on E-learning Heroes
One last note. If you’re just getting started with mobile learning, E-Learning Heroes is definitely the place to find great assets, clear-cut answers, and inspiration for your future projects. When I embarked on m-learning design, it was so valuable in helping me put all the pieces together.
If you have more suggestions on designing, testing, and delivering iPad solutions with Articulate Storyline, please leave your comments below or post on E-Learning Heroes!
You can also view a screencast about my accordion interaction here and download the iPad-ready Articulate Storyline template here.
