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.

But when you're looking for more custom solutions, you have to get creative. And that’s what this week’s challenge is all about!

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.

The New $5 Bill

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.

Image Zoom Interaction

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.

Storyline 2 Zoom Video Template Freebie

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:

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:

25 Examples of Anthropomorphism in E-Learning

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.

413 Comments
Nancy Woinoski
Veronica Budnikas

This is great Julia, Waldo popped into my mind too for this challenge. This is really well-executed. I love the teeny Waldos popping up on the first slide and I never thought I would see Waldo face down in handcuffs :) For me there is one small problem with this: When I found him, I wanted to click exactly on Waldo (I am a bit OCD!), but because (I assume) you are using hotspots that show layers on mouse hover, when I move my mouse on Waldo, the layer changes, so I had to click in the vicinity of Waldo to get to the end. I am not sure there is any way to really solve this entirely (at least not without rethinking the whole interaction), but you could possibly improve that aspect by having Waldo appear in an area of the mag glass where you can click without it changing to another layer, ... Expand

Veronica Budnikas
Dan Sweigert
Rambo Levin
Aman Vohra