Blog

What do you do when you need to create a more complex drag and drop interaction? One with multiple groups of drag items? Will you throw the learners into a world of chaos where they can drag whatever they want wherever they want, or can you use intuitive design to cut through the chaos?

The Background

This was the challenge I was faced with when I wanted to recreate the process of hazard mapping in the workplace. OSHA requires that employers create a hazard map to communicate hazards to employees. This hazard map is a literal map that marks the location of any hazards with a label that pertains to each hazard. The label uses color and a number to communicate the type and severity of the hazard, respectively.

Therefore, in order to correctly create a label to put on a map, a learner needs to be able to identify the color of the label for type, then the number of severity.

Now, I could do this as a two part process with each part as its own slide/interaction: first pick the color, then pick the number. But I really wanted the idea of the two parts coming together to create one label to be construed to the learner after they successfully completed the interaction.

The Challenges

Based on this idea, I knew I had the following challenges:

• Create a UX that guides the learner to put the color drag item on the colors drop target and the number drag item on the number drop target
• Illustrate the idea of these two things coming together
• Offer a hint of what the drag items signify as this was a knowledge check, not assessment
• and finally as color is very important in this interaction (and it’s just a good idea in general), make the interaction accessible to learners who might have color blindness

The Results

I thought about these challenges and prototyped for a bit, then decided the best course of action would be to make differently-shaped drag items and drop targets for each of the two components. As almost every human has had experiences in early childhood fitting blocks into the right holes, it’s an immediately understood UX.

Have a go at it yourself: OSHA Hazard Label Interaction (the answer is orange, 2)

I was especially pleased at how my use of simple Storyline animations really drilled down the point that these two separate pieces of information come together to make a label that goes on the hazard map.