Interactive Graphics

Interactive and Animated Graphics

On completion of this module you will be able to:

  • Explain some reasons for using interactive and animated graphics in teaching and learning
  • Give examples of effective use of interactive and animated graphics in teaching and learning
  • Plan, produce and distribute an interactive or animated graphic
What is an interactive information graphic?

The main purpose of an infographic is to communicate visually something that is hard to explain verbally.

Why use an interactive information graphic?

Traditional learning environments are often highly text-centric and sequential. Presenting information in a visually interesting way helps increase student engagement and retention.

An interactive design with a non-prescribed learning path encourages students to explore on their own – helping them develop the ability to self-direct their learning.

Examples
How to make interactive infographics
Resources

Animated Graphics

Why use animated graphics?
Principle #1:
  • coffee flowers
  • Because of its ability to leave out irrelevant details, an illustration is often more effective than a photograph for instructional purposes. With their limited experience, novice learners sometimes have difficulty knowing what to pay attention to in a complex realistic image. Creating a simplified illustration helps direct their attention to the important aspects of the concept being presented. The same is true for live action as opposed to animated motion pictures. In most learning situations, simpler is better. Reducing the complexity of the image helps focus the attention of the learner.
Principle #2:
  • animated pencil
  • The human visual system is highly attuned to motion. Our brains can’t help but notice the slightest movement. We pay close attention as we try to determine whether the change indicates predator or prey. At a purely perceptual level, motion is highly engaging.
  • Combining these two principles gives us animated graphics (when they have characters in the story they are sometimes called cartoons).
Examples
How to make an animated graphic
  • I signed up for a free account at moovly.com
  • I watched the 2-minute getting started tutorial
  • I clicked the New Moov button
  • I waited for resources to load
  • I selected a style (free, not plus or pro)
  • I dragged some graphics onto the stage.
  • I selected one.
  • In the timeline I opened the triangle and chose an animation.
  • I played with the timing.
  • At the bottom left I clicked the speaker icon to import some music from my computer. Be patient - it takes a moment for it to appear in the library at the left.
  • I dragged it onto the stage to add it to the timeline.
  • I clicked the microphone icon at the bottom left to add narration. Again be patient and wait for it to show up in the library.
  • I used the text tool at the top to add some text to the timeline.
  • I clicked the floppy disk icon at the top to save my moov.
  • Then I clicked the X at the top right to get out of moovly.
  • Then I logged back into moovly.com, went to the MyMoovs tab and clicked Details on my Moov.
  • Then I clicked Download video and chose SD (cause they wanted money for HD).
  • Eventually I got an email with a link to download the mp4 video file to my computer.
  • They want $2 to remove the extro, but you can do that yourself in Movie Maker or iMovie
  • Then I uploaded the video file to my YouTube account and put a link to it in my Moodle course.
  • moovly screenshot
Resources

Here’s another useful tool for converting text to speech that can be downloaded as an mp3 and put into your animated graphic