Transforming Infographics Into Interactive Graphics

E-Learning Challenge #12 asks: how do you transform an infographic into something interactive in Storyline?


The heart of this challenge is, for me, a question. What can interactivity offer learning that static images can’t? For me, the answer was that interactivity offers more opportunities to reinforce concepts, to connect them to the learner’s existing web of knowledge — which is, we all know, a crucial principle of learning psychology.


Topic. After searching on Pinterest, which is quite the infographic haven, I found this Spanish language infographic. I’m learning Spanish, I was intrigued at the possibility of revamping it for Articulate since emotions, as a topic, create so many graphic design possibilities. I decided to try to reinforce the names of the emotions with graphics: not just the emoticons in the infographic, but through colors and facial expression. Basically, I decided to revamp the design of the infographic completely in order to add as much visual reinforcement to the concepts as possible.


Audience. This is pretty simple stuff. It’s just learning how to respond to “How are you?” But those first steps into studying a language can lead to getting quite overwhelmed, so this simple interaction, with its multiple angles of reinforcement, is great for beginners.


Images. I had a wonderful set of watercolor backgrounds that I got as a Creative Market freebie. This seemed perfect for a challenge about emotions. With a little more searching, I found some watercolor emoticons, too. I like the way a watercolor’s subtlety conveys the nuances of emotional states. I chose the gorgeous font Hayze for the titles; it’s hand-drawn, which added to the nuanced feel of the design. To cover the facial expression angle, I decided on Brian from Articulate’s great cast of stock photo characters since he’s so likable and shows emotion so energetically. Nicole won out for the female gender, since her expressions were wonderfully pointed and clear.


Design. I could have gone with a simple tabbed interaction, but since each emoticon only represents one simple vocabulary word, I thought all the clicking would get tedious. I liked the idea of using a slider to represent a range of emotion. When you move the slider, the images of Brian and Nicole change, and so does the watercolor halo behind them. I used color psychology to decide which background to use. At first I was concerned that the transitions would be jarring, but after plenty of experimentation, I found that the watercolor backgrounds were subtle enough that the ‘fade’ transition worked just fine. Finally, in the spirit of the immersion strategy, I decided against offering a translation for the words. The best way to learn a language is to dive right in!


Building it out. I created this using a slider and slide layers, tweaking a little bit with the transitions.

Leave a Comment

Your email address will not be published. Required fields are marked *