This week’s E-Learning Challenge was to create an interactive infographic.
Infographics can be a great way to provide information about something that has a strong visual component. You often see simple infographics like this in user manuals, such as these examples from the Instant Pot website.
Infographics can also be used to pull together multiple pieces of information that use some kind of visual cues to bring them together. While infographics are meant to provide information in an easy-to-use format, it’s quite common for a static infographic to present limitations on how much information can be presented, either by limitations to the visual (such as showing only one side or a limited view of an item) or due to limited space for explanatory text. Using an eLearning authoring tool, such as Storyline, allows the designer to add interactivity so you can turn objects, zoom in on areas, or move from place to place. There are quite a few good examples provided in the recap for this challenge.
I was looking for an opportunity to use the parallax slider effect that Tom Kuhlmann demonstrated in a May 29, 2019 Articulate Training Webinar. Given that, I chose to create a timeline graphic using some data about the development of distance learning for higher education that my daughter had pulled together for a graduate school project.
The first thing I did was build a really long timeline in Adobe Illustrator. My original plan was to keep each decade proportional for the purpose of having an accurate correlation between the visual and the number of years. However, as is often the case with a timeline used in training, things started a little slow and then got very busy later on. If I used consistent sizing for each decade, I was faced with either having them small and very crowded in later years, or large and very empty in the early years. I thought a better compromise was to color-code each decade so I could keep them small at the beginning and larger toward the end while still giving the viewer a good sense for “what makes a decade.” This timeline graphic was very long and skinny:
Within Storyline, I used Insert > Slider to put in a simple slider to start. The first edit I made was on the Slider Tools Format ribbon, where I set the Thumb Fill to Picture using my timeline graphic. I had to stretch the slider out quite long to accommodate the length of the graphic and to allow for sliding it end to end on the screen, but the height was fairly short. In some cases it might be helpful to make the Track Fill and Track Border transparent, but in this case the track never shows on screen, so I left it visible. I did remove the Thumb Border for clarity.
On the Slider Tools Design ribbon, I made a few edits to make the slider easier to use:
- Every slider you insert in Storyline is automatically assigned a variable. In this case it was assigned the variable name Slider1. I changed this to varTimeline so that it would be easy to remember, as I knew I would be referencing this variable a few times as I continued working. I also made sue that the Update option While slider is dragged was selected.
- The slider was automatically set up with Start and End values of 0 and 10. While this would have worked, it would have made the timeline movement quite jerky as it would only stop 10 times along quite a long graphic. I edited that to make it 0 to 100 and that seemed to provide clean movement.
- I didn’t edit the Initial field as I wanted to set that with a trigger, but I did check that the Step value was 1. This meant the stops for the timeline slider would be at 1, 2, 3, and so on up to the End value of 100.
- I also created a quick text box and went to Insert > Reference to put in the code %varTimeline%. This is the name I gave to the Slider variable. I could drag this text box on screen for testing, then drag it off for publishing so it wouldn’t show. I do like to leave these reference boxes in the file if the client allows for it. This makes it easier if I need to come back and edit the file later, as I can just pull it back on the slide for testing.
At this point the sliding timeline is fully functional. The user can click and drag the graphic or swipe on it if they are using a touch-enabled device. However, I wanted something a little more straightforward and with a little finer level of control. So, I inserted a second slider at the top of the screen. For this slider, I used a Thumb Fill of a picture of a mouse, again with no border, and a simple gray track. The key to making this function was using all the same Slider Properties as the sliding timeline with the exception of swapping the Start and End values so the motion would be contrary. While that wasn’t intuitive to me, on testing that’s what felt and looked the most natural to me. I didn’t need to make a second reference text box as the same variable reference worked for both sliders.
Now the effect is that when the user moves the mouse along the gray slider at the top, the colorful timeline slider also moves (in the opposite direction). The speed is also slightly different as the timeline slider covers much more territory over the same 100 steps.
The final step was to put in the content that I wanted to appear over the timeline. This ended up taking up quite a bit of time, and could have taken more, as I tried various solutions to having the content bubbles appear and disappear at the right time. The first approach I took was to put each decade of content on another slider, again using the varTimeline variable so it would move along with the mouse movement. This worked beautifully for the early years with a decent amount of space between them, but I found when the sliders got very long and crowded with content, they got fuzzy and tended to bump into each other. I could have worked on editing these further, but I didn’t want to spend too much time on an “extracurricular” challenge! So, I took advantage of my varTimeline variable with 100 stops on it, then set up each decade of content on a layer. I used Slide Triggers to show and hide the layers as the variable value changed.
Note that while I initially just used a Show Layer trigger for each layer and made it conditional such as “Show Layer when varTimeline is greater than 40 and less than 60,” that trigger did not actually hide the layer when it moved out of that range, and my content bubbles just stacked on top of each other. After trying a few different options, I ended up adding Hide Layer triggers as well.
One of the things I value about these challenges is the opportunity to try some new techniques and work out some of the bugs and misunderstandings on my own time, so that I’m able to build things quickly and correctly when I’m working on my clients’ time.