Blog Post

E-Learning Challenges
2 MIN READ

Before and After: Showing Visual Comparisons in E-Learning #100

DavidAnderson's avatar
10 years ago

Before and After Visual Comparisons #100: Challenge | Recap

How do you show a contrast of two images without overloading your slide with text? Similarly, how do you present before and after concepts in e-learning?

In this week’s challenge, you’ll create an interaction to showcase the visual differences between two images. This type of effect is often used in journalism to show changes to historical landmarks, cities, geography, real estate, fashion models, aging killers, and art restoration.

Interactive Comparisons in E-Learning

Course designers can also use interactive comparisons in their courses. One way is with cutaway graphics. Cutaways are commonly used in anatomy, architecture, and electrical diagrams. ​With interactive cutaways, your learners can go inside an object to view internal parts, elements, and features.

Let’s look at some other ways course designers can use interactive comparisons.

Before and After: The Berlin Wall

If you’ve followed Michael Hinze’s work, you know how passionate he is about sliders. I really like what he did in this before-and after example of the Berlin Wall.

While this type of effect is usually created with Flash, JavaScript, or JQuery, Michael demonstrates how to achieve the overall effect using Articulate Storyline.

View the example | Learn more | Michael Hinze |  @keypointlearn

Then and Now: The Arizona Biltmore

Another idea for comparing two images is to fade one image into another. In this example, Montse uses Storyline’s built-in slider and custom states to change the transparency of the top image which creates a subtle blending effect.

View the exampleMontse Anderson | @mLearning

Then and Now: Articulate.com

OK, this is one of my favorite slider examples that also works for this week’s challenge. Using the Wayback Machine to retrieve older versions of Articulate’s website, Joanna lets learners explore the design changes to Articulate.com.

View the example | Joanna Kurpiewska | @elearningjoanna

Challenge of the Week

This week, your challenge is to create an interaction to visually compare two images.

You can use any technique you like to compare images. As much as we’d like to see real-world examples, this week’s challenge is more about the interactive ways course designers can create interactive comparisons. Show us anything you like!

Last Week’s Challenge:

Before you get started comparing and contrasting images, take some time to check out the creative ways course designers use branching scenarios in e-learning:

Branching Scenarios in E-Learning #99: Challenge | Recap

Wishing you a transformative 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.

Published 10 years ago
Version 1.0