Static to Interactive: Transform Infographics into Interactive Graphics #236

Interactive Infographics in E-Learning #236: Challenge | Recap

If you’re looking for a way to exercise your course-building skills, you might have heard us talk about the value of deconstructing and rebuilding finished e-learning projects.

Another way to practice your skills is by rebuilding static infographics as interactive graphics. Infographics and e-learning have a lot in common. Both are great sources of data and visuals that you can use to build your interaction.

Design considerations

Here are some things to consider before you rebuild your infographic as an interactive graphic:

Many infographics are taller than typical e-learning projects. What are some ways you can adapt taller infographics into shorter, wider interactive graphics?
Is there a way you can enable learners to sort or rearrange the content? Common sorting methods: Alphabetically, numerically, category, date and time, and random.
Which information can be turned on and off?
Where can you zoom in and out of information?
How can markers, tooltips, and callouts help reduce clutter and enable learners to pull information?
How can you hide and reveal some of the information to emphasize different types of information?
Could the infographic be used as a course menu?

This week's challenge

This week your challenge will be to take a static infographic and rebuild it as an interactive infographic.

For reference, include a link or screenshot of the original infographic when you post your examples. That will help us see what you started with before making it interactive.

Share Your E-Learning Work

Comments: Use the comments section below to share a link to your published example and blog post.
Forums: Start your own thread and share a link to your published example..
Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you transform your static into interactive, check out the paper cutout examples your fellow challengers shared over the past week:

Hand-Crafted Image Effects in E-Learning #235: Challenge | Recap

Wishing you a transformative week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning 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.

124 Comments

Amber Price

almost 5 years ago06/17/19 at 12:57 pm (UTC)

I was inspired by so many of the entries this week and wanted to create another one, myself! This is a tribute to our adorable Theo! https://360.articulate.com/review/content/0304eaca-ba3e-415a-9156-9c448b48f8f0/review

Stephanie Powner

almost 5 years ago06/17/19 at 3:32 pm (UTC)

Hi David, I'm new to the challenges - just wanted to ask if you include all examples in the Recap or a selection? thanks

over 4 years ago12/02/19 at 1:53 pm (UTC)

Hi Stephanie - I include everyone's examples. During the first month of each challenge, the entries are listed in the order they were shared. After 30 days, I reverse the order and place all newer entries at the top. Your entry can be viewed here: https://community.articulate.com/articles/interactive-infographics-in-elearning#StephaniePowner

Julie Grosclaude

almost 5 years ago06/19/19 at 2:22 pm (UTC)

Hello everyone, here is my submission for this week challenge. Graphics are made by my friend and teammate Louma Massassati. We both are roller derby players, a game whose rules are not that simple... Demo link : https://360.articulate.com/review/content/aa97e947-8680-460d-9535-5fcdfba1a282/review

Stephanie Powner

almost 5 years ago06/20/19 at 6:42 pm (UTC)

Hi Julie, They are done with the standard Storyline Markers that you can see when you choose Insert on the menu bar. There is an option for the markers to pulse and you can add media etc.

Vanessa Malléa

almost 5 years ago06/21/19 at 9:57 am (UTC)

Hi ! It's my first participation to the challenge. :) Demo link : https://360.articulate.com/review/content/d2179126-f27b-4e33-9446-40ce40e192c0/review I based my interactive graphic on this infographic : https://www.avise-info.fr/informations-entreprise/les-cles-pour-developper-son-leadership

Andrea Bornheim

almost 5 years ago06/25/19 at 5:52 pm (UTC)

This is an example from a course we created for a Convention & Visitors Bureau as part of their front line staff training. The info graphic depicts tourism's economic impact by segment. https://360.articulate.com/review/content/287b8bb8-cfbf-41de-9b6d-950ba57cf399/review

Maggie Cowan

almost 5 years ago06/25/19 at 8:22 pm (UTC)

Late to the party again! My submission this week is based on a game, not an existing infographic. I basically took facts about the game and put it into visuals based on the game summary screens. This was a fun one. :) http://s3.amazonaws.com/ElearningChallenges/236/story.html

