Emotional Engagement

The Challenge of Making Progress: Refreshing Your Online E-Learning Demos

April 17, 2022 By Jackie Van Nice 2 Comments

This week’s challenge is to create a progress indicator to display learner status, and this time it’s personal.

The Idea

As a recent learner on the topic of why I should bother to refresh my own e-learning demos, I thought I’d share a progress indicator that ever-so-clearly showed me my own learner status. If you’d like, you can read about that journey right here, but the idea is simple.

I wanted to show an e-learning designer whose online demos have gradually disappeared because the files have not been updated and republished.

The Design

The design is clean and minimal. An e-learning designer represents the learner and conveys a bit of the emotion of it all. I used one of Storyline’s modern illustrated characters, which was easy and saved time. The color palette is based on her outfit.

The Progress Indicator(s)

The starting point of the main progress indicator is what I experienced in real life: A series of online demos that no longer play. As the learner makes progress towards learning what to do to resolve the issue, the demos begin to become functional again.

A secondary progress indicator is the list of recommended steps that start to appear as you answer each question correctly.

The Result

Ready to make all that pain go away and refresh some e-learning demos? You can take this one for a spin right here.

Escape Room Game: When Birthday Parties Go Wrong

May 2, 2018 By Jackie Van Nice 17 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to create an escape-room-style game. (Scary!)

Party Equipment

The Idea

My first escape idea was going to have you desperately trying to catch your international flight before it took off, but the mega-talented Jodi Sansone beat me to it (great minds) and did a lovely job, so it was back to the drawing board. In the end I came up with the idea of frantically trying to make a last-minute birthday cake for a little girl’s birthday party: Let the terror begin.

The Design

Images

My first step was was to build a vector kitchen. As the days went by I couldn’t help but wonder if I could have saved time and energy by building a real kitchen.

The Kitchen Stage

These are mostly flat design vector images. I pulled a few from the 360 Content Library as icons or illustrations and manipulated their size, shape, and/or color (juicer, grinder, a few objects on the results screen, maybe the measuring cup… it’s all kind of a blur at this point), but I purchased most and manipulated them in Adobe Illustrator. The focus is on the table and mixing bowl in the foreground.

The Game

The Birthday Girl

I wanted three outcomes:

Success: You got the right ingredients in the bowl in the allotted time and achieved the desired result.
Failure: Your time ran out and things didn’t end well.
Keep going and try again: You put an incorrect ingredient in the bowl and have to dump out the bowl and start over, but the timer is still running.

The Timer

Update: I’ve made the timer available as a free download right here! The issue was the timer and finding a way to give it a two-minute duration that I could reliably start, stop, and restart. Very long story short – after trying lots of options I needed to design and build something quickly, so I winged it with an incredibly simple animated timer.

Timer recipe:

1 two-minute-long ticking sound effect
1 timer ding sound effect
1 image of a kitchen timer with a white face
1 inserted yellow circle shape
1 inserted red circle shape

Superimpose the yellow and red circles on the timer face, in that order, and give each one a 59-second wheel entrance animation. Place the red circle so it starts at the 59-second mark on the timeline. The clock and yellow circle start at the beginning of the timeline, along with the ticking sound effect. The ticking will end when you trigger the timer ding to go off at the end of the 2 minutes, at which point you could jump to a layer or another slide or whatever you’d like to do.

Once in action you’ll see the yellow circle animating in for the first minute, turning the face from white to yellow. In the second minute you’ll see it go from yellow to red, letting you know you’d better get that cake in the oven.

In this game the timer helps increase the sense of urgency, looks flat and cute, and serves its purpose.

The Drag-and-Drop

In the end, this was pretty straightforward. There are three items that require a two-step drop process before they can be used successfully, but you’ll find written hints to give you a clue about what to do and every item is labeled if you tap on it. Searching for clues and things you can use is all part of the game!

The Result

Ready to make a cake for the birthday girl? Grab an apron and make it happen!

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.

Santa Likes Switching Things Up, Too!

December 6, 2015 By Jackie Van Nice 11 Comments

Select Image to Launch Demo (With Audio!)

This week’s Articulate challenge is to come up with creative ways to use buttons, toggles, and/or switches. I’ve had this one in the works so long that it finally morphed into a holiday challenge!

One Flat Angel

The Idea

I wanted to use switches to make a customizable greeting card that gives you a good number of options to play with.

The Design

For the visual design I wanted to keep it flat and simple, so that was pretty easy.

For the functional design I went with 3-way switches since I wanted there to be two options for every category – in addition to being able to start with and choose a neutral position. Making it a 3-way toggle seemed too confusing from the user perspective, so I went for the clarity of a switch instead.

State Changes Let You Customize the Background

It’s All States: I built the entire interaction on one slide with no layers. Everything that moves, changes, or plays does so in response to a state change.

Free Images & Music: The freebies I used this week are from flaticon.com, for the little switch icons, and audionautix.com for the music.

The Jolly Result

If you’d like to customize your card, be prepared for audio and give it a try right here! Happy holidays!

Select Image to Launch Demo (With Audio!)

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!