I designed this interaction for the E-Learning Heroes Weekly Challenge #436 - Using Graphic Dividers to Add Visual Interest to E-Learning Courses. The challenge was to show ways to add visual interest to e-learning courses w/ custom graphic dividers. I got the idea for this example from browsing free vector images on www.freepik.com. I found the perfect image showing the four seasons. Using Articulate Storyline 360, I started off by placing each image on four different slides, then I added fade transitions between the slides to them appear seamless. Next, I got the idea to add a GIF and found the perfect GIF image of a squirrel to add. It had a resting motion and a running motion, so all I needed to do was add motion paths. Here are the steps:
1. I created motion paths going in three different directions (Left, Right, and Up), and set each path to 'Relative' in the Path Options menu. This means that the next motion is activated from the last endpoint rather than returning to its original position. I changed the triggers to move the GIF image (squirrel) in each direction when the 'user presses a key' 'after clicking on this slide'. To make it more realistic, I added a state with the squirrel facing backward.
2. To reveal information for each season, I included shapes with the information, initially set to 'Hide.' Triggers were set to change the shape's state to 'Normal' when the GIF intersects with it and back to 'Hide' when the intersection ends. This was done for each slide.
3. To simulate transitioning between seasons, I added shapes on each side of the slides and triggers to jump to the next corresponding slide when the GIF makes contact with these shapes.
4. Instructions and information were added at the beginning of the course using simple icons and states so the user knows how to navigate the lesson.
5. I provided user instructions and information at the course's start using simple icons and states for navigation guidance. Additionally, I added a dummy 'Start' button on the first page to activate motion path triggers.
For effect, I included ambiance in the Spring and Summer seasons, recognizing that animals are less active in the Fall and Winter.
One challenge I encountered was the squirrel occasionally disappearing between slides. While I haven't identified the cause, users can utilize the navigation buttons for a seamless experience.
Overall, I enjoyed creating this example. Although it is keyboard accessible, I'm aware it does not fully cater to mobile users. To address this, I included navigation buttons that also serve as directional arrows for tracking the squirrel.