Blog Post

E-Learning Challenges
2 MIN READ

Interactive Screenshots for Online Training #26

DavidAnderson's avatar
DavidAnderson
Staff
11 years ago

E-Learning Challenge #26

To everyone who shared a demo, template, or idea in one or more of the challenges, I want to say a huge heartfelt “thank you.” The amount of creativity and generosity in this community is truly amazing.

At the two-day workshop Tom and I did this week in Phoenix, I was reminded that a lot of you create online training around documents, charts, and, of course, software systems. After talking with some of the folks who attended, I realized we should do more around this important category of e-learning.

In a recent challenge, we looked at screencasting and software simulations, which are the two most common methods for technical training. But sometimes a screencast or simulation is overkill for orienting your learners with an application’s UI or features.

That’s where interactive screenshots come in. They’re easy to build, and let learners quickly drill down into the details for a particular menu or panel. In my opinion, they’re a must for your e-learning toolkit.

Challenge of the week

This week, your challenge is to create an interactive screenshot for an application’s UI or specific features.

Here are a few things to consider when planning your projects:

  • How much of the application will you show? How much do you need to show?
  • How will learners pull the information? Hover? Click? Drag?
  • How can you work additional resources, videos, or practice opportunities into the detailed views?
  • How will learners return to the original screenshot?

Tools

You can use Articulate Storyline, Studio, or PowerPoint to build your demos.

Resources

Sharing your projects

You can share your files in the comments section below, the E-Learning Heroes forums, or on your personal blog. If you post on your own blog, include a link in the comments section below.

I really like how Gem Henderson and Jackie Van Nice write a short post for each of their demos.

The posts give us some insights into their design process. Anyway, if you’re thinking of blogging but not sure what to write about, the challenges are a great place to start.

Here’s wishing you an screentastic week, E-Learning Heroes!

Note:

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. We’ll feature your work and provide feedback if you request it.

Published 11 years ago
Version 1.0
E-Learning Challenge
  • HeatherBeaudoin's avatar
    HeatherBeaudoin
    Community Member
    11 years ago
    Hi, Troy... sure thing. I created a state for each text box that just changed the format color to orange. I called it the Highlighted state. To do this, select a text box, then select the States tab down in the Timeline area. You can edit an existing state (or create a new one by just typing in the new state dialog which is what I did). Then, while you have the state selected, you can edit it. I just changed the color, but you can do anything you want.

    Then, you have to tell Storyline when to use that state. So, you create a trigger. For every hotspot area, I had two triggers. One will show the correct layer when the user clicks the area. The other trigger changes the state of the corresponding text box to Highlighted when the user hovers over the hotspot.

    Check this out: https://community.articulate.com/series/articulate-storyline/articles/adding-and-editing-states
  • TroyGreer2's avatar
    TroyGreer2
    Community Member
    11 years ago
    Thank you, Heather! Your design is excellent and I really appreciate the help. I'm in one of those non-creative zones and this really helped! Thanks for your prompt reply.
  • MaryCropp2's avatar
    MaryCropp2
    Community Member
    11 years ago
    Ugh, can you tell I'm new here? I meant to only share one file but it looks as though the entire output file was shared. :-(
  • PaulAlders's avatar
    PaulAlders
    Super Hero
    11 years ago
    Wow, what a great examples guys! Very inspiring.

    Joshua - I like your graphics and the button for twitter addicts. Awesome!

    Ashley - a great idea to use a global issue for this challenge. Great work!

    Jackie - Your entry reminded me that I still had to fill out my income tax. Great job!

    Jeff - I like your animations and the use of a coach (voice-over). As always...top!

    Ari - Thanks for sharing! That's an interesting neighborhood to live in
  • jeff's avatar
    jeff
    Community Member
    11 years ago
    Some cool entries this week! And it's only Tuesday, Joshua yours made me laugh! The peeping characters are really funny.

    Dan, LOVE your example! Jackie nice to see it being used with a document. I wonder if there are more creative ways to do that.

    The rest of you, well done
  • DavidAnderson's avatar
    DavidAnderson
    Staff
    11 years ago
    Nice demo, Charles. Your demo will also fit nicely in the "guided tour" challenge I scheduled for next month:-)

    Really like the attention to detail you include in your demos.