Front Slider

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

Getting Emoji-nal: Teaching Vocabulary

April 3, 2015 By Jackie Van Nice 6 Comments

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to create an interaction using emojis – or basically to use simple graphics in place of text.

The Idea: Vocabulary Practice

Anyone who has learned or taught languages knows pictures are indispensable for vocabulary practice, so I thought I’d create one with emojis.

I wanted it to be in Turkish, partly because it would be way cool and partly because I need the practice, but to save time I stuck with English.

The Design: Simple

I kept it emoji-simple. From layout to images to instructions it’s easy to figure out, easy to navigate, and easy to understand the teaching points.

It’s technically a drag-and-drop I made into a free practice activity. The feedback – even for incorrect answers – is designed to help you learn vocabulary, so I didn’t see the point of keeping score. Sometimes it’s just nice to play.

So Much More

There’s a ton more you could do with the concept, including adapting it to work on listening skills or writing skills rather than reading skills. Maybe I’ll get the chance to adapt it in other challenges down the road!

Give It A Try!

Ready to test your vocabulary skills? You can check out this emoji-nal little demo right here.

Select Image to Launch Demo

Using Toys in E-Learning: Employee Meeting

March 22, 2015 By Jackie Van Nice 16 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to use toys to help tell a story in e-learning. My toys were game, so we went for it.

It’s Just a Meeting

The Idea

The toys I grabbed for the challenge were a little funny-looking, so for contrast I put them into a perfectly serious staff meeting.

I exploited what might be their challenges if they really worked in an office, then built the learning points around that.

Over-the-Shoulder Shot

Issues in the Office

Image Production

I took still shots of each character and had to work at getting the right angles, lighting, images sizes, etc. It took a few tries, but I eventually got what I wanted. I especially like the over-the-shoulder and head-on shots.

Audio Production

Though I wrote the script, I decided to ask Dan Sweigert if he’d do the voices. Lucky for me, he did – and I recorded it directly into Storyline.

The Benefit of Using Toys

Even in a quick demo like this it’s easy to see that using toys to mimic real-life touchy situations makes it easier to address them, and adding humor never seems to hurt.

Time to Play!

Ready to see how this meeting went? You can attend it right here.

Select Image to Launch Demo

Make it a Game: Climb Heroes Mountain!

December 31, 2014 By Jackie Van Nice 17 Comments

Select Image to Launch Demo

When people are new to the Articulate E-Learning Heroes community I like to point out a few things on the site to help them get going. Even if you know something exists – the weekly challenges, for example – you might not know how to find it.

Make a Game of It!

I thought it’d be fun to create a game that gets newbies to explore the site and points out some of the best tools around to help them succeed in their jobs. I’m entering it into David Anderson’s gaming challenge where I already have one cold, foamy, refreshing entry – but can you ever have enough games?

Some Nifty Features

Here are some elements I used that you could include in any game or interaction to make it more fun, effective, and appealing.

Images That Looks Just Like the Site’s

A fully-realized and consistent theme: Since the topic is the ELH site, I tapped into its visual style and themes to create my own. I used the mountain on the ELH Discussions page and the happy campers in front of it to establish my camping and mountain-climbing theme. I also created pictogram images that mimic the look and feel of the site’s own images.
A game goal: The goal is to climb Heroes Mountain by taking on a series of challenges. Each challenge involves navigating the ELH site to find something of value.
Real-World Challenges & Motivation

Real-world motivation: Aligning your learner’s motivation with the game’s goals makes it involving from the start. My game character is new to e-learning and needs help in her job, just like lots of newcomers. What better motivation to learn about the helpful features of ELH?
Real-world decision making: In the game, you search for things on the site just like you would in real life. The only difference is feedback. If you’re headed in the right direction, feedback is delayed until you arrive at your goal. If you’re headed in the wrong direction, you learn more about the site and get a prompt to remind you of your goal.

Game Progress: Badges!

Game Progress: Some Mountain Climbing

Giving rewards and showing progress: After you meet each challenge, you earn a themed badge and your virtual stand-in climbs a little higher up the mountain. Seeing a goal and your progress towards it is always good motivation to keep going.
A satisfying result: Not only is there a “win” at the top of Heroes Mountain, but the game’s character also wins since meeting the challenges on the ELH site helped her become more successful in her job.

Ready to Make Your Own?

If you’d like to make your own game (and find lots of inspiring examples!) check out these game-specific ELH challenges: Create a Simple E-Learning Game, Steal This E-Learning Template, and E-Learning Games for Kids. Plus you can find lots of free templates to get started on the ELH site!

Happy new year – and happy climbing! You can make your way up Heroes Mountain right here.

How I Dolled Up Storyline’s Sliders

September 28, 2014 By Jackie Van Nice 20 Comments

Select Image to Launch Demo

If you’re a Storyline fan you probably know its latest release features sliders, and this week’s challenge is to make things slide all over the place.

The Idea

I’d originally used the paper doll try-different-outfits inspiration in a drag and drop challenge at a time I was doing uniform and safety gear training. Revisiting it with sliders sounded like fun, but this time I chucked the serious gear so I could just play with dolls.

The Images

Visual Design

I went with vintage paper doll images I found, then got busy removing the background and cutting them apart in PowerPoint.

To set the scene I used a modern house with vintage style. The interior background is a girl’s bedroom. Vintage candy shapes (root beer barrels, peppermints, and lemon drops) on the sliders also set the tone.

Three Sliders

Slider Design Steps

I created three sliders – one each for hats, outfits, and toys – all engineered the same way. This is how I did it in 8 pretty simple steps:

1. Added the slider: Insert > Controls > Slider. I chose the slimmest track style.

2. Added candy images to the thumb: Right click on the thumb > Format Shape > Picture or Texture Fill, then choose your image. The images will come in very small, but before clicking on anything else select Format > Size and increase the height and width as needed.

3. Formatted the tracks: With the slider selected, go to Slider Tools > Format and choose colors for your track fill and track border, then adjust the colors on your slider track hover states, if needed.

4. Set up the controls: With the slider selected, go to Slider Tools > Design. Here I renamed the default variable to “outfit_slider” and selected my preferred Update style. I wanted 5 slider positions: 0, 1, 2, 3, and 4 – which is why my Start selection says 0 and End says 4. The candy thumb is at the default position of 0, outfit one is at position 1, etc., and you progress between them in increments of 1 as indicated in the Step field.

5. Added slider images, states, and animation: I gave each image a state called Chosen, and for that state added the additional images I wanted to appear on the right, such as a dress on the little girl. I also added entrance and exit animations for those images on the Chosen state.

Trigger One: Display Chosen State

Trigger Two: Return to Normal State

6. Added slider triggers: For each slider item I created two triggers. One to display the Chosen state at the position I wanted it to appear, and one to return it to its Normal state.

Trigger for Sliding Sound Effect

7. Added a sliding sound effect: I wanted a sliding sound as you move between each item on the slider, so I added the audio file and created one trigger per slider.

Trigger for Incidental Sound Effects

8. Added incidental sound effects: For the puppy sound, for example, I simply added a trigger that fires when the state of that image is Chosen.

Time to Play!

If you’d like to put together a few nice outfits, have your audio ready and try the demo right here.

Select Image to Launch Demo