Jackie Van Nice

E-Learning Goodness by Jackie Van Nice

Visual Design

How Long Does It Take To Create E-Learning?

By 14 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week’s challenge is to share an instructional design cheat sheet, job aid, or reference you use in your work.

The Idea

The Chapman Alliance Study

The Chapman Alliance Study

I alllllllllways refer to this Chapman study on how long it takes to create e-learning every time someone approaches me about a project. Since that makes it my most-used reference piece by far, I thought I’d translate it into a zippy little interaction that might even be a tad easier to follow than the original.

The Design

Since the study is focusing on hours, I thought it would be smart to build it around the image of a clock.

Once I found a flat design clock I liked, I added Chapman’s three primary levels of e-learning design to the main slide and used layers to animate the hour estimates for each level onto the clock face itself.

After that I used lots of triggers to make the interaction as intuitive and user-friendly as possible, both visually and functionally, and added a lightboxed slide to provide more detail about the study that also links back to the original.

The Result

As much as I love the original info from Chapman, I’ll no doubt point to this one more. If you’d like to see it in action, you can start estimating your e-learning project hours right here!

Star Wars: The Droid Quiz Awakens

By 2 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week’s challenge is to do something related to Star Wars. Since it was completely open to interpretation and whim, I grabbed a whim and ran.

The Idea

After having seen Star Wars: The Force Awakens I decided I’d like to get to know the features of the droid BB-8 a little better. Once I had a handle on them, I made up this mini-quiz.

The Design

Beyond the images of BB-8 and the desert of Jakku, my primary responsibilities were to find a silly Star Wars font (thanks to Star Jedi at Dafont), make it match his outfit (thanks to the eyedropper tool in Storyline 2), and make everything move around a bit.

The Droid Quiz Result

Want to see how well you know BB-8 and Star Wars: The Force Awakens? I don’t know how much this could possibly help, but here’s my quickie quiz.

It’s Pantone Color-of-the-Year Bingo!

By 8 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week I took on two Articulate challenges: One featuring bingo, and one featuring Pantone’s new color(s) of the year.

The Idea

Pantone has been choosing a color of the year since 2000. I wanted to look back at all of them and make a game where you try to match each one with its name. Add the seductive allure of bingo and it’s “go” time.

The Inspiration Layout (Click to See Original Game)

The Inspiration Layout (Click to See Original Game)

The Design

Layout

David Anderson had supplied a few inspiration pieces in the bingo challenge, and I liked the way the LA Times laid out their Academy Awards bingo game. There was room on the side to add more info – or in my case quiz questions – in a nice, clean way.

Color Quiz Question

Color Quiz Question

Colors

Since Pantone’s current-year colors are Rose Quartz and Serenity – and since featuring them was part of the challenge – I only used shades and tints of those colors to build the game. The only other colors are the subjects of the quiz questions.

Quiz Question

To keep it as sleek as possible, I only posed one question at the beginning. That sentence, along with the easily recognizable bingo layout, explains the entire interaction and doubles as the question for each quiz choice.

Quiz Bluffs

Unfortunately, I found Pantone’s idea of cool color names to be a big snooze. Too bad, because that meant my bluffs needed to be pretty middle-of-the-road too. (Though I worked in a few to keep myself entertained.)

Sometimes It Takes a Spreadsheet

Sometimes It Takes a Spreadsheet

Building It

It’s built in Storyline 2 on one slide with roughly a gabillion layers. I used a spreadsheet to keep the details of each color (name, year, Pantone number, RGB and hex values, where I used them in the grid, etc.) easy to find. It also helped enormously when tracking each one and creating triggers.

Ready to Color Your World?

Give it a try! I predict a colorful Pantone “Bingo!” in your near future.

Select Image to Launch Demo

Select Image to Launch Demo

What People Love & Hate About E-Learning: Interactive Graphic

By 6 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week’s challenge is to create an interactive graphic based on a recent Articulate survey about what people love and hate about e-learning. So I did!

The Idea

The Original Infographic (Select Image to View)

The Original Infographic (Select Image to View)

Above all, I thought the biggest advantage of the interactive graphic would be to add a main menu so the user could quickly scan topics and jump to the details. It can be a struggle to scroll through a long graphic – especially on mobile devices – so the quick jump would be a plus.

The other thing I noticed was that even though the original infographic talks about love and hate, I wasn’t seeing much hate. So my other idea was to graphically represent that imbalance.

The Design

Ultimately I ended up designing it around two things: The idea and image of a scale to illustrate the imbalance of positive and negative survey results – and the idea and image of e-learning devices. After falling in love with a red vector scale, I let it determine part of the color scheme and most of the overall design aesthetic. That’s a pretty good scale.

I put the content detail on slide layers and let e-learning devices have a hand in presenting them.

The Influential Scale

The Influential Scale

Details On Layers

Details On Layers

Helpful Hands

Helpful Hands

Weighing the Results

If you’d like to see my interactive version of the survey results, you can enjoy them right here. And remember – if there’s something you don’t love about e-learning, you can be the change.

Select Image to Launch Demo

Select Image to Launch Demo