Blog Post

E-Learning Challenges
2 MIN READ

Static to Interactive: Transform Infographics into Interactive Graphics #236

DavidAnderson's avatar
6 years ago

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.

Published 6 years ago
Version 1.0
  • Hello again!

    Here's something I put together specifically for this week's challenge. Be warned, it contains bad puns, a dial interaction and references to the Michael J Fox classic 'Teen Wolf'.

    "VENN is it safe for a WEREWOLF to go to the mall?"

    DEMO: http://bit.ly/2QZ1YAS

    DOWNLOAD: http://bit.ly/2F5CUDq
    • DBMcPeek's avatar
      DBMcPeek
      Community Member
      Very creative. I especially liked the dial-a-moon!
    • ElizabethBauer-'s avatar
      ElizabethBauer-
      Community Member
      Plus - the secret life of Storyline characters. Fun example, and I loved the character transformation. (Edit: Trans"fur"mation?)
    • AngieCarter's avatar
      AngieCarter
      Community Member
      You certainly peeked my interest with the description and the demo did NOT disappoint! This was spectacular!
    • HillaSchlegel's avatar
      HillaSchlegel
      Community Member
      Just sublime! Need to give this late reply to you Andrzej! Thanks a lot for this nice work!
    • AndrzejJaboski-'s avatar
      AndrzejJaboski-
      Community Member
      Thank you all for the feedback :) Can't wait for the next challenge!
  • Hi! I'm not new to Storyline but new to the challenges.
    Mine is pretty simple - I used an existing infographic from
    https://www.elucidat.com/blog/modern-learner-profile-infographic/

    cut it down and used a new background image from the library. Added markers with triggers to show the new layers. Layers display the graphic entering via animation. Layer timeline pauses at 2 seconds. Clicking the graphic resumes layer timeline which ends at 4 seconds.

    https://rise.articulate.com/share/ImmnIUumbrJ0TRAD5DvWKw_ItGvCvDSz

    Cheers!
    • JeffreyRiley's avatar
      JeffreyRiley
      Community Member
      Debbi, good source on elucidate. It is similar to what I found for workflow learning. I liked the way you had the graphic work. Did you put a Storyline block in RISE?
    • AlexanderSalas's avatar
      AlexanderSalas
      Community Member
      Thanks Tracy, some people have told me I'm insane in da membrane
    • JeffreyRiley's avatar
      JeffreyRiley
      Community Member
      Wow that is an amazing statistic. Maybe that is why sharks are attacking humans more now? You always have interesting effects in your challenges.
  • JodiSansone's avatar
    JodiSansone
    Community Member
    Get to Know the Dogs of Scotland
    Demo: https://bit.ly/2KC6Tq9
    Download: https://bit.ly/2I2OalX

    Happy Sunday morning! Here's one inspired by Tracy Carroll who got me thinking about Scotties last week. This was a "one Cubs game last night and three cups of coffee this morning" effort. The hardest part was deciding which dogs I could include. I left so many out! Enjoy the week!
    • JeffreyRiley's avatar
      JeffreyRiley
      Community Member
      Jodi you always have great images and music. Is there a particular music source you use?
      Did the images of the dogs come from the infographic?
      • JodiSansone's avatar
        JodiSansone
        Community Member
        Hi Jeffrey,
        I just saw your question. The music I used in this one was from AudioBlocks--it's just a fluffy little thing that seemed to fit the highlands theme. The dog visuals came from one of my stock services and was actually 3 different parts of an info graphic series on dogs--I combined and rearranged them to fit the challenge topic. The art contributor/service is a7880ss--that's how they are identified. Hope that helps!
    • KarynJones-5c19's avatar
      KarynJones-5c19
      Community Member
      Beautiful, as always, Jodi! Made me a wee bit homesick! We had a Springer Spaniel and a Westie growing up. They are so much fun!
      • JodiSansone's avatar
        JodiSansone
        Community Member
        Aw, Westies are sweet! I'm a terrier person. I had a Westie named Duffy, and three Scotties: Mike, McTavish, and Spike. Looking to find a Wheaten Terrier now...plus two more cats. ;)
  • As it happened, my cousin had a baby last week and we're from quite a big family, and everyone started trying to work out who were cousins, second cousins, cousins removed, etc. So I had just started putting this together, as a bit of fun, to explain how it works. The infographic that is now interactive is the family tree slide, so if you are all confident with the whole cousin-relationship thingy, just skip to the family tree slide.

    http://finnberrys.co.uk/Cousins/story_html5.html
    • MelissaMaas's avatar
      MelissaMaas
      Community Member
      This is great, Nicki! Thank you for clearing that up! It was easy to understand and you created a good assessment for the learner.
    • ConcettaPhillip's avatar
      ConcettaPhillip
      Community Member
      Nicki, do you mind if I share this? There's a great genealogy group on Facebook who I think would really appreciate this!
    • ElizabethBauer-'s avatar
      ElizabethBauer-
      Community Member
      I was just trying to explain this topic to my mother today! I didn't think of making some eLearning for her, but the visuals might have helped.
  • TracyCarroll's avatar
    TracyCarroll
    Community Member
    It's been a long time (3 years) since I posted this interactive infographic e-learning example! I noticed that the presentation was no longer working, so I updated it to Storyline 360, and created a brand new animated video for the presentation.

    I believe this was the first example I ever posted that made it to the Articulate eLearning Examples page--I remember I was so thrilled!

    "What's so Great about E-Learning?!" interactive infographic demo: https://tracycarroll.net/red103/story.html

    Blog post/tutorial: https://tracycarroll.net/interactive-infographic/
    • ElizabethBauer-'s avatar
      ElizabethBauer-
      Community Member
      Nice job revisiting and updating the material. I like the mix of media types and interactions on the same page.
    • JeffreyRiley's avatar
      JeffreyRiley
      Community Member
      Always good stuff Tracy. I especially liked the way the feedback worked in the last section. I have tried something similar in my example where the answer is hidden and a state change reveals it so no need for layer.