Zooming and Magnifying Images in E-Learning #114

Zooming Pictures in E-Learning #114: Challenge | Recap

Here’s a common e-learning design challenge: Your course features images, graphics, or screenshots with important details that are too small to view at the slide size.

One solution would be to make the slide size larger. But that only works if the learner’s device supports the increased dimensions. A more practical solution is to provide a way for the learner to zoom an image to view its details.

Moving Beyond the Default Zoom Options

If you’re working in Articulate Storyline, Articulate Engage, or Articulate Quizmaker, then you already have built-in features for zooming into pictures.

The New $5 Bill

I really like the magnify solution Jeanette Brooks came up with in this interactive currency demo.

The original project featured a draggable magnifying slider that let users explore the currency. While Storyline doesn’t have that specific feature, Jeanette achieved the overall experience by dividing the graphic into quadrants.

Click the image to view the interaction

Each quadrant provides a closer look at part of the bill. You can see a similar approach in this recent challenge entry from Janine Whitling.

Image Zoom Interaction

Here’s a good example of an interactive graphic with custom markers.

The markers are subtle and give learners a visual cue that the image is clickable.

Click image to view the example | Download (SL1) | Download (SL2)

You can download this interaction for both Storyline 1 and Storyline 2. Thanks, Jeff Kortenbosch!

Storyline 2 Zoom Video Template Freebie

Images aren’t the only objects that need a closer look! Check out this video zoom interaction from Matt Guyan.

Click the image to view the interaction | Learn more & download

While you can’t trigger Storyline’s built-in Zoom Region, you can craft some creative transitions using slides and layers.

Challenge of the Week

This week, your challenge is to share a solution to allow learners to zoom in or magnify parts of an image, graphic, document, or video.

Resources:

• How to Create Your Own Zoom Picture Effect in Articulate Storyline
• Three Great Uses for the Zoom Region Tool in Storyline
• Adding Zoom Regions
• Interactive Screenshots in Articulate Storyline
• How to Create an Interactive Image Template

Last Week’s Challenge:

Before you zoom into this week’s challenge, check out the non-human examples your fellow designers shared in last week’s anthropomorphic challenge:

Anthropomorphism in E-Learning RECAP #113: Challenge | Recap

Wishing you a zoom-tastic week, E-Learning Heroes!

New to the E-Learning Challenges?

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

Image Zoom Challenge

Share your zooming and magnifying examples in our current challenge.