Video Interaction with Closed Captions

This week’s Articulate E-learning Challenge was to create an interaction in Storyline using only shades of grey or in other words, black and white. As it turned out, I already had created a video for my band’s song “629” and it was about 90% in black and white. Being that the tune was based on a very interesting person from US history, I thought it would be fun to create a guessing game called Name that Scoundrel to determine who this person was, what he did for a living, and what organization he’s associated with.

Closed Captions
Recently, one of my clients needed CCs (or closed captions) for a piece of software training I was creating for them. And since the interaction for the e-learning challenge was going to be based on song lyrics, I thought it would be a great idea to use CCs so people could more easily make out the words.

There are a couple things you typically need to do to add CCs to a Storyline interaction.
1. You’ll probably want a button to turn them on and off. I didn’t need or want this in my
e-learning challenge, but it WAS a requirement for the software training piece I created for my client.
2. The words in the CCs need to appear as they are spoken. Because of this, you can’t just use the Notes tab in the Storyline Player.

NameThatScoundrelStillShot2

Turning CCs On and Off Using Layers
Tom Kuhlmann from Articulate shows how to add CCs you can turn on and off by putting them on a layer. Tom’s video also explains how to make the words appear in the CCs as they are spoken on the audio. After watching this video I realized that when you get to the next slide, they disappear. Fortunately, Brian Batt (also from Articulate) shows how to get CCs to continue from one slide to the next.

Turning CCs On and Off Without Using Layers
But what if you can’t or don’t want to use layers? Thankfully, Articulate Super Hero Steve Flowers thought of a way to add CCs without using layers.

NameThatScoundrelStillShot3

Conclusion
I know this blog has just focused on the CC aspect of this game. So please use the comments section below if you have any questions about how I created any of the other elements in Name that Scoundrel. And definitely, let me know what you think!

Am I in Sync?: Using Video in E-learning

One of my clients provides fuel and services to the exciting aeronautics industry. They LOVE video and use it extensively in their training courses. In designing a number of courses for them, I had the opportunity to do a lot of video editing. As much as I enjoy working with video, I always want it to support and not detract from the message being conveyed in each scene.

This week’s Articulate e-learning challenge is all about how to sync video up to your content. So in this article, I will share three different ways to do just that!

Back and Forth

In this first example, I had a picture and text layout that I really liked. So, I brought out each bullet with the picture and then faded in the video to support the more detailed explanation of each bullet, going back and forth between the still shot and the video.

No Bullets, Just Video

For this one, I didn’t use any bullets, but just edited the video so it would be in sync to the audio content. So when she’s talking about smiling or shaking hands, that’s what you see on the screen. I also edited the video so that the actual sound from the video comes in for just a couple seconds so you can hear the CSR saying “Hello, Mr. Smith…”

I used Pinnacle Studio video editing software which allows you to have video on separate tracks, just like in a music recording studio soundboard. I clipped out that little bit of video with the CSR greeting the customer and put it on a separate track from the rest of the video which was on a muted track. Then, for the voiceover audio track, I added a couple seconds of silence, so the narrator would pause while the CSR was talking. It’s a neat effect, and it also gets the learner’s attention!

You can add silence to any track either in your video editing software or after importing it into Articulate Storyline (which is my favorite e-learning design and development tool).

Bullets on Top of Video

In this final example, I added a semi-transparent rectangle on top of the video and animated in the bullets in sync to the voiceover. This is my most common approach.

Whatever media you are using, always strive to make it support the content. Yes, using advanced animations and creative visual effects CAN effectively keep the learner engaged in the course, but don’t get too carried away and end up distracting the learner. Let me know what you think. Do you have any other ideas or approaches to using video you’d like to share?

Presenting Dos and Don’ts

The good old “Dos and Don’ts” list is a quick and easy way to teach people how to perform their jobs. This week’s e-learning challenge was to create a novel way of presenting these lists. So, I decided to make mine about the restaurant business, directed towards those on the front lines, the servers.

DosDonts

I recently saw a graphic image of two faces facing each other in b/w and I thought I could employ similar imagery to create this simple little interaction. The learner is presented with a scenario and then selects either the “Do” face or the “Don’t” face to see an example of each.

DosDontsFeedback.jpg

This could very easily be adapted to give actual lists of Dos and Don’ts for each scenario even though I only offered one example for each.

DosDontsFeedback2.jpg

Rather than using the Next and Previous buttons, I gave learners the option to “Try Again” to see the other option for the current scenario or to go on to the “Next Scenario”. Try it out yourself and let me know what you think!

Plussing it in E-Learning

When Walt Disney’s imagineers thought they “nailed it” with a piece of animation or an attraction, he would implore them to “plus it” to give it that extra bit of magic. I like to think one of our roles as e-learning designers should be to do the same.

