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