E-Learning Design

Please Don’t Let Me Be Martha Stewart

February 17, 2014 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

With one eye on project deadlines and flights this week, I trained the other on goofing off with Articulate’s E-Learning Heroes challenge to bring the Inc.com What Kind of Leader Are You? infographic to life by interpreting it as a branching scenario.

The Original Infographic

Approach

Since this is a personality assessment that briefly flirts with a teaching moment, I chose not to set up full-blown scenarios with characters to put each decision point in context. It would be fun; but it would also seem kind of silly to spend all that time illustrating such abstract concepts when the only world that matters here is the user’s internal one.

I decided the cleanest and most expeditious way to bring some life and abbreviated context to this interaction was through good use of color, text, animation, and simple images.

Color

Since the world is flat these days, I snagged some flat design colors from one of Damon Nofar’s SlideShare presentations.

Text & Animation

I suppose Damon decided he could inspire me with text, too, which must be why he posted this presentation. (And I now see he posted another one about using typography a few hours ago where he lays out a number of principles I used in my piece – but I hadn’t seen that one.)

In the end, Swiss921 BT made me happy, so that’s my title font. I threw in some Helvetica in honor of Damon’s devotion to it; though I’m more of a Calibri fan. (So there’s some of that, too.)

I decided that pulling key words and making them stand out would be the easiest way to let the user quickly scan the decision point.

I also messed with the keywords so they’re more expressive – whether changing the word itself (using lots of extra “a”s in “relax”), changing the type layout (so “interact’s” letters get all inter-mingly), and so on. I also used animation. My favorite is when the word “direction” comes in backwards, then quickly realizes its mistake and comes in forwards. But that’s just me.

Simple Images

I originally envisioned hand-drawn white line drawings to soften and balance the strong font I’d chosen, and gave Microsoft clipart a quick search.

I started by looking for a mountain image to illustrate the idea of a challenge. When I found one in Microsoft Clipart Style #1306, and took a quick look to see if the rest of the style could work, I had my images.

I wanted to take out, or at least adjust, the colors, but given time constraints I just made a few alterations to specific images (like the clouds that float across the sky at the beginning) and left it at that.

Devices and Navigation

One Possible Result

This piece seemed to want to be a little app, so I had the iPad in mind as I designed it. Works just fine.

I kept navigation simple, since it’s really just a one-way path.

Audio

I would love to put in audio (sound effects, etc.), but no time. Maybe I’ll add some later.

See the Result!

You can see this guy (and find out what kind of leader you are) right here!

No One Loves The “Next” Button Until It’s Gone

January 25, 2014 By Jackie Van Nice 2 Comments

Select Image to Launch Demo

I haven’t participated in many (OK – one) of the weekly design challenges that David Anderson puts out to the Articulate community, usually because of looming deadlines. But if so many other busy designers are doing it, what’s my deal? So this week, casting all current deadlines to the wind, I took up David’s gauntlet and spent my Friday night Storylining away.

This week’s Articulate challenge is based on his blog post about hiding the “next” button until the learner completes a challenge about what’s just been presented. (Or it can be used as a sort of pre-test to unlock the “next” button and allow the learner to skip ahead.)

From an instructional design perspective it would have to be used incredibly judiciously; though if sprinkled in a few key places in just the right course, it could be effective. But this challenge was about the technical aspects of building it, so that’s what I focused on.

My Example

I chose the HR Audit topic because it seemed appropriately dry. I’m picturing a nodding-off learner who’s about to get a disappearing-“next”-button wake-up call.

Basically, at the end of the slide I ask the learner a question about what they just saw. Then I ask them to enter a certain number they just saw. The “next” button is visible but disabled. If their answer is incorrect, they get a message asking them to try again, or to review the slide content. Once they get it right, the “next” button is enabled and they go on to their glorious reward in the final slide.

The Appropriately Dry Content

The Disabled Next Button

The Enabled Next Button

Your Glorious Reward

The Technical Side

David wanted a text-based entry field for the learner to complete in order to unlock the “next” button, so in Storyline that means adding a data entry field. I’d never had a reason to use them before, so I used a post on the E-Learning Heroes site from Jeanette Brooks that explained how to set them up. It would help to have some experience with variables, but it’s probably not necessary for the average intrepid Storyline user.

After that it was all about the layers and states and triggers. I won’t get into extreme detail, but on the main slide I added a trigger so that at the end of the timeline it would show a layer. At the end of the timeline I also animated out any potential answers on the slide so they weren’t visible.

On the layer I put the question, the data entry field, the “next” button (set to an initial state of “disabled”), a line of text feedback if the answer is incorrect (set to an initial state of “invisible”), and a “review” button so they could see the slide content again if the answer is incorrect (also set to an initial state of “invisible”.) Then I got all trigger-happy until it behaved properly.

Select Image to Launch Demo

See it Here!

Test your ability to withstand the pressure of HR Audit prep right here!

It’s a Solution! It’s a Fest! It’s SolutionFest!

February 7, 2013 By Jackie Van Nice 1 Comment

Select Image to See Sample

I’m excited to share one of my projects at the E-Learning Guild’s Learning Solutions Conference as part of SolutionFest next month. Here’s a summary of the problem, my solution, and the result – plus you can see the project I’ll be sharing.

The Problem

My client needed to train new employees on their sales mobility software and hardware. The existing online training was abysmal, featuring:

No audio and the whiz-bang pacing of a plow horse.
No images beyond software screen captures and bullet points.
No context or instruction to indicate why, when, or how the software should be used.
No user control, no flexibility for different levels of knowledge, no opportunities for learners to practice, and no opportunities to test.

The Solution

I strove to create upside-down world as compared to that training.

Context was my focus. If I could show learners when and how the software and hardware should be used, I’d be half way there. We show how the handheld integrates into the sales rep’s 24-hour day, so you see him (and his handheld) going home at night, sleeping, waking up, driving around, meeting his boss in the field, finding sales leads, calling on prospects, making sales, and more. In the introductory lessons, where a real-life sales rep would be taught by his or her manager, you see the sales rep being taught by his or her manager.

Design carried the rest of the load. I wanted navigation designed for user control, flexibility, and free practice – and visual design that was attractive, playful, and kept the learner focused on what was important. Both types of design were intended to keep learners engaged and motivated.

Tools I used included all programs in Articulate Studio ‘09 (Presenter was a client requirement), and PowerPoint 2010. The other client requirement was to design for delivery via LMS for learners on PCs, and, of course, to design and develop on a budget.

The Result

This course has just gone into full release, but the managers and trainers who have reviewed it have raved. (In a good way.) Many of them didn’t even realize that certain features existed on their Handhelds until they went through this course.

Their expectation is that employees will be far better prepared to work with their sales mobility handhelds by going through this training, and that going back to refresh their knowledge about a particular topic will also be easy to do.

A Sneak Peek

If you’d like to see what I’ll be sharing, you can see it right here!

E-Learning Design

Approach

Color

Text & Animation

Simple Images

Devices and Navigation

Audio

See the Result!

My Example

The Technical Side

See it Here!

The Problem

The Solution

The Result

Read More About How I Designed It

A Sneak Peek