Characters

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.

E-Learning Avatars and Super Powers

March 18, 2018 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to show ways learners can select avatars to personalize a course, plus show how an avatar is carried over from a selection screen to a content screen.

Storyline 360 Eggplant

The Idea

I wanted to do something quick and easy by only using readily-available assets in Storyline 360. That led to playing with Storyline’s built-in characters (and an eggplant with character), then adding some customer service super powers for a bit more interest.

The Design

Visual Design

After playing with different characters and background images, I eventually arrived at a combo that gave me a color scheme I liked (purple, green, and orange), which I then used to create the rest of the screen elements. Oh – and the idea of mixing up character styles and species seemed way more interesting than pulling from one style.

Creating an Avatar Button Set

Avatar Selection Design

First, I placed the avatars in the visual context they’ll be seen in for the rest of the course. Being able to see their environment (a restaurant), and knowing the topic (customer service) helps inform the learner’s selection.

Then I used Storyline’s button set feature to make my avatars act like buttons. To create a button set, highlight the images you want to make into buttons, then right click and choose Button Set. When the learner clicks on an avatar after it’s been buttonized, it’ll automatically display a selected state, and only one can be selected at a time.

A Gentle Reminder

To give the learner a chance to play with their selections I added a Done button that lets them move forward when they’re ready. If they select Done before making a selection, a prompt pops up (built on a layer) as a reminder.

Carried-Over Avatar States

Avatar Carry-Over Design

To carry the avatar selection to the next screen I:

Created a true/false variable for each avatar. The initial value is false.
Added a trigger to the selection screen’s Done button to adjust the avatar’s variable to true if the state of the avatar is selected.
Created one image with a state for each avatar on the following screen. A trigger on this image changes its state to display the image of whichever avatar’s variable is true.

I designed the super power selection and carry-over in the same way.

Ready to Personalize Your Avatar and Super Power?

You can check it out right here.

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.

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

It’s Punctuation Tic-Tac-Toe!

July 5, 2015 By Jackie Van Nice 13 Comments

Select Image to Launch Demo

This week’s Articulate #ELHChallenge is to come up with an interaction that helps teach punctuation.

Update: Download the Free Template!

The Idea

I wanted to make some type of game I hadn’t tried before, and tic-tac-toe seemed relatively straightforward.

Personalized Punctuation Advisors

I also wanted to use the rest of the characters I used for this emoji challenge. The idea was to have each of them embody an element of punctuation and give their own example of correct and incorrect usage. Personalized punctuation advice couched in a bit of silliness seemed engaging to me – so I went with it.

The Design

The goal was to keep it simple and easy to play with. The board is laid out in front of you so you can pick any punctuation challenge you’d like and see your progress as you go.

Your aim may be to get tic-tac-toe (three correct answers in a row) and win; but it’s equally fun to play freely. That’s why I added a “Start Over” button on the main screen – so you can quickly clear the slate and start over.

The Game Board

The Punctuation Guide

I have to say that Storyline 2 made building the whole thing a relative snap, too. It was great. It’s one slide with 35 layers and a few states (plus many pieces and parts I added) – but engineering it to give the proper result once tic-tac-toe has been achieved was really simple.

Oh – and in the feedback for each question I linked to the appropriate page on The Punctuation Guide that David Anderson used as inspiration for the challenge. Thanks for finding it and for such a great challenge, David!

Try It Out!

Ready to test your punctuation prowess? Feel free to try it out right here.