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 planningartistic transformations, historic renovationtsunamislandscape 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.

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

Before and After Comparisons in Journalism

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

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.

66 Comments
Montse
Tracy Carroll
Joanna Kurpiewska
Daniel Sweigert
Jodi Sansone
Paul Venderley
Ang CM

Hi Paul, Yes, motion path and wipe at same speeds. But there is a way (from what I've read a few ways) to add user control of reveal. This one uses a slider and states, which is simple and effective, albeit somewhat labor intensive. Here is a link http://blog.keypointlearn.com/2015/02/18/before-after-image-slider-in-storyline-2-an-experiment. The .story file is provided in the article. I create slices in PS for precision and to maintain seamless. Here is the author's finished product: http://dev.keypointlearn.com/xcl73_SL2/Wall/V4/story.html Joanna Kurpiewska (her challenge is towards the top) has provided a youtube link to another method that uses scrolling panels, the author (Nejc Zorga Dulmin ) says it can be used with a slider, or buttons, so the user can interact and control... Expand

Anna Gumkowska

My video based example, comparing Traditional Sales and Consultative one, content appear gradually according to what we hear in the video. I though this mirror reflecting photo would be grate for this kind of comparison. :) Main idea behind is to HIGHLIGHT main concepts/points within the video in a way learner can focus on as core takeaways (its hard to remember main points of the video if its long and full of different details). It also put it in simple, visually appealing structure which makes them easier to learn and remember. The design challenge was to fit everything together - the video, different elements and entire content together so that it still looks good and engaging. https://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1fb0qdi3s14t31dnl2ea2qd140t9... Expand

Robbie Christian
Katie Slobodzian