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
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.
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.
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!
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:
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.