Blog Post

E-Learning Challenges
2 MIN READ

Using Interactive Screenshots to Magnify Important Details in E-Learning #267

DavidAnderson's avatar
5 years ago

Interactive Screenshots in E-Learning #267: Challenge | Recap

If you’re trying to teach your learners about software, products, or applications, a common way to highlight features and functionality is to use screencasts and software simulations

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. 

Interactive screenshots are a great way to orient learners with a big-picture view of an application’s interface, then let them drill down into the details for a particular menu or panel. 

They’re easy to build, super versatile, and a solid alternative to screencasts or simulations. And they're what this week’s challenge is all about.

View example | Download

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?

Last Week’s Challenge:

Before you zoom into this week’s challenge, take some time to meet your fellow e-learning challengers in last week’s podcast interviews:

Audio Interviews with E-Learning Designers #266: Challenge | Recap

Wishing you a great week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning 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. I’ll update the recap posts to include your demos.

Published 5 years ago
Version 1.0
  • Don't you just love it in the movies when the hero uses ridiculously powerful imaging software to find the crucial piece of evidence that solves the mystery?

    I couldn't resist another go at this 'magnify' challenge with this tribute to the ZOOM AND ENHANCE trope seen in so many films, including BLADE RUNNER.

    ZOOM AND ENHANCE
    http://bit.ly/elhc267b
  • JodiSansone's avatar
    JodiSansone
    Community Member
    Win $1 Million in the ProPlan Westminster Bracket Challenge
    Demo: https://go.aws/38ZAW3X

    I was entering this contest on a website when this challenge was announced yesterday, so I leveraged the screen shots to introduce everyone to how the Westminster Dog Show works and give you all a chance to win $1 Million. (You're welcome!) The show is on February 10th and 11th (and I'm not plugging ProPlan, just the chance to win--:)) When I was working on this I was struggling with how to give it one unified look. If you have some suggestions on how to marry the WKC and ProPlan, I'd love to hear it. Have a great week!

    • alexjinca's avatar
      alexjinca
      Community Member
      I love the bold look of the next button, and also the colour choice, lovely strong purple!
  • Work is pretty busy at the moment, so I'm being a bit picky-choosy as to which challenges I participate in. This week's is quite timely, as I'm currently producing some eLearning about how to make documents (Word, pdfs, PowerPoint) accessible for people who use assistive technology.

    I've just published one slide from the wider package. I'd appreciate any feedback, as this will become a live product.

    https://360.articulate.com/review/content/15df228c-f64d-419b-885f-c99ddac4c33d/review
    • DanielJovanov-a's avatar
      DanielJovanov-a
      Community Member
      Nicki, I know how it is to find time to do something like this, so it's very refreshing when we get a simple challenge like this

      Yours looks very nice, by the by!
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      Great tips, I didn't know about the Accessibility Check option.

      What do you think about showing 'bad' example that changes to the 'correct' setup once you click the icon and see the additional info?
      • NickiBerry-3088's avatar
        NickiBerry-3088
        Community Member
        That's a good idea! Thanks. I probably won't change it on here but as I'm building the rest of the eLearning, I can think of several places where that would work well.
    • alexjinca's avatar
      alexjinca
      Community Member
      I like how crisp the screenshot is and how straight forward the instructions, well done.
    • JillMartine's avatar
      JillMartine
      Community Member
      I like the yellow boxes highlighting the clickable areas and the animation. Nice work!
    • DanielHolthouse's avatar
      DanielHolthouse
      Community Member
      Thanks, all! This was a fun challenge. In the spirit of learning and improving, I would welcome any thoughts folks have on how you would improve this. Is there one thing (or many!) you would change to make this more usable, etc? Appreciate your thoughts!
      • AndrzejJaboski-'s avatar
        AndrzejJaboski-
        Community Member
        It's a small detail, but what do you think about adding a small pause before the start of the video on each layer? Just 2-3 seconds so the user has enough time to read the description first, and nothing is moving in the background :)
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      Great combination of static images and videos! I like the fact that I can explore the software on my own.
    • JillMartine's avatar
      JillMartine
      Community Member
      This is a really sleek design. It's fun and informative. Thanks for sharing the download, too. I'm refining some ideas from seeing yours!
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      Looks very nice! I like how you showed the areas to hover over in the beginning :)
    • DavidDunn-0a98a's avatar
      DavidDunn-0a98a
      Community Member
      Hi jonathan. I liked this, it was really cool. The magnifying glass and sound effects really added to the feel of this demo.
    • JillMartine's avatar
      JillMartine
      Community Member
      I've been playing solitaire for so long that I forgot how complicated it could be to explain to someone. Nice work!