Technical Training

Making a Simple Prototype

August 4, 2015 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s challenge is to create a functional prototype of a course using existing OSHA fall prevention content, so I whipped up some stick figures and headed for the job site.

The Idea

Original Content

David Anderson gave us a 194-slide PowerPoint presentation to use as our source material, the idea being to choose a few slides to work with. I chose a section about preventing falls involving floor holes.

My goal was to focus on the instructional design approach, basic layout, and functional design (as opposed to visual design) to show how I’d approach and design the entire course.

The Design

The Process at the Point of Need

Naturally I wanted to start with a compelling scene featuring the learner as the protagonist. After adding proper context and a scenario where the learner would need to apply the information being presented, we’re off and running.

Once the problem was established, I was able to present the basic structure of this mini-course – the steps required to deal with the problem – at a point of need to give the learner a reason to want to find out what to do next.

A Real-World Challenge

At each step I then presented a simple challenge to roughly approximate what they would need to do in a real-life situation. I didn’t bother with up-front content presentation, so each challenge requires the learner to use his or her predictive abilities to ponder, guess, and explore the options. I’d call it Engagement 101.

This approach means that feedback (in addition to the scenario itself) needs to provide the information the learner needs. I kept the feedback brief and subtle in this demo, but would use more detail in the actual course.

The Result

It’s a simple and straightforward prototype that shows you exactly how I’d approach the content. The visuals and details to be added later are – compared to this – the easy part.

David wanted us to spend an hour or two on this, but for me I can’t imagine designing a course approach, layout, and basic functionality in that amount of time; though I certainly admire anyone who can. Let’s just say this took longer.

If you’d like to enjoy it in all of its stick figure glory, you can start preventing falls right here.

Shooting Your Own E-Learning Background Images

August 16, 2014 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This Articulate challenge is to create your own background images. The idea is to plan your shots, shoot photos, then manipulate them to work in your project.

The Project

I wanted to share a software training piece I’d created at the eLearning Guild’s SolutionFest, but had to change both the branding and the industry before I could. That involved a lot of new development, including new background images and some video. Time for a photo shoot!

My Shot List

I scouted out a nearby business park and showed up with my shot list in hand. I’ll only share a couple of them in this post, but the shots I wanted and got were:

From the parking lot looking back at the office building with my vehicle in plain view in the center.
From the office building looking out to the parking lot with a field in the background.
Looking down the alley of office park building back doors, plus some closer shots of the doors.
A stop sign at the end of the alleyway.
A video focused on the stop sign, then quickly panning down the alley and back.

Image Manipulation

For the still images I cropped and manipulated them to match the style of the rest of the course, which I’d designed to de-emphasize the background to make it easier to focus on the content. Since I developed this in Articulate Studio ’09 it was quick and easy to use the PowerPoint image formatting options. I used a tan color and the “pastels smooth” artistic effect.

Shot #1: From Parking Lot to Building

For this shot I cropped the image so that the vehicle was easily visible between the characters so I could add the company logo to the door.

Shot #1: Original

Shot #1: Used in the Course

Shot #2: From Office to Parking Lot and Field

I wanted this shot to be very simple, with just a hint of parking lot stripes and nothing else to act as a distraction.

Shot #2: Original

Shot #2: Used in the Course

See The Whole Thing!

If you’d like to see the entire demo as I showed it at SolutionFest, which used all of the other shots on my list, you can view it right here. If you’d like to learn more about how I designed this project, all of the details are right here!

Call Center Software Training

August 16, 2014 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to share ideas for call center training, so I shared a sample of call center software training I did awhile back.

Context Included

In the original I included scenes to demonstrate why the customer would be calling and why it’s so critical that you’d be able to help.

Since this is a re-branded and re-industried piece it would take too long to recreate all of that, but to give you a sense of that approach I included an illustration of the lead source presentation. Beats a bulleted list any day.

More Than a Screen

The other idea was to wrap a little bit of context and interest around what would otherwise be a featureless computer screen. It had to be simple, so I just carried the characters right onto the screen.

See it in Action!

Though it’s a small sample, you’ll get the idea. The voiceover has been removed, but the transcript is in the player if you’d like to see it. Here it is!

Does Context Matter? Here’s a Before & After

May 4, 2014 By Jackie Van Nice 4 Comments

Before and After Example: Software Training

David Anderson’s Articulate challenge last week was to create an example of “bad” e-learning, and this week it’s time to turn “bad” into “good”. He wanted short, focused examples – so I chose a couple of screens and focused on context. The “before” is from a client, the “after” is from the lesson I created for the client.

What’s Context?

My first question in every new project is: “How will the learner use this information in the real world?” Then I try to design the piece from the learner’s post-course real-world point of view to show them why they’ll care about it and when where and how it’s going to come in handy. Using effective context can add lot of interest and learner motivation, too.

The Bad E-Learning “Before” – Where’s the Context?

This client had two “before” versions of this training. The learner is a salesperson who needs to know how to use the photo options on his mobile sales device. The first “before” version used the “show me, try me, test me” approach. Both versions were real and both went live.

Bad-E-Learning-Inspired Mimosa

The Show-Me-Try-Me-Test-Me Debacle

How I wish I could show you this one! It was done in Captivate (not Captivate’s fault), navigation was completely locked down, the pace was crazy slow, there was no intro or context, and all you saw was the computer screen with a mouse slowly moving around and the occasional text box popping up with cryptic information. Whenever you thought it was your turn to “try” it, it wasn’t.

It was as satisfying and enjoyable as using a voice-response phone system when the robo operator can’t understand anything you’re saying. I could only make it through two or three minutes of this course before I had to literally hang up on it and figuratively go have a mimosa on the veranda to compose myself.

The “Before” Training

The Slide-With-Animated-Text-Box Version

The other “before” version is still bad, but you’re never under the delusion that your input is desired or needed and you have a little freedom of navigation, so it’s less offensive. As training, it’s just animated software documentation. It’s context-free and a big snooze, jam-packed with information you’d never be able to retain when presented like this.

The Good E-Learning “After” – There’s the Context!

One Little Hitch

In the real course I teach the salesperson to use the camera during the sales process where they really need it. Since I can’t show you anything about their sales process in this example, I had to get creative.

Select Image to Launch “After” Demo

Plan “B”

Since a manager often takes a new salesperson out into the parking lot to introduce him to the basics of the newly-issued device, that’s the context I used. I knew learners would glaze over when hearing about sexy things like “white balance adjustments”, so I tried to think of a context in which photo adjustments in the parking lot with the manager would have meaning.

I came up with the idea of the salesperson taking practice shots of his manager to show what can go wrong when taking a photo, and then showing him how to make photo adjustments so his manager looks better. (There’s some motivation!) Putting the manager in silly poses added some much-needed humor, too. All together, it brought some context and emotional engagement to a very dry topic.

Before vs. After

Did context help? In reality the client’s salespeople and managers love this course. They find it extremely effective as an introduction to the device, and since it’s made up of many smaller lessons, it’s easy to use as a refresher, too. In case you’re interested, here’s how I designed the course. I even showed it at SolutionFest last year!

What Do I Think of Storyline? Well, Since You Asked…

March 30, 2014 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This week’s E-Learning Heroes Challenge is to come up with a “Top 10” list of things you’d tell someone about Storyline. You can collect your favorite resource links and curate them any way you’d like.

I basically took everything that I normally say to someone who asks me about Storyline, put it all together with appropriate links, and tied a bow on it. (Not unlike last week’s challenge where I did the same for what I tell future freelancers.)

Main Menu

The Design

One advantage of the gallery layout on my blog is that I can instantly see what sort of design I should do to contrast with my recent work. Since my last two entries haven’t had vibrant color palettes, and since spring is officially here, I went for bright and springy with a little bit of silliness and a little bit of elegance.

I also didn’t want a main menu with squares or buttons that linked to the 10 points. I wanted the menu to be a creative, vibrant, graphic embodiment of the theme. Once I made that decision, the idea for the springing-up flowers came easily.

Content Page #2

Main Menu Flowers: I wanted flower shapes that I could fill with photo captures from their related content pages. So I took out my trusty Wacom tablet and started drawing the basic outlines of the flowers, stems, and leaves. I did it in Storyline by going to Insert > Shape > Lines > Scribble and drew them right on the slide.

Then I adjusted the outline weight and color and did a picture background fill for each shape using a tight capture from each of the larger flower photos.

To make the flowers pop in their hover states, I increased the weight of the flower’s outline by a pixel or two, and increased the size of each flower by about 4 pixels in width and height.

Content Page #5

Audio: The sound effects for the flowers are two different sounds on top of each other. One’s a pop and one’s a spring. The singing birds are a piece of audio that I looped. I knew it was possible, but had never done it before. A quick Google search took me to this simple how-to. (Thanks, David!)

Content Page Colors: To get colors for my text, fills, and outlines that went perfectly with the flower images, I used the heck out of the eyedropper tool.

Photos: They’re all from Microsoft Clipart. I wanted big, clean, bold, colorful images.

Fonts: I’ve used the title font, Blue Chucks, a couple of times lately. Same with the paragraph font Copse. When you’re a cute font, you’re gonna get used.

Content Page #9

The Content

It is what it is! This is what I tell people who ask, and these are the resources I direct them to.

The Finished Product

You can see it in all of its springy loveliness right here.