Jackie Van Nice

E-Learning Goodness by Jackie Van Nice

E-Learning

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.

Can I GIF You My Reaction?

By 4 Comments

This week’s challenge is to use animated reaction GIFs for any e-learning topic you’d like, so I’m exploring my reactions to this e-learning challenge. Grab some popcorn and join me in the cheap seats.

#1. Should I Really Do An Entry This Week?

#2. What Could it Hurt, Right?

#3: What If Everyone Else Uses Up All of the Popcorn Reaction GIFs First?

#4: OK – This Is Stupid Fun.

#5: Maybe Ellie Will Do One!

#6: How Will David Ever Recap This?

Want to Add Animated GIFs to Your Posts?

I got all of these at Reaction GIFs. (Thanks for the link, David!) Here’s how you get them in your posts:

  1. Right click on the animated GIF you’d like to use and choose Copy Image URL (or Save Image As).
  2. In your blog post, go to insert an image as you normally would. Either choose to insert it from a URL and paste in the URL for the GIF you copied – or upload the GIF you saved.
  3. Tip: Bring it in at full size or the animation won’t work. You can always grab its handles and resize it after you’ve placed it.

That’s it! Have fun – and while you’re at it you may as well enter this week’s challenge!

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!)