Context

Learning to Spend Money the Yummy Way

November 17, 2014 By Jackie Van Nice 12 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to create a learning game for kids. What’s not to like about this one?

Grandma’s Got Some Money

The Idea

The only problem was coming up with an idea. I messed around with math and word games, then starting building a camping game, but wasn’t happy with any of it.

I finally realized that unless the game emulated a situation where a kid really needed to apply some knowledge, I wasn’t going to like it and neither would the kid. This scenario reminds me of my wonderful brother Bryan who was always finding treasures and wondering if he had enough money to buy them, but it applies to any kid – large or small.

Flat, Mobile-Friendly, Kid-Friendly Design

The Interaction

The Intro: I wanted to ease you into the situation rather than unceremoniously drop you at a cupcake shop. Grandma supplies the money and the mission. The rest is up to you.

The Design: I kept the design pretty flat. I also wanted it to be playable on a tablet, so kept it simple and clean. Using a drag-and-drop, avoiding hover states, and keeping images large enough to easily tap and move with fingers were also part of my mobile-friendly plan.

The Challenge: I didn’t want there to be an on-screen calculator that showed how much money would be left after each cupcake was chosen. Those don’t exist in real cupcake shops, so why supply one here?

My Wish List: What I would love to do is supply feedback that goes over the math of what they just spent and ask them how much change they have left. I’d also love to make it so that if they chose to spend a smaller amount – buying just one cupcake, for example – they could save that money and take it with them to the next challenge. I’d want them to go to the movies, a fast food restaurant, an arcade, etc., and be met with different challenges in each location.

Too Much to Mention: There’s lots more that went into this one – from the variables and conditional triggers to the images, fonts, and pictograms – but if I go into all that we’d just be burning daylight, and you need to go buy some cupcakes! (But feel free to ask me questions.)

Go Buy Cupcakes!

Have fun spending Grandma’s money on a little cake and frosting right here.

Select Image to Launch Demo

Preventing Workplace Violence Holiday-Style!

November 4, 2014 By Jackie Van Nice 12 Comments

Select Image to Launch Demo

Our Protagonist

This week David Anderson challenged us to create a scenario about preventing workplace violence.

The Idea

Addressing the topic of violence comes to me about as naturally as learning Hungarian, so I put this challenge aside for awhile.

While organizing files a bit later, I stumbled across these cute-as-a-button holiday images and decided to challenge myself to use them – exactly as they are – for the challenge. The snowman and gingerbread man would be my characters, and I wouldn’t let myself manipulate or change them.

The Scene of the Crime

The Scenario

Since Christmas trees were part of this set, I opted to have the snowman run a Christmas tree lot and have the gingerbread man pull a heist. The only weapon-like image I had was a hatchet, so it became a hatchet job.

You Make the Decisions

You, as the learner, choose how to respond. In both the positive and negative outcomes you’re given tips to help you successfully cope with the situation before trying it again with different choices, giving you a safe and effective way to learn and practice the concepts.

Try it Out!

Do you know how to handle tough times on a Christmas tree lot? Try it right here and find out! You might even have a little gingerbread-themed fun while you’re at it.

Dating Zombies as a Survival Strategy

October 19, 2014 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This week’s creepy-yet-practical Articulate challenge is to put together something that will help us prepare for – and survive – the upcoming Zombie Apocalypse. My idea may not have the best success rate, but it’s all I’ve got.

The Idea

Zombie

Sticker

Inspiration

It started with some dollar store scratch-n-sniff zombie stickers. (I haven’t been curious enough to find out what zombies smell like yet.) But I started to notice categories (food, drink) and sketched out an interaction where a perky person was doing zombie market research. When outcomes for that seemed too limited, I came up with the dating idea.

Creepy Setting — Perky Person

I knew contrast would be key. Lovely, safe, familiar things needed to be set in high relief against their opposites; hence the choices for music, fonts, script, people, food, drink, and everything else.

Tough Choices

The Interaction

Theme

It’s all bad-horror-movie inspired, including the intro with that awesome True Crimes font. Add some of Storyline 2’s new animations and it’s a pretty good title screen.

Slider

This time I filled the thumb with an image of a zombie hand and used no visible track. You slide and release the hand to choose, which seems intuitive. The only downside of using the slide-and-release option was that when I published to HTML5 it treated triggers as though they were part of a while-slider-is-dragged version – so I republished without HTML5.

Options & Outcomes

There are 3 possible outcomes. One based on zombie choices, one based on my own personal choices (largely unlike zombie ones; though lines get blurred in a couple of categories), and one somewhere in between.

Click Image to Launch Demo

Try it Out!

Who’s your perfect match? Give it a try and find out… if you DARE.

Ker-thwack! Fighting Harassment Comic Book Style

August 26, 2014 By Jackie Van Nice 5 Comments

Select Image to Launch Demo

I’m so excited! Today I completed the entire first year of Articulate’s E-Learning Heroes challenges – all 48 of them! I started participating about 5 months into the challenge year so there were a lot to make up, but I did it. Before collapsing I’ll share one of my favorites I uncovered back at #11: Comic Style Themes for E-Learning.

Figuring Out the Style

I don’t know much about comic books and didn’t have a clue how to handle this challenge, but figured it out the same way I did the interactive resume one. I searched for comic books on Pinterest, pinned a couple of things, then took in the rest. That made it easy to assess the approach and style and I got the gist very quickly.

How About Harassment?

I thought about courses I’ve done that I could adapt, and harassment seemed like just the ticket. I already had the material and characters in place; I just needed to change the style and ramp up the drama.

Colors & Fonts

The color palette came from the outfits of the characters on the cover. Add in the classic yellow box for narration, and you’re all set. The fonts were free from Dafont: That great title font is Feast of Flesh BB and the paragraph font is Comic Book.

Comic Book Fonts

Before & After

Here are a couple of screens from this harassment course I did a few years back. You can see how I adapted them to the comic book demo. You can also see that the comic book style gave me an acceptable way to make it more personal and cut to the chase more quickly and with greater emotional impact.

“Before” Screen

“After” Screen

Next Time

Given more time I’d have loved to add in music, sound effects, and background images; but as a quick learning exercise I’m pretty happy with it. Fortunately David Anderson promises he’ll have another comic book challenge coming up in the new challenge year. (Ka-zam!!!)

Here it Is!

If you’d like to check out this quick comic-book style demo, it’s right here.

A Radiantly Delicious Template

August 17, 2014 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This Articulate challenge is about using Pantone’s color of the year, Radiant Orchid, to create a simple e-learning template. I didn’t have a clue about how to approach this, but that’s normal, so I jumped in anyway.

Design Inspiration

I wanted to brainstorm something in this color that would have meaning to me. Whether it’s the vegan thing or that it’s summertime and I get to eat lots of them right now, I quickly came up with purple fruits and vegetables.

I planned to find a character dressed in a similar color, if possible, and got lucky to find one dressed as a waitress. I reasoned she’d probably work at a cafe that only serves purple produce, and the rest is history.

Color, Tints, and Shades

I stayed pretty true to the palette. The only thing I did that was slightly different was to make the player color relatively transparent, and the hover states on the menu items are also slightly transparent.

I tried to order the fruits and vegetables to mirror the shade differences on the menu items. They’re both darkest at the top of the screen and lightest at the bottom.

See it in Action!

Feel free to take a look at the radiance right here, and don’t let the waitress get you down. She hasn’t eaten her vegetables today.

Select Image to Launch Demo