Blog

Infographics. They’re a great way to tell a story, but they can very easily become visually complex and hard to decipher. I’ve wanted to create an infographic sample for some time. Challenge #177, Tooltips, Hyperlinks, and Explorable Explanations in eLearning Design, was a perfect match for infographics because it would allow me to include source information without cluttering up the screen.

The Method

I started by finding an interesting story to write about in my infographic. The US Census Bureau has a ton of useful information ready for the average person to consume. You don’t need to be a data scientist to understand their publications but an extra little visual treatment wouldn’t hurt either. I chose to use this population report on young adults since it was interesting and also pretty current.

Once I had the data, I set about creating the infographic. Since I was using Storyline, it was going to be separated into different slides. I did use custom up & down arrows to keep the long page feeling of a traditional infographic. Actually creating the visualizations of data was quite challenging. The report had so many interesting statistics that I had to keep culling the information I had put into my project. I pulled up Google image results of infographics if I got stuck and didn’t know the best way to visualize a statistic. In the end, my treatments looked like this:

For the most part, I decided to use actual photos in my project rather than the traditional icons. I created the statistic visualizations mainly from shapes in Storyline, and the photos balanced out nicely with those.

Next, when I had the infographic set up the way I wanted, I added the tooltips to store source information. You can add tooltips in a couple of different ways. I used hotspots (triggered by a mouse hover) to show the layers. The layers each stored a single square chat bubble with the source information.

Finally, I wanted to add a little something special. Two weeks ago the fabulous Mel Milloway posted a video showing how to switch out the standard gray loading icon in Storyline for your own. Take a look at the video- it’s a great tutorial:

Sidenote: if you’d like to download the interaction she used as an example, that’s my scrolling panel decision interaction freebie.

I created my own loading icon with the colors used in the infographic on loading.io. Once I had that, I simply followed Mel’s instructions for switching out some code in the HTML file. It’s actually pretty quick to make the changes required as long as you’re not scared of digging into code.

And with that final touch, it was ready to go.

The Result

[iframe_loader type=’open_link_in_new_window’ href=’/wp-content/uploads/articulate_uploads/177-Young-Adults-Infographic/story.html’ link_text=’View the infographic here.’]