Click to view Blowing Bubbles Sample

Click to view Blowing Bubbles Sample

But when we start thinking about throwing in lots of bells and whistles the old fears start creeping in. “My client or company won’t want to pay for all that fancy wizardry.” “What will this do to the budget?” “What about project creep?” “Won’t this just be distracting to the learner?”

I think there is a right way and a wrong way to “plus” an e-learning piece. Yes, you don’t want to blow the budget and no, you don’t want to overdo it. Think of “plussing it” like adding an exotic spice or two at the end to enhance a good recipe. You’ve already got the basic graphic and instructional design approach figured out and most of the course is already developed.

Click to view Sample of Plussing Bullets

Click to view Sample of Plussing Bullets

Now you can sprinkle in a few bits of pixie dust here and there to add a bit of wow to the course. You don’t want it on every screen as it can lose it’s impact or simply become overwhelming. I remember seeing a PowerPoint presentation about a software piece called TrainEngine, and the designer replaced every bullet on every slide with the image of a train engine coming in from the side. It was a clever idea, but it was WAY too much.

Finally, keep in mind that your visual/audio enhancements need to support what you’re trying to teach at that moment and not distract from it.  Ultimately, your goal is to teach the learner something specific and make it memorable. In this sample below, notice how I added bits of sound to go with the images and how the bus appears to roll into the picture while staying inside the frame.

Click to view sample

Click to view sample

E-Learning for Rock Stars

In this age of free downloads, diminishing royalties, and pirating, in the last decade the music business has taken a huge hit to their bottom line. Not that it was ever easy to “make it” in music in the first place.

So how does a band these days book a financially successful tour and boost record and CD sales along the way? Well, there are a few basic tips I thought I would share in this short sample of a game called “You’re an American Band.”

Click here to play game

Click here to play game

For this to actually be a useful and informative game to teach people how to break into the music business, you’d need to add a lot more steps and information. This game is really a prototype and now that it’s set up, it would be easy to add more points along the “tour route” with additional tips.

Click here to play German drinking game

Click here to play German drinking game

I built this game from a template created by Jackie Van Nice. And Jackie created her template based on a German drinking game she built a few months back. Thank you Jackie for sharing your awesome template with the e-learning community.

Renovations
Building a course or game from a template is kind of like renovating a house. You’re pulling out the carpet and putting in hard wood floors here, replacing wallpaper with paint there, and sometimes even tearing down a wall or two. The whole idea behind using an existing template is re-purposing.

Mapping it Out
I’ve always loved maps and when I saw that Jackie’s original game worked off of a map of Germany, I realized I could replace that with a tour map and that my game could be about a rock band booking an east coast tour. That was where the whole idea was born.

Tour map

Tour map

Each point on the map led to a challenge question, so all I had to do was come up with a list of questions about booking rock shows and then just tie them into each city along the tour route.

Challenge is presented

Challenge is presented

The Progress Meter
Jackie had a progress meter appear after each question was answered correctly. Hers actually showed a beer mug slowly getting filled. Since mine was about boosting CD sales, I had CDs slowly stacking up on a spool with a caption showing how many CD sales the band had racked up.

CD tower progress meter

CD tower progress meter

DIY
Being a musician myself, I took some previously recorded song and guitar bits I had and inserted them into the introduction and the map sections. I also used some standard sound effects such as tympani rolls on the CD sales progress meter, some crowd noises, and other sounds for the feedback layers as well.

Click here to play the game

Click here to play the game

This is the End
For the conclusion slide, I show our hero playing in front of a huge crowd with a Spinal Tap quote thrown in for a little comic relief. Overall, this was a very oversimplified lesson on how to make it in the music business, but really you could put in whatever content you want and it could easily be made into a very useful teaching tool for people in that industry.

This Spelling Bee is for the Birds

In this weeks e-learning challenge, we designers were asked to create a spelling bee interaction as the 2014 National Spelling Bee kicks off. I thought that was a great idea as it was something I’d never thought of doing before. I decided to create one based on physics terminology and have it presented by a parrot.

Physics Spelling Bee Intro

Click to play the Physics Spelling Bee

How the hxll did I come up with that?
Well, I had this beautiful image of a parrot flying over a rainforest I had used previously to create an interactive portfolio of my work. I called it “E-Learning that Soars” and I thought maybe I could do something with that. On the other hand, I’m a huge fan of this science program hosted by Morgan Freeman called “Through the Wormhole” where they talk about all sorts of fascinating topics like parallel universes, time travel, etc.

