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 example | Montse 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.
Join our weekly challenges to try new skills, get inspired, and build your portfolio.