June 22, 2016

My Design Process: Badge Interaction

This week's ELH Challenge asked us to personalise an e-learning module. My submission was based on the idea I implemented in the actual e-learning module in the past. Since I mostly designed internal trainings for employees wearing security badges, for me personalisation always starts with getting your badge. It's quite a familiar feeling for my audience as well and the reason why I used the "create your badge" approach to communicate the module personalisation mechanic to the learners.

In this post I would like to focus on my reasoning behind the badge interaction design. While it may seem that not much thought is needed to design such a simple thing, I have to say that I've noticed that the final simplicity (a good one!) of my work most often results from the complexity of my design thinking or planning. So, if you're interested in a "look into designer's head" - read on!

If you're more interested in the development and the insides of the Storyline file, check out this post.

First Version

When I first created this module, the badge page looked approximately like this (note that this is not the exact original version, as I can't publish the original):

The learner would see the badge on the left and instructions on the right. There were very few restrictive mechanisms built into the slide as I assumed that majority of learners would dutifully complete the badge and then experinece a lovely customised training module.

Technically, I was correct and majority of cases worked out exactly as I wanted. However, majority does not mean 100% and in some rare cases learners forgot to tick a box or mark a radio button and as a result would get stuck in the middle of the course due to missing variable values. That's just plain bad.

Second Version: ELH Submission

Keeping in mind the lessons learned in the original course, I decided to update the badge interaction for ELH challenge. For example, I added vibrant callouts to draw learner's attention to the important parts of the badge (the labels disappear as the learner enters the answers):

In addition, I've added more triggers to check if the learner answered all questions and to provide workarounds in case they didn't. For example, a gender-neutral name would be assigned if the learner's name was not provided (I know I often skip the "give me your name" part).

Unfortunately, since I cannot test this version on the intended audience, I don't know if this version was an improvement. Perhaps it was. But, I was not happy with it! I felt that I was spending too much time trying to predict what could go wrong. My triggers were too complicated and were serving some vague "just in case" purpose. There's a saying in Russian: "Lazyness is the engine of the progress" and I definitely agree with it - if something is too hard (and, on top of that, I'm the one who's making it hard), then something is not quite right!

The Problem

So I took some time to think about it. The problem I was trying to solve was the missing data. The cause of missing data was either the lack of attention or distractions (or, more likely, both). Imagine a hectic call center in the open office environment, where agents are expected to complete e-learnings within a very short period of time while being distracted either by direct questions or by the usual open office hustle and bustle. In this situation even a form with just three questions might be indeed too overwhelming! Plus, let's admit it, from the learner's perspective, this is not a hugely important form.

I couldn't know for sure if the orange labels helped in this situation. I can assume that since the labels would only disappear once the learner interacted with the relevant part of the badge, after recovering from a distraction the learner would clearly see the remaining lables and would proceed with the task from where they left it. Still, there was a possibility that this might not be enough, or that the users might simply disregard these warnings and deem the badge completion unimportant. I didn't want to add more text explaning why the module needs this information - since my target audience is located in the environment where three questions on one slide might be too much, adding more text didn't seem like a reasonable idea!

In short, I needed to have a solution that would facilitate the recovery from multiple distractions for my learners as well as make work easier for me by reducing the amount of triggers and variables used as error control/recovery mechanisms.

The Solution

You can see the third iteration of the badge mechanic here. To compensate for possible distractions, version three does not show everything there is to see to the learner. Instead, on every screen the learner sees one, clerly stated question:

If the learner fails to provide answers to important questions, the simple trigger stops the learner from proceeding and displays a brief reminder (the reminder can also be a good place to briefly explain the importance of the field to the learner, if necessary):

In the end, the learner would see the completed badge, with an option to go back and correct any wrong information.

The redesigned badge interaction definitely met the goal of reducing my workload in terms of trigger management. In addition, since the triggers that adjust variables were now spread across three slides, it could be easier for someone other than me to understand them. I definitely found it easier to manage chunks of triggers, rather than one big heap! I also feel that the new version is more dynamic, thanks to the added slide transitions, which simulate the top-to-bottom eye movement over the badge. However, to make the final commitment in real life, I'd need to test both options on the representative learners.

Additional Resources

Since the challenge mentioned gamification, I would like to mention a game I deeply love and which can be a great source of inspiration in the use of badges and other corporate paraphernalia. The game is called Human Resource Machine. The interface design in this little gem is amazing: creative, cute and slighly ominous (as that's the point of the game) at the same time. Definitely gives you a lof of food for thought. And if you're into solving programming / math puzzles, then you will have a blast with the game itself - I certainly did.

No comments:

Post a Comment