erica brooks

almost 5 years ago06/26/19 at 1:37 pm (UTC)

Hi Everyone, Peace and Blessings! Working on building my portfolio and get more involved so here is my contribution Link to project: https://360.articulate.com/review/content/59275a5c-9ecb-495f-b15f-49b98a6c426e/review Here is the original Infographic: https://articulateusercontent.com/review/items/jdMK1pqJXn_b_N5t/story_content/external_files/Infographic.jpeg Thanks!

Derrick MacGillivray EdD

almost 5 years ago06/27/19 at 3:02 pm (UTC)

I'm new to the challenges, but this one lined up well with some grant work I am doing on the Opioid crisis in Tennessee. It's the first time I've tried converting an infographic like this, so I went with a fairly simple design. It was created in Storyline then embedded it into Rise360 for viewing. Here is the Review 360 link: https://360.articulate.com/review/content/84dca2f3-70ab-4af6-a352-49ff56cb9859/review

Alfredo Quiroz

over 4 years ago12/02/19 at 1:55 am (UTC)

Hello everyone, I took the challenge and here I share the interactive infographic I did from a static *. It's my first venture into Articulate Storyline and I hope I can have the opportunity to learn more and share more projects. It took me some time to solve how to show the second instruction until the two texts of the first part were shown; also to use shortcuts... I'm sure I need to practice. * Background vector created by macrovector - www.freepik.com. I recommend this page where you can find free graphic material without forgetting the required attribution. I took the vectors from there and I only had to adjust the dimensions. _ _ _ Here's the link: https://360.articulate.com/review/content/4ed6542c-883e-4f6a-9a01-13dc3803a659/review Waiting for your feedback.

over 4 years ago12/02/19 at 2:10 pm (UTC)

Nice example, Alfredo! I like the way you combined click-and-reveals w/ mouse overs. Here's a link to your example in the recap post: https://community.articulate.com/articles/interactive-infographics-in-elearning#Alfredo

over 4 years ago12/02/19 at 2:52 pm (UTC)

Thank you very much! :)

Jordan Ash

over 4 years ago01/06/20 at 5:19 pm (UTC)

I've had a go at reproducing this infographic about cuts of beef. https://visual.ly/cuts-beef I used javascript to allow me to use an image as the page background. I've also recreated the outline of the cow using shapes and line drawings in powerpoint. http://s3.amazonaws.com/Articulate_Storyline/Portfolio/Published/Cuts%20of%20Beef%20-%20Storyline%20output/story_html5.html

Jonathan Hill
Hero

4 years ago03/22/20 at 7:43 am (UTC)

Cross-posted from ELHC #274 What You Need To Know About Covid-19 Here's an interactive infographic on the reproduction number (R0) of COVID-19 CORONA EXCHANGE Demo: https://bit.ly/elhc274 Download: https://bit.ly/elhc274dl

Kristin Warehime

over 3 years ago08/06/20 at 4:41 pm (UTC)

Hi All, Some time ago I created this infographic to help trainers in my company think about how Bloom's connects to eLearning. Assessing at each level isn't always easy and we tend to default to multiple choice, T/F etc. Made sense to use that infographic for this challenge. Original static image: https://360.articulate.com/review/content/a5bef336-3fe2-4516-b941-169532fab43e/review Interactive version: https://360.articulate.com/review/content/90fbe909-a44f-4638-9436-f13bb7f1f3fa/review

Ron Katz

almost 3 years ago05/20/21 at 7:47 am (UTC)

Here is my entry (a little late). Demo: https://360.articulate.com/review/content/14835e81-ddb4-4fc1-810c-4c6341b3b882/review

Static to Interactive: Transform Infographics into Interactive Graphics #236

Design considerations

This week's challenge

Share Your E-Learning Work

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

A Week in Review: June 10, 2019

Create an Infographic: What Do You Love and Hate About E-Learning #103

30 Examples of Interactive Infographics in E-Learning #236

124 Comments