This week’s ELH Challenge is to show how to use badges, awards, and achievements in e-learning. I don’t always use a ton of these in my client projects, so this was a nice chance to play.

The Idea

Since showing progress and achievements for their own sake doesn’t do much to connect with learner motivation, I wanted an end goal that would be motivating to achieve and a learning goal that would enable the learner to achieve it.

I decided on a simple language learning demo that puts you in the position of having to use enough Italian to navigate dining out in Italy. Learner gotta eat.

The Design

I wanted this to be simple and intuitive, so I didn’t use any written or audio instructions (with the exception of “Try Again”) or try to flesh out restaurant scenes or interactions in any detail. The focus is on the language and the related progress and achievements.

Color-wise I thought about including an Italian flag somewhere, but it seemed like an overused and unnecessary indicator. Instead I grabbed the RGB and hex codes for the Italian flag and used those colors on a largely monochromatic stage throughout.

The Reinforcing Progress Bar

Though I’ve used beer mugs, mountains, mai tai glasses, scoreboards, typography states, and I-don’t-even-know-what-else to show progress – I’ve never designed a standard progress bar. So I thought I’d give it a shot.

Somewhere in David Anderson’s suggested resources this week (I’d point to it but have lost it in the shuffle), Tom Kuhlmann was giving the basics of progress meters. I took away that putting them on master slides isn’t a bad idea and that indicating chunks of progress can be quite simple, which was very helpful and enough to get going.

I have 4 quiz questions in this demo, each equating to 25% progress on the bar. Each question focuses on one small bit of vocabulary. For reinforcement, I embedded that bit of vocabulary directly into the progress bar once it had been used correctly.

The Badges

I added what are basically earned badges alongside the progress bar. Since they’re images that illustrate the target vocabulary in that section, it seemed like another good bit of reinforcement.

Feedback

There are four ways to figure out whether your answer was correct or not: The look on the server’s face, what he’s saying in Italian, your progress (or lack of it) shown via the progress bar and badges, and whether or not you see the Try Again button.

Since this is more about exposure to vocabulary in context and not every word is meant to be understood, there’s more value to mulling over and playing with the options rather than simply counting something as wrong and moving on. That’s why each question is set to let you play/guess/answer as many times as you’d like.

The Result

Ready to see if you can navigate going out to dinner in Italian? You can give it a try right here. Buon appetito!