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

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.

Interactive Comparisons in E-Learning

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.

Before and After: The Berlin Wall

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.

Montse Anderson

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.

Then and Now: 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!

Resources

I’ve tried to curate as many before-after examples as I could find. Keep in mind that some of the examples are older and may not be available. News sites are the worst at moving or deleting web pages without adding redirects.

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:

19 Ways Instructional Designers Use Branching Scenarios

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.

230 Comments
Jeff Kortenbosch
Jane Maduke
Jeff Kortenbosch
Brian Keys
Ajay Gupta
Michael Hinze
Dianne Hope
Bob Kaart
Bob Kaart
Jack Quantrill