The Revealing Science of E-learning

If you’ve ever witnessed a plague of lighthouse keepers or traversed the topographic oceans only to find yourself in the court of the crimson king, you may appreciate what I created for this week’s Articulate e-learning challenge.


Our MC, David Anderson asked us to create an e-learning interaction that used awards and/or progress bars in a creative way to reward learners and show them how far they’ve gotten in a lesson. Well, I thought this challenge being about progress bars, I should create the ultimate PROGress bar (ie: progressive rock, get it?).

So many times when I’ve seen documentaries about popular music or the 1970s in particular, all they ever talk about is punk and disco and totally miss the fact that the major progressive rock bands were selling millions of records and packing the hugest stadiums in the world. It was what Bill Martin aptly labelled a “popular avant garde.”

The PROGress Bar
For my progress bar, I decided to have seven levels of achievement with an illustrious title for each; ranging from Prog Novice to Prog God. I used the sun from the cover of King Crimson’s Larks’ Tongues in Aspic to denote where the learner was in the different levels. So the suns go along the bottom in a row with all of them grayed out except for the current level the learner is on.


Hint, Hint
Knowing that a deep knowledge of progressive rock is generally not the forte’ of most people and that my audience was going to be mostly other e-learning designers, I didn’t want them to get discouraged and opt out of the lesson right away. To remedy this, I added obvious hints to the feedback layer of the questions and gave them two tries to get the right answer.


Being the serious prog-nerd that I am, I had too many questions. Anyone who knows me personally knows I can go on and on about this topic. When I was done, I realized that I HAD to have at least one extra question. So it made sense that to get all the way to Prog God, that the learner should have to answer an additional question to get that ultimate title. To represent where they were at in the lesson, I highlighted one half of the final sun on the PROGress bar.


Original Music
For anyone who’s interested, the music on the introductory slide is a piece I wrote and recorded called “Satisfaction.” It was supposed to be one of those epic 20 minute tunes, but is yet to be completed. At any rate, enjoy the lesson and definitely let me know what you think!

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.

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


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.