Showing Before and After Comparisons in E-Learning #335

Before-and-After Examples in E-Learning #335: 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 shorelines, volcanos, protests, city planning, artistic transformations, historic renovation, tsunamis, landscape devastation, lockdown impacts on tourism, satellite photos during coronavirus lockdown, hurricane flooding, and much more.

Using Interactive Sliders for Before-After Comparisons

The before-after effect uses two images and either a slider or button to show comparisons. While Storyline 360 doesn’t have a specific feature to create before-after comparisons, you can use sliders, dials, and toggle buttons to simulate the same effect.

Here's 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

Before and After Comparisons in Journalism

Journalism sites like the New York Times, Associated Press, and USA Today frequently use before-after interactions to show the impact of fires, earthquakes, and hurricanes.

Notre-Dame before and after the fire

You can also find before-after sliders used by national parks. I like this example that shows the effects of hibernation on bears. Using the slider, you can see what bears look like after losing one-third of their body weight after hibernating all winter.

Fat Bear Week 2020 Slider Comparisons

Challenge of the Week

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

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. So show us anything you want!

Share Your E-Learning Work

• Comments: Use the comments section below to share a link to your published example and blog post.
• Forums: Start  your own thread and share a link to your published example..
• Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
• Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

To help you compare this week’s challenge to last week’s challenge, check out the creative ways course designers use random number variables in e-learning.

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.