Month: March 2014

Winter, John, Managed.

Storytelling has been a buzzword in eLearning circles lately – and for good reason. Everyone loves a good story and they are a great way to put new information into a familiar context, provide feedback, and run through possible scenarios. I know I always remember more from a story than I do from a list of bullet points.

This week’s eLearning challenge was to visually tell a story with a photo collage.  The submissions so far have been all over the map in style and use of pictures, so be sure to check them out.  Spoiler: I decided to go the route of presenting a scenario with feedback in a comic book/pop-art style.

So, what’s the story?

Since this challenge was story based, I decided the story was the best starting point.  But I was feeling a little stuck.  The return of miserably cold weather has effectively shut down my brain which was terrible timing since I had a lot going on this week.

So I decided to just create a quick and easy scenario based around how a manager might deal with a major employee error. Why that scenario? Who knows.  It is just what popped into my head.

I came up with four different ways that a manager might respond to a crisis stemming from employee error – blaming, helping, fixing, and ignoring – and went from there.


Winter, Managed. (or: Visual Design)

Without a lot of time to spend on the challenge,  I decided to use the only photographic character Storyline has built-in. She has a ton of great poses, way more than the illustrated characters, so I was able to find a pose that perfectly illustrated her freaking out over a problem, and then each of the four possible reactions.

Once the characters were on-screen, I found that they were really boring.  I mean, it was just a white page with five different images of the same lady, each in her own box.  It was just a little too plain Jane, Brady Bunch for my taste.

Since winter doesn’t seem to want to die, I decided some bright colorcolorss were in order.  I started to play around with possible backgrounds and found a really great pop-art like combo of a red and a yellow that I loved.  Text then was placed in white speech bubbles or boxes, just like in a comic.

For fonts I used:

  • Segoe Print (my quick go-to for a handwriting-like font) for the speech bubbles.segoe
  • Tandelle (a nice, tall, dark, sans-serif font that looked like it might belong in a comic) for the feedback.
  • I almost went with Stereofidelic for the feedback, but it was just a little too much.stereo

John, Managed. (or: The Finished Product)

Here one image from the finished product.  To see all the possible outcomes, view the demo.  Don’t worry, it’s short and sweet – like winter should be.



Like it? Inspired? Got a better idea? Let me know!

Give me an inch…

Ok, I love using Articulate Storyline.  I only started using it recently and immediately realized that Storyline makes interactivity so much easier to build than other tools I had used (mostly Adobe Captivate – which does have its own virtues).

But, give me an inch and I want a mile of course.  There are some things that I wish Storyline could do that it just can’t.  For example, there is this cool zoom area feature.  It is a neat feature to have but is meant as a story telling aid, not an interactive element, and so is a little restrictive in the ways you can use it. The two restrictions that bug me the most are you have to zoom the entire slide (so any navigation or custom player elements are also zoomed) and you can’t trigger the zoom with a user click.  Also, you can’t use a zoom region on a layer.


The Articulate e-learning challenge this week was about interactive screenshots. So I took this as an opportunity to play around with the zoom region and figure out some work arounds that would make it a little more interactive.  I am currently working on a software demo that it would have been great to try this with, but since that isn’t something I am able to share I decided to use Google maps to play around.

Making it clickable

My first challenge was making zoom regions that could be triggered by the user.  I had thought about this in the past – actually, the very first moment I learned about the zoom feature – and had a vague idea of how to approach this.  I knew I would need a main slide that could be triggered to jump to new slides, each with an appropriate zoom region depending on where the learner clicked.

The structure ended up being 5 slides – a map with 4 clickable hot spots, each of which brings you to a slide representing one quadrant on the map.


Each new zoom slide was a direct copy of the initial map slide. In order to make sure the images were not (as) blurry, I actually created the large image from 4 separate images, one for each quadrant.

Getting the timing right

Playing around showed me that the zoom region has to come in after the start of the slide in order for the cool zooming effect to happen. If you start the zoom region at the beginning of a slide then the slide starts already at full zoom.