So to combine these two disparate elements of the parrot and physics, I created a story that goes like this: An up-and-coming physicist named Laurie Worthenhiemer has a pet parrot and because Laurie’s always talking about physics at home, Polly (the parrot) has picked up on a lot of the terminology. Polly has a lot of spare time on her hands, so she creates this spelling bee to challenge and entertain her house guests.

Build it and they will come…
Next, I picked four physics terms for players to spell. As is the case in most spelling bees, you’ll hear the term, then you can ask for a definition and hear it used in a sentence. I reached into my “inner-bird” and recorded all the voices using Cubase SX software and a nice Audio Technica microphone. I set up triggers in Articulate Storyline to play the different audio files when the user clicks for the definitions and the sentences.

Definitions and sentence options

Definitions and sentence options

This might sound obvious, but I also made sure that the notes button on Storyline’s player was not checked, as the transcript I was reading from would have revealed the words and thus given away their correct spelling.

The spelling part
I used Storyline’s built-in quiz question with a text entry field for players to type into. I took advantage of the correct and incorrect feedback layers to put in a few witty comments from Polly based on the words the players were attempting to define. I like to customize the colors and feedback on these to fit the situation rather then just going with the generic “correct, you chose the right answer” and “incorrect, you did not choose the right answer” phrases. I also put in a little picture of Polly speaking to the players to personalize it more.

Feedback layer for right answer

Feedback layer for right answer

Keeping score
I used Storyline’s built-in quiz results slide to keep score. Again, I customized it quite a bit eliminating the “you passed” and “you did not pass” layers. Being this was just a game and not really a quiz, I just wanted to give the players a score. I also removed the “percentage right” total and just showed the points.

The final tally

The final tally

If I wanted to, I could have used the built-in pass/fail layers of the quiz results slide to show Polly making a snide comment about a lower score, and another layer with a comment responding to a higher score. Although I didn’t do that here, it’s something you might consider in building your game. So, there you have it, a spelling bee game created in Storyline presented by a parrot all about physics. Enjoy!

You Can Tune a Kalimba…

Step graphics make it easy for learners to sequentially walk through a process, workflow, or procedure. They can be used for all types of learning interactions, from procedural training to interactive storytelling. If you have a process that’s complex or just hard to describe, step graphics are an excellent way to show (rather than tell) how to get the job done. In one of his weekly e-learning challenges, David Anderson asked us designers create a step graphic interaction.

Enter, the Kalimba
I’m also a musician, and for years I’ve wanted to create an online lesson on how to tune a kalimba. The kalimba (aka mbira or thumb piano) is a musical instrument with metal tines you press down on like a piano to play melodies. A lot of tourists buy these on exotic vacation trips, take them home and watch them collect dust. Most people think they are only decorative noisemakers, and don’t realize you can actually tune them and make beautiful music from them.

Click to view kalimba course

Click to view kalimba course

I thought this step graphic approach to teaching would be perfect for showing people how to tune a kalimba.

Navigation/Progress
I knew right away that I would use thumbnail pictures of a kalimba along the bottom of the frame as a navigation feature. Each thumbnail represents one of the ten steps, and most learners intuitively know that they can click on them to jump backward or forward to any of the steps. I washed out the color on the thumbnail for the current step to show them how far along they are in the course.

Step navigation kalimba thumbnails

Step navigation kalimba thumbnails

I also included a traditional progress bar for the current step so learners could pause at any time. I knew this would be especially helpful when the learner is actually tuning their instrument and want to pause when the current note is being highlighted.

Learners can pause during instruction

Learners can pause during instruction

Highlights

To show learners what note they’re on (both on the kalimba and on the xylophone they’re tuning it to), I created a white rectangle with no outline set at 50% transparency. Then I sized and fitted it over the key of the xylophone or the tine on the kalimba. I added a fade in and fade out animation and adjusted them on the timeline (in Articulate Storyline) to fade in and out when you hear the notes being played.

Test It
Originally, I tried creating a video for these steps, but found that using a still image with these animated highlights looked a lot better. They were also easier for the learner to see which notes were being played. I only learned that the video approach wasn’t working so well for these steps after user testing them with another designer, Jackie Van Nice. Thanks Jackie for your good advice and feedback!

The Happy Ending
Finally, to give learners a feel for how nice the tuning sounds, I played a little tune at the end.

Actually playing the kalimba

Actually playing the kalimba

I also gave learners the option to exit the course at any time. This is an option you can put on the player in Storyline.  I feel it’s important to give learners as much freedom as possible moving around the course. Between the thumbnails, the previous and next buttons, the pause/play buttons, and the exit course option, learners have a lot of flexibility. And, despite all those navigation options, the screen is uncluttered and easy on the eyes. Click here to test drive this snappy little kalimba lesson.