Functional Prototypes (#85)

A prototype for Articulate's eLearning Challenge #85.

A prototype for Articulate’s eLearning Challenge #85.

For this eLearning Challenge, I didn’t really follow the rules. So my end product isn’t so much a functional prototype as a template.

David Anderson introduced the challenge like this:

It’s Monday morning and you just sat down with a potential client to discuss their safety training. The client is new to e-learning and wants to convert their existing classroom materials into online training. Because this is their first experience in e-learning, they’d like to first get a feel for how their content and activities will work as an online course.

Then he gave us a 192-slide PowerPoint presentation on Fall Protection! I didn’t know where to start.

There were several things I wanted to prove to the ‘client’:

  • How I could get all that information into an online course
  • How testing could work
  • What the course could look like

I let the challenge settle a little bit and peeked at what some others’ were doing. I liked the idea of taking an existing template and using it to speed-up the process. And I ended up with something similar to what Tracy Carroll used. (I hope she doesn’t mind!)

Navigation and marker detail on the welcome page.

Navigation and marker detail on the welcome page.

I learned last week about lightbox slides and thought that would be a good way to tuck away the legal stuff and extra resources. I used markers to point out specific features to my “client”.

A marker points to the Resources and Rights links, which open a menu and a lightbox respectively.

I used markers to explain various features throughout.

The image slider from Challenge #84 could present the photos and all the statistics cited in the course.

Then I got stuck in the rabbit hole of design, something we were told to avoid for this challenge. I edited the colours in the player, added a hidden navigation bar and changed up the feedback master. All good fun! I love this stuff!

Advanced color editing is selected to display a long list of customizable elements.

Modifying the player is more time-consuming that one expects!

The feedback master is shown.

The Feedback Master also took some time to master!

In this potential project, I imagined writing a number of excellent and challenging simulation-like questions. I’m convinced they work and may do more to save young construction workers from falls.

Click here for the working demo. Or download the Story file.

Lessons Learned in this Challenge:

  • Start with PowerPoint’s slide-sorter view to get a handle on the material and build an outline.
  • Navigation can be hidden with an on-hover event; built on the master slide(s) … no one’s using a tablet, are they?
  • Be careful with the feedback text boxes on the Feedback Master Slides; they don’t copy-and-paste well
  • A 50% transparency on a flat rectangle makes an elegant hover state.

The real work in this challenge was sorting through the information and making it engaging and informative. It also has to appeal to young men – the demographic most likely to be injured on job sites. Had I thought of it sooner, I would have made the design feature fast cars and dirt bikes!

The StoryView for the Fall Protection prototype.

The StoryView for the Fall Protection prototype.

UPDATE: A community member contacted me to ask how I had prepared the navigation bar for this sample. Here’s what I told him.

Since the navigation needs to appear on all slides, I made the trigger and layer on the Master Slide. The navigation bar itself is just a layer that appears.

To get the nav bar to appear, I created a rectangle with no border, and no fill (to keep it invisible), but with a trigger.

If I had to do it again, I would add an animation to the NavLayer and have it ‘fly in’ from the bottom, but quickly, so it doesn’t get annoying.

A screenshot in Articulate, explaining how I created the 'OnHover' navigation.

An explanation of how I created the ‘Hidden until Hovered Over’ navigation.