Once the zoom slide starts, it keeps rolling until the slide ends and zooms out.  So I used one of my new favorite tricks, a pause layer. It pauses the slide just before the zoom out starts and the user can click on the slide to zoom out and return to the larger map.


Zooming navigation features

You can see in the images above that I have a consistent navigational feature in the bottom right corner of each map.  This feature disappears (or gets really large) when the image is zoomed in.  In order to get around this I created a smaller version of the button that appears about the same size once zoomed in. It’s timeline starts once the zoom region is almost fully zoomed and ends when the zoom out starts.

It’s not a completely smooth transition, but it was a quick, easy, and functional solution.

Some lagniappe

That little navigation feature actually lets the user toggle between map view and satellite view. At first I tried to use layers to toggle, but the no zooming on a layer thing really threw me off.  Then I realized there was a much simpler solution – states!

Now, each quadrant image isn’t perfectly equal to the size of a zoom region.  They overlap a little.  In order to make sure I didn’t have to deal with changing the states of several images for each slide, for each click, I changed the state of just one image, Q2, since it is the top most image.  The “satellite” state for this image has the entire map – 4 images – in satellite view. The nav feature buttons also have a “map” state.

normal_state   sat_state

The states for the nav feature and the map switch with a “MapView” variable that is toggled each time the user clicks on the nav feature.  The MapView variable is also used to make sure that a slide is opened in satellite view if the variable is false. (Incidentally, this is the first time I realized that you can set a trigger to toggle a true false variable – I love it!)


And voila! Out came a simple interactive map of my hometown of Lafayette, LA
heart of Cajun country and the best place in the world.

Feel free to download the source file and leave any feedback or comments below.  I would love to hear about other awesome work arounds and ways folks have used the zoom region feature.

Mission Possible

I was tasked a few weeks ago with creating a software training for our staff. It’s basically one of the most boring topics ever – completing and submitting timesheets.  It just so happened that at about the same time a lot of great ideas were being posted on the Articulate weekly challenge (for which I made the Cards for humanity game).

I started thinking about how I could make this timesheet snooze fest a little more game like.  Enter, Operation Right on Time.  Here is how it all came together.


Game Design:

Two submissions in particular on the weekly challenge inspired me – a detective game by Nancy Woinoski and a spaceship building game by Charles Hamper. I decided to create a detective-like game where you use clues from your calendar and notebook to complete a series of challenges.

Your mission is to “get paid” – simple, but effective.  I mean, who doesn’t want to get paid? In order to complete the mission, you have to complete 5 challenges, 1 for each day in the game.

directions  Challenge-1

Rather than a long explanation of how to complete each of the 5 tasks, learners are instead given all the resources they need and then simply asked to complete those tasks.  Each challenge is a screen recording of me working in the software, set to test mode. I also use the same screen recordings in view mode as associated demos for each challenge. Learners are given some fake time codes and hours worked for each “day” and can access these tools right from the challenge through lightboxes, so they never have to lose their place in a challenge if they get stuck.

challenge-screen notes calendar

I also took some inspiration from mobile games.  There several levels which you have to unlock. You can open up resources and instructions and switch levels using small buttons at the top of the screen.


Visual Design:

This was a little secondary for me this time around, but I decided early on that gray and black needed to be key to the color scheme.  I also wanted to make an office setting where you could explore your surroundings for clues. It’s a mostly static scene where you click on the calendar and notebook for information and on your laptop for the challenge. But on each day I threw in an easter egg for either more information or a little fun.  On Friday, you get to play darts.

Office  easter-egg   darts

For the font, I wanted something that looked like a typewriter.  I searched for a free font on and used Underwood Champion (since I just finished watching the second season of House of Cards).  I dropped all of the “o”s just a bit so it looked a bit like a typewriter.

Obviously, I needed to visually tie in the mission of getting paid.  So, at the end of each challenge you earn a few $1000 bills, because who doesn’t want to get paid in $1000 bills?  And at the end of the game, once your mission is complete, a bunch of $1000 bills fall from the sky.  Yes, I make it rain.

challenge-complete   mission-complete

Nerdy Details:

I had to use a few work arounds to get some of the animation to work right in this game.

Unfortunately Storyline does not have an animation that mimics typing so I had to create each letter separately and time them to enter as if they were being typed.  An easy, but very time consuming solution.

I also wanted to create a pause button on several slides so that things would enter and exit correctly.  See my Cards for Humanity post for an explanation on how to make that happen.

Overall, i think this turned into a much more engaging way to get people to learn this information than a boring ol’ Power-Point-slides-converted-into-click-and-reveals type training.  I will be posting a working sample soon, but in the meantime, what do you think?  Do you like this approach?  What would you change?



Here is the link to a working demo of the project.  Since the blog post I had some fun adding sound effects and let me tell you, they really give the project a little something extra.  Several came from eLearning Brothers, a few from SoundFX Now, and some I created in my office using Adobe Audition and a headset microphone. Enjoy!

I also created a conclusion slide for another Articulate challenge.  I haven’t added it to the demo yet, but you can check it out once you’re done.

Hand Over the Spoon

When I finally publicly posted my blog for the first time last week, I had a great response (thanks guys!). One friend in particular, who I haven’t seen in a while, was unaware that I did eLearning for a living.  She is starting to learn and use Adobe Captivate to make some stuff for her organization and asked if I had any tips or resources to share.

Well, I’ve got lots of tips.  Most of them are cynical (save often when working with Captivate or Storyline!) but here are a few not so cynical ones, in no particular order other than that in which I thought of them.  These really focus on some of the basics of good instructional and eLearning design since once you form bad habits in these areas, they can be REALLY hard to break!

PowerPoint Presentation


  1. Map out your plan before you open the software.  When new to this stuff you fall into one of 2 camps: “can’t wait to play around!” or “ack, I’m terrified!” Either way, you will minimize distraction and/or terror if you first have a storyboard.
  2. Related, if you are serving as the instructional designer make sure you are using some kind of process that includes an analysis of needs and learners and deliberate design. Learn more about ADDIE (a long time industry standard) and SAM (a newer, iterative model).
  3. Learn to write good learning objectives. If done well, and you follow tip 4, your course will essentially design itself.
  4. Create your evaluation/quiz questions before your content.  If your content doesn’t directly support a learner being able to complete the task/answer the question, throw it out.
  5. Chunk things into small bits.  Our brains can only handle so much at once. Each slide should contain no more than one or two pictures with a handful of words.
  6. Hand over the spoon. That is, give learners control whenever possible. Let them explore.  One strategy I particularly love for this is to give them all the information you want to present as a set of resources.  Then make them solve a problem using those resources.  This can have the added benefit of reinforcing how/where to find this information when they need it in the future.
  7. Play around with your software and stretch your limits. Learn how to create click and reveal interactions.  Once you get that down you can start to play with drag and drops, hot spots, scenarios and branching.
  8. But don’t make interactions just for the hell of it.  There is nothing more annoying than mindless clicking or having to click 100 times on one slide to reveal all the necessary information.
  9. Join some communities, listen in on webinars, read all you can. There are so many really awesome resources available so take advantage of them!
PowerPoint Presentation

Speaking of Resources…  Here are some of my favorites.

  1. No matter your tool, the Articulate community blogs are an awesome place to get ideas. In particular, check out David’s weekly challenges.  They are full of inspiration.
  2. The Articulate Building Better Courses forum is also awesome.
  3. ASTD – consider becoming a member.  Also, their Learning Circuits blog.
  4. eLearning Guild
  5. There are tons of great eLearning and instructional design blogs out there.  You should read some and find which ones you love.  Here are some compilations from Articulate, from eLearning Industry, and from Cammy Bean at Kineo.
  6. Michael Haney’s blog, eLearning Curve, has some great resources. Check out his “Discovering Instructional Design” series (summer of 2009). I really like the tips in this post on goal analysis when working in the affective domain.

So, what are your tips and resources for those just getting started? Do any of these in particular resonate with you? Coincidentally, the Articulate Community Weekly Challenge this week was about designing a poster around your favorite education or instructional design quote – there are some great submissions! My contributions are the images above.