E-Learning Challenge #36: Interactive Step Graphics in Online Training

I’ve been feeling pretty slack lately, but I won’t argue about being too busy to participate to my fullest potential. In any event, this week’s e-learning challenge is all about interactive step graphics in online training – coming from a Defence background, this is a great challenge for me, because at least 80% of the work I did previously was procedural training for complex procedures (e.g. aircraft maintenance training). I will warn you that this week’s submission is 1 – a throwback to one of my initial portfolio pieces (because this month has been all about the hustle) and is 2 – likely not going to dazzle you as much as an Electronic Performance Support System (EPSS) for removing the main landing gear of an aircraft.

The Concept

Create an interactive step graphic that trains users on a very important procedure. In this case, I chose to discuss the steps for bathing your cat. This is a very tricky procedure, so be especially cognizant of Step 3. Full Disclosure: Our cats are very good at cleaning themselves and we have never had to forego this procedure first-hand. Please let me know, in the comments, how you’ve fared in your attempts. I’ve heard that some cat’s need to be sedated; if this is the situation you’re faced with, and you find it challenging to administer pills to your feline, Bruce Graham has a lovely training module to help you with this problem.

The Method

For some reason, I really wanted to have a background image, so I sourced one from ColourLOVERS and modified the transparency. Then, I sought about creating some cute looking tabs and writing the procedural documentation for how to bathe a cat. I consulted WikiHow for these assistance, and they did not disappoint, providing me with many fantastic images to use within the module.

I tossed everything together and added triggers to my tabs, with each trigger displaying a layer. Images were called up within a new lightbox-esque (but not to be confused with an actual lightbox) layer, and Bob was my uncle.

The Result

To view the complete interaction and potentially save yourself a world of hurt (literally), click here.