Jackie Van Nice

E-Learning Goodness by Jackie Van Nice

E-Learning Design

Turkey Needs Photo Sliders!*

By Leave a Comment

Select Image to Launch Demo

Select Image to Launch Demo

Blue Mosque, Istanbul

Blue Mosque, Istanbul

Fethiye, Turkey

Harbor, Fethiye

This week’s challenge is to create a photo slider. I’d never made one before, but with Storyline 2 and a few photos in hand, I was ready!

The Idea

To make the slider I trotted out some pics I took in Turkey. I wanted the demo to be simple, invite exploration, and be self-explanatory.

The Design

To establish the scene I started with an overview map of Turkey with my two photo locations highlighted.

I wanted the user to be able to see the topics of the photos up front so it’s easy to get a quick overview of the content and go directly to whatever they’d like.

Color provides the visual cue to tell you where you are. The title (Turkey), location (Map, Istanbul, or Fethiye) and the slider thumb all change color in unison depending on what you’re viewing.

I’m actually quite happy with the idea and the effect. It’s subtle in this demo, but I’d love to use it again.

Ready for Some Turkey?

You can see the demo right here!

*See: Mars Needs Women. These things happen after a long day.

Working Together to Create E-Learning

By 6 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week’s challenge is to show how you create online training. The process of how I work with clients is something I’m always having to explain, so it’s about time I added a quick explanation to my site.

Who Does What?

David Anderson suggested we could use the helpful post How to Create an Online Course in 7 Simple Steps as a launching point if we’d like. That process is quite similar to mine, but mine reflects exactly how I work and shows which steps I perform and which ones my clients perform.

My Steps

These are the steps. You’ll find more details in the demo – and you can see them written out on this page. It’s an abbreviated list since it’s only meant to be a quick (yet useful) overview. Each step can be an entire world unto itself:

  1. Set Goals

  2. Set Content

  3. Design It

  4. Storyboard It

  5. Build It

  6. Deliver It

  7. Evaluate It

See it in Action!

Here’s my e-learning process succinctly explained.

Select Image to Launch Demo

Select Image to Launch Demo

Checking Out Some Ergonomics

By 2 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week’s Articulate challenge is to create an ergonomics training demo, so I sat up a little straighter and started brainstorming.

The Idea

I usually see ergonomic guidelines for sitting at a computer or lifting boxes, and wanted to find something different. I had some entertaining ideas, but then I realized the challenge comes down to images. With more time I could make my own, but it’s not that kind of week.

OSHA to the Rescue!

Luckily for me, after endless searching, I found a less-traveled topic and good images at OSHA. I included the full document as an attachment in the demo.

OSHA Ergonomic Guidelines

OSHA Ergonomic Guidelines for Retail Grocery Stores

OSHA Grocery Store Ergonomics

OSHA Grocery Store Ergonomics

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

The Design

I kept it simple and let the images be the stars. It actually took me quite awhile to make all of the design decisions – (layout, what to present, how much to present, how to present it, colors, navigation, hover states, player choices, and on and on) – so though it’s simple, it took time.

See The Result!

What do grocery clerks’ toes really need? Check out the demo to find out!

Select Image to Launch Demo

Select Image to Launch Demo

Why Flies Should Pay Attention to Science

By 8 Comments

Select Image to Launch Demo

Select Image to Launch Demo

This week’s Articulate challenge is to create a science-related interaction, so I legged it to my desk and started spinning a plan.

Web Inspiration

I wanted a simple topic and found inspiration on the Everyday Mysteries/Fun Science Facts page of the Library of Congress. “How do spiders avoid getting tangled in their own webs?”  seemed like a fair question, so I brainstormed from there.

The Library of Congress Has Questions

The Library of Congress Has Questions

Creating The Spider Slider

Visual Design

It had to be inviting enough to get you into the topic, so I went with a good-quality image with a color scheme I liked. All colors came from the photo using Storyline’s eyedropper tool.

Instructional Design

How can I pique your interest enough to get you to check out the content? By making you the fly. Not unlike my golfer safety course, you’re going to pay more attention if you think you might get eaten. It’s Motivation 101.

With more time I would have shown you your fly self (you’re already familiar with your fly self – but I mean detailed visuals of you as an actual fly), used motion paths to zip you around, and embedded more content – but this is a quick version to give you a sense of the approach.

Storyline Design

It’s a slider done in Storyline 2. It’s one slide and each slider position reveals a slide layer. Add in some animations and transitions and it’s a quick, clean way to present information. One of many reasons to love Storyline 2’s sliders.

Will You Click Into My Demo?*

Watch your step and enjoy it right here.

*Homage to Mary Howitt’s poem The Spider and the Fly. (Here’s a nice reading of it!)

Getting Emoji-nal: Teaching Vocabulary

By 6 Comments

Select Image to Launch Demo

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.

Pear 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.

WatermelonI 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

AppleI 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

Select Image to Launch Demo