What People Love and Hate About E-Learning

Click on the image to view the demo

This project was inspired by the E-Learning Heroes weekly challenge #103 – Create an Infographic: What Do You Love and Hate About E-Learning.  Resources for this challenge included the blog post What Do You Love & Hate About E-Learning? by Tom Kuhlmann on The Rapid E-Learning blog, the How Can Infographics Produce Better E-Learning Courses? blog post by Tom Kuhlmann and the article on How to Create PowerPoint Infographic Elements on the E-Learning Heroes community website by David Anderson, Community Manager.


The challenge was to “Create an interactive graphic using the data from the What People Love & Hate About E-Learning Infographic.”


I initially started recreating the graphics from this Infographic, thinking that I would just add some animations and interactivity.  I then reviewed the information provided for the challenge which was that we only needed to “use the data” from the Infographic, so I changed my design completely and went with photographic images.

I found an interesting article by Wibke Weber on “What is an Interactive Infographic?” in which he explains the theoretical framework of the different types of interactive information graphics.  These are the main take-aways I got from this article:

  • Infographics have been emerging in the context of data visualisation (or information visualisation) which according to Michael Friendly is “The science of visual representation of data.” and belong to the semiotic (“The study of signs and symbols and their use or interpretation” ~ Oxford Dictionary) system of images, with many Infographics influenced by the three semiotic systems image, language and number.
  • Interactivity is a key feature, with the definition of interactivity having different levels – every click by the learner should provide access to new information or the next information sequence for this to be considered as interactivity.  At the highest level of interactivity, learners are able to navigate freely through the information graphic, influencing or modifying the content as they choose their own path.
  • Interactivity can be linear or non-linear in structure.  With the linear structure learners move through a narrative frame pre-defined by the author and with the non-linear structure learners explore the data by themselves.
  • Information graphics integrate different modes, with design, layout and colour being crucial elements in a multi-modality approach to considering an information graphic as an holistic entity. (“Multimodality”~ Gunther Kress)
  • Interactive graphics have two functions – to show something that is hard to explain verbally in a visual way, and to inform (through narration, explanation and description).

The simplified definition of an interactive information graphic given in this article is:

“A visual representation of information that integrates different modes into a coherent whole and offers at least one navigation option to control the graphic; its communicative function is to inform .”


I sourced the images for my design from Pixabay, choosing relevant images to the subject of people, learners, learning, computers and mobile devices.

With the above information and definition of an interactive Infographic in mind, I chose to redesign these sections of the original Infographic.


Each section was designed on a new slide and I chose different designs for each of these sections.  Common elements across the slide designs included animations, hover states and click-to-reveal information.

4 thoughts on “What People Love and Hate About E-Learning

  1. Dianne, it’s driving me crazy figuring out how you were able to transition slides and have it look like they were attached! Is that with animation, slide transition, or both? Would LOVE a hint. Thanks!

  2. This was a beautifully realized version of this challenge – my favorite! Your images were engaging, and interactivity was seamless.
    Since infographics are generally a linear device, it is hard to make this truly a self-directed path. You require the learner to select all options on a screen before the progress arrow appeared, but without needing to lecture about it – I like that!
    Great job. I look forward to seeing more of your work.

    1. Thanks Carol. I’m always sceptical about locking down the navigation in a course. In this design I decided to gently persuade the learner to explore each screen before they were are able to move by using the timeline to bring in the next arrow. On some screens I added the arrow to the last layer of information, although if learners are creative in their exploration and don’t explore from left to right, or top to bottom, the arrow will appear early! I’m not a fan of the default previous and next buttons at all as I like to encourage the learner to focus on the information on the slide, not how they can get through the course quickly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s