Context

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

December 11, 2015 By Jackie Van Nice 6 Comments

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)

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

Details On Layers

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

The Illustrated Man Gets Conversational

December 7, 2015 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

This week I combined two weekly challenges into one: One about showing conversations, and one about branching scenarios. Clearly a marriage made in e-learning heaven.

The Idea

I wanted to show simple in-person conversations that are clean, clear, and creative – then structure them around a branching scenario.

The Design

I had no idea what would happen in this one, so while waiting for inspiration I started to pull in some of Storyline’s built-in characters. I’d never designed with them before, so this felt somewhat radical. Luckily, that process sparked a story.

Conversational Color

The Conversations

I eschewed bubbles, boxes, and lines and simply placed the character’s dialogue next to the character. I also like to color-coordinate their text color with their clothes. It adds interest and helps distinguish who’s saying what.

Simple Location Indicators

The Settings

I stuck with one simple geometric background throughout and only tossed in the most minimal props or location indicators as needed. It helps keep you focused on the action.

The Branching Scenario

I kept this simple but not too predictable, since that’ll kill curiosity in a heartbeat. The feedback for each choice is to show you the results of your decisions, rather than telling you what’s right or wrong. Only when you get to the end of one of the branches will you get a nice little message all wrapped up in a bow. After all, we still need a training objective – er – I mean – resolution to the story, right?

See the Results of Your Decisions!

I’m trying not to give too much away about this one – but I like it a lot and hope you do, too. If you’d like to get to know an illustrated man* a little bit better, have a look right here.

*It’s not Bradbury’s, but his is sure good, too.

New! A Deliciously Frustrating E-Learning Cereal

November 7, 2015 By Jackie Van Nice 10 Comments

Click Image to Launch Demo – With Audio!

This week’s Articulate challenge is to create an e-learning themed cereal box, so I did my best to channel a bit of Toucan Sam and some Michael Allen and got to work.

The Idea

I started by brainstorming the usual nouns on cereal boxes: Flakes, crispies, crunch, smacks, loops, etc. Once I got to “loops” I drifted to thoughts of frustratingly locked-down e-learning navigation and came up with “Locked Navigation Loops” as my cereal.

The Design

The Navigation Police

For the visuals, I like the classic cartoon-character-on-the-cereal-box look, so my first search was for a perky prisoner. Once I found her, I grabbed an image of a cereal bowl and a cartoon cop who could enforce the rules and mixed them together with some fonts and other graphic elements in a big bowl of milk.

The audio seemed necessary to get the goofball cartoon cereal feel, so I added lots of sound effects and a lovely cartoon-y tune I found at AudioNautix.com.

Once I synced images and music, I was pretty much done. Oh – and I added some frustratingly pointless feedback since that’s the only kind I ever see when viewing e-learning courses with locked-down navigation. Call it an “homage”.

Enjoy a Little Lock-Up Time Right Now!

Here’s my cereal box demo in all of its cacophonic glory. I hope you like it!

Click Image to Launch Demo – With Audio!

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.

Seriously – How Do You Navigate This Course?

August 1, 2015 By Jackie Van Nice 3 Comments

Select Image to Launch Demo

Do you know how many times I’ve heard about a learner getting confused about course navigation? Close to zero. Nonetheless, organizations like to include instructions, and those instructions tend to get short shrift. So when David Anderson challenged us to get a little more creative with navigation intros – I was in.

The Idea

I wanted an approach that was simple and replicable; but unique enough to capture the learner’s attention. I hadn’t used photographic characters for awhile, so I grabbed one and riffed off of his lab coat to determine the topic.

Though my process was backwards, the idea is that you can theme your navigation instructions to match your course content. It makes it more fun and gets the learner ready for the topic.

The Design

I like Coolors’ navigation tutorial, so I played with their center-of-screen dashboard approach, which then gave my lab-coated gentleman the freedom to point out navigation elements on the rest of the screen.

Coolors’ Navigation Start

My Navigation Start

Coolors’ Navigation Navigation

My Navigation Navigation

I also made sure that if you choose to skip the navigation intro that you’re confronted with a nurse with some good advice, but your consequences are your own.

The Result

It’s simple, but still more interesting than any of the standard navigation instructions I’ve done. With more time I’d refine it, but this gives you the general idea.

If you’d like to navigate these white-coated waters, you can see it right here!

Select Image to Launch